GraphQL Formatter

Examples

query{user(id:1){name email}}

query {
  user(id: 1) {
    name
    email
  }
}

mutation($id:ID!){deleteUser(id:$id){ok}}

mutation ($id: ID!) {
  deleteUser(id: $id) {
    ok
  }
}

{ hero { name } }

{
  hero {
    name
  }
}

fragment U on User{id name}

fragment U on User {
  id
  name
}

query Q($n:String!){search(q:$n){id}}

query Q($n: String!) {
  search(q: $n) {
    id
  }
}

How to use

1. Paste a GraphQL operation or fragment.
2. Copy the indented document if formatting succeeds.
3. Format variables separately as JSON if you need those pretty-printed too.

What this tool is for

Network-tab queries arrive as a single line. This page indents selection sets, arguments, and fragments with Prettier’s GraphQL parser so humans can review them. It does not execute operations and is not schema-aware against your production graph.

How it works

Pretty mode runs Prettier with the GraphQL parser. Fields, nested selections, and variable definitions get consistent wrapping. Invalid documents fail instead of guessing. Variables JSON belongs on the JSON Formatter, not inside this panel.

When to use it

Cleaning a query copied from a network tab, sharing a fragment in a PR, teaching selection sets, and normalizing a mutation before documentation.

When not to use it

Not GraphiQL. Not a mutation runner. Do not paste auth headers into the query text. Schema validation needs your GraphQL server or IDE plugins.

How it compares to related tools

JSON Formatter for variables JSON. JavaScript Formatter for resolver code. This page is only the GraphQL document.

Common mistakes

Formatting a query and accidentally committing leftover client-only directives your server rejects. Pasting secrets in `#` comments. Expecting unused field warnings — there is no schema here.

Documents vs variables

The operation document and the variables object travel separately on the wire. Format the document here. Paste variables JSON into the JSON formatter. Do not concatenate them into one invalid GraphQL file.

No execution, no schema

Formatting never hits your API. Unknown fields still format if the syntax is valid. Use your IDE’s GraphQL plugin or the server for schema errors.

Related tools