What is GraphQL Formatter?

A GraphQL formatter is a tool that parses a GraphQL document (schema, query, mutation, subscription, or fragment) and re-emits it with consistent indentation, field ordering, and argument wrapping so the source matches the canonical style produced by graphql-js and adopted across Apollo, Relay, and Hasura. The semantics never change.

Backend developers, API platform teams, and GraphQL client authors reach for a GraphQL formatter when a schema file has drifted across contributors or when a query pasted from a network tab needs to be readable in review.

Why use a GraphQL formatter?

Parse before format. A real GraphQL parser refuses to format an invalid document, so a missing brace or an unknown directive surfaces with a line reference.
Standardize argument layout. Long argument lists collapse inline up to a threshold, then break and indent uniformly across every file.
Normalize spacing across contributors. Formatting keeps file structure intact while ensuring the rendered source looks identical regardless of who edited it last.
Restore readability after a network capture. Queries copied from DevTools arrive as a single line. Formatting rebuilds the original source.

How to use the GraphQL Formatter

Paste your GraphQL document into the Input panel. Schemas, queries, mutations, subscriptions, and fragments are all supported.
Click Format. The document is parsed using graphql-js.
Read the rewritten document in the Output panel. Parse errors appear above the input with a precise location.
Click Copy and paste the formatted GraphQL back into your .graphql file or pull request.

GraphQL formatting rules

The formatter follows the conventions in the GraphQL spec and the canonical printer in the reference graphql-js library.

Element	Convention	Example
Indentation	2 spaces per level	`field: String`
Block strings	Triple quotes preserved	`"""Description"""`
Field separator	Newline between fields	One field per line
Arguments	Inline if short, multi-line if long	Breaks at line width threshold
Directives	Inline after the field	`field: String @deprecated`
Comments	`#` line comments preserved	Stays on its own line
Trailing commas	Omitted	Not part of canonical print
Operation type	Explicit `query` keyword	Even on shorthand operations

Examples

A condensed query from a network capture:


query GetUser($id:ID!){user(id:$id){id email posts(limit:10){id title comments{id body}}}}

After formatting, the field tree is indented and selections are on their own lines:


query GetUser($id: ID!) {
  user(id: $id) {
    id
    email
    posts(limit: 10) {
      id
      title
      comments {
        id
        body
      }
    }
  }
}

Common use cases

Backend developers cleaning up .graphql schema files before merging a pull request that touches the type system.
Frontend developers formatting Apollo, Relay, or urql queries pulled from a network tab or a stack trace.
API platform teams standardizing federation subgraphs in Apollo Federation, Hive, or Mercurius gateways.
Technical writers producing GraphQL examples for documentation that need to render consistently across pages.

Frequently asked questions

Does this GraphQL formatter validate against my schema?

No. The formatter checks that the document is syntactically valid GraphQL. It does not load a schema or verify that fields and types referenced in a query actually exist. For schema validation, use graphql-cli paired with your schema file.

Does it support schema definition language (SDL)?

Yes. Type definitions, interfaces, unions, enums, input types, and schema extensions parse and re-emit with canonical spacing. Block-string descriptions are preserved.

Will it preserve my fragments?

Yes. Fragment definitions and spreads stay in their original order. Inline fragments render with the standard ... on TypeName form.

How are long argument lists handled?

When arguments would exceed the line width, each argument breaks onto its own line and indents two spaces. Short lists stay inline.

Does it remove unused variables or fragments?

No. The formatter is purely structural. Dead code removal is the job of a linter such as graphql-eslint.

Can it format subscriptions and mutations?

Yes. All three operation types parse the same way. The formatter emits an explicit query, mutation, or subscription keyword even when the source used shorthand.

Does it handle GraphQL comments?

Yes. Line comments starting with # are preserved in place. Block-string descriptions (triple-quoted strings above types and fields) are kept verbatim and re-indented to match the surrounding scope.

YAML Formatter - clean up YAML config and manifest files.
SQL Formatter & Beautifier - pretty-print SQL queries with standard keyword casing.
Markdown Formatter - normalize headings, lists, and code blocks across Markdown files.
JSON Formatter & Diff - format and compare JSON payloads from GraphQL responses.