DevToolsmith

GraphQL Formatter

Paste a GraphQL query, mutation, fragment or schema and get it formatted with Prettier: one field per line, nested selections indented, and long argument lists broken up. Syntax errors show the line and column. Nothing leaves your browser.

Runs 100% in your browser — nothing is uploaded

Input
Tip: drop a file here354 chars · 354 bytes · 2 lines
Formatted
587 chars · 587 bytes · 35 lines

Formatting a schema

Schema definitions (SDL) are formatted too, including descriptions, directives and default values:

Before
"""A user account"""type User implements Node@key(fields:"id"){id:ID! email:String!@deprecated(reason:"Use contacts") posts(first:Int=20,after:String):PostConnection! role:Role}
enum Role{ADMIN EDITOR VIEWER} input CreatePostInput{title:String! body:String tags:[String!]=[]} union SearchResult=User|Post
type Mutation{createPost(input:CreatePostInput!):Post!}
After
"""
A user account
"""
type User implements Node @key(fields: "id") {
  id: ID!
  email: String! @deprecated(reason: "Use contacts")
  posts(first: Int = 20, after: String): PostConnection!
  role: Role
}
enum Role {
  ADMIN
  EDITOR
  VIEWER
}
input CreatePostInput {
  title: String!
  body: String
  tags: [String!] = []
}
union SearchResult = User | Post
type Mutation {
  createPost(input: CreatePostInput!): Post!
}

Tips for readable queries

  • Name every operation (query GetRepo rather than query). Names show up in server logs, tracing and Apollo Studio, and some servers require them for persisted queries.
  • Use variables instead of inline values. repository(owner: $owner) lets the server cache the parsed query and avoids escaping problems.
  • Pull repeated selections into fragments, and colocate them with the component that uses them if you use Relay or Apollo.

Sending a GraphQL query

curl
curl https://api.github.com/graphql \
  -H "Authorization: Bearer $GITHUB_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{"query":"query($o:String!,$n:String!){repository(owner:$o,name:$n){stargazerCount}}","variables":{"o":"facebook","n":"react"}}'
JavaScript (fetch)
const res = await fetch('https://api.github.com/graphql', {
  method: 'POST',
  headers: { Authorization: `Bearer ${token}`, 'Content-Type': 'application/json' },
  body: JSON.stringify({ query, variables: { owner: 'facebook', name: 'react' } }),
});
const { data, errors } = await res.json();

A GraphQL response is JSON: paste it into the JSON formatter or generate types for it with JSON to TypeScript. Got the request as a curl command? The curl converter turns it into code.

Frequently asked questions

Does the formatter validate my query against a schema?

No. It checks GraphQL syntax only: unbalanced braces, a missing colon in an argument, an invalid token. Whether a field exists or an argument has the right type depends on the server’s schema, so check that in GraphiQL, Apollo Sandbox or your IDE with the GraphQL extension.

Can I format schemas (SDL) as well as queries?

Yes. Type definitions, interfaces, unions, enums, input types, directives, descriptions in """triple quotes""", extend type and schema definitions are all supported, as well as queries, mutations, subscriptions, fragments and variables.

Why are commas removed?

In GraphQL commas are optional and count as whitespace, so Prettier drops them between fields that are on separate lines. Between arguments on one line it keeps a comma and a space, which is how the GraphQL spec examples are written.

How do I format a query embedded in JavaScript?

Prettier formats queries inside gql`…` and graphql`…` tagged templates automatically when it formats a .js or .ts file. Paste just the query here if you want to tidy it before putting it into code, or format the whole file with the JavaScript formatter.