GraphQL Formatter, Validator & Minifier

Format, validate and minify GraphQL

Paste a GraphQL query, mutation, subscription, fragment or a schema written in SDL and turn it into readable, indented code, with one field per line and nested selections clearly laid out. Validate it to catch syntax errors such as a missing brace or a misplaced argument, with the exact line and column. Or minify it into a compact single-line document for request bodies, persisted queries and URLs. Everything runs locally in your browser.

What can you do?

1. 1. Format queries and schemas
   Operations, fragments, variables with default values, directives, input objects and type definitions (type, input, enum, interface, union, scalar, directive) are all formatted with Prettier.
2. 2. Validate GraphQL syntax
   Get a precise message such as “Line 1, column 15: Expected Name, found "{"” when the document doesn't parse.
3. 3. Minify GraphQL
   Remove whitespace, line breaks, # comments and optional commas. String values and """block string""" descriptions are kept exactly as written.
4. 4. Token-verified minification
   The minified document is parsed again and compared token by token with the original, so the query your server receives is exactly the same.
5. 5. Definition count
   See how many operations, fragments and type definitions a document contains.

Why format and minify GraphQL?

GraphQL queries are often built in one place and read in another: copied from browser network logs, pasted from an API explorer, embedded in code as single-line strings. Formatting turns those dense strings back into a structure that mirrors the shape of the response you'll get.

Minifying goes the other way. Whitespace and commas are meaningless in GraphQL, so removing them shrinks request bodies and GET URLs without changing the operation at all, which is useful for persisted queries, CDN-cached GET requests and logs.

How to format a GraphQL query

1. 1. Paste the query or schema
   One operation, several operations with fragments, or an entire schema.graphql file.
2. 2. Choose format, minify or validate
   The document is parsed first, so you'll know immediately if it's invalid.
3. 3. Fix syntax errors
   Jump to the reported line and column and correct the problem.
4. 4. Copy the result
   Paste it into your client code, API explorer or schema file.

Example: a query formatted and minified

query GetOrders($first:Int=10,$status:OrderStatus){orders(first:$first,status:$status){edges{node{id total customer{...CustomerFields}}}}}
fragment CustomerFields on Customer{id name email}

query GetOrders($first: Int = 10, $status: OrderStatus) {
  orders(first: $first, status: $status) {
    edges {
      node {
        id
        total
        customer {
          ...CustomerFields
        }
      }
    }
  }
}
fragment CustomerFields on Customer {
  id
  name
  email
}

query GetOrders($first:Int=10$status:OrderStatus){orders(first:$first status:$status){edges{node{id total customer{...CustomerFields}}}}}fragment CustomerFields on Customer{id name email}

The minified version has no commas between variables and arguments. That's valid: commas are optional in GraphQL and are treated like whitespace, so ($a: Int, $b: Int) and ($a:Int $b:Int) mean exactly the same thing.

What a GraphQL document can contain

Frequently asked questions

Related tools

Turning a GraphQL response into types? Paste the JSON into the JSON to TypeScript converter.

• JSON Formatter & Validator – Pretty-print, validate and minify JSON.
• JSON to TypeScript Converter – Generate interfaces and types from JSON, or JSON from types.
• TypeScript Formatter & Validator – Format TypeScript and TSX and check them for syntax errors.
• Diff Checker – Compare two versions of text or code line by line.