GraphQL Query Formatter

Overview

Paste a GraphQL query or mutation and get a tidied, indented version with consistent whitespace. The formatter also lists every variable declared in the operation, with its type and any default value - handy when you're hand-crafting requests in a CLI or REST client.

It's for backend and frontend developers working with GraphQL APIs - composing test queries, comparing PR diffs, or pasting AI-generated GraphQL into a request body that needs to be readable. Reach for it any time a query goes from one-line URL parameter form to something you'd want to commit.

How it works

The formatter parses the operation against the GraphQL specification's grammar (October 2021 edition) - operation name, variable definitions, selection sets, fragments, and directives are all recognised. It emits the tree back with two-space indentation, one selection per line, and consistent spacing around colons and braces.

Variable definitions in the operation header (($id: ID!, $limit: Int = 10)) are extracted and displayed separately, including default values and nullability flags, so you know what bindings the request needs.

Examples

• Compact input gets pretty-printed:

  query($id:ID!){user(id:$id){name email posts{title}}}
  

  query ($id: ID!) {
    user(id: $id) {
      name
      email
      posts {
        title
      }
    }
  }
  

• Mutation with input object:

  mutation CreatePost($input: PostInput!) {
    createPost(input: $input) {
      id
      slug
    }
  }
  

• Inline fragment:

  {
    search(query: "rust") {
      ... on Repository {
        name
        stars
      }
    }
  }
  

• Variables panel for the first example:

  $id: ID!  (required)
  

FAQ

Does it validate against a schema?

No - it formats based on grammar only. For validation against your schema, use a server-side validator or a tool like GraphQL Inspector.

What about fragments?

Named fragment definitions are formatted alongside the operation. Spread (...FragmentName) and inline (... on Type) fragments are recognised.

Will comments survive formatting?

GraphQL line comments (#) are preserved on the lines they were attached to. Block comments aren't part of the spec.

Does it handle the SDL (schema definition language) too?

Use the GraphQL Schema Formatter for SDL - the type definitions and type/interface/union declarations need different layout rules than executable operations.

Try GraphQL Query Formatter