GraphQL Query Formatter
Pretty-print or minify GraphQL queries, mutations, and fragments
Paste a GraphQL query, mutation, or fragment to format it…About this tool
The GraphQL Query Formatter beautifies and minifies GraphQL operations — queries, mutations, subscriptions, and fragment definitions — with correct handling of the parts of GraphQL syntax that trip up naive formatters: inline fragments (`... on Type`), named fragment spreads (`...FragmentName`), directives (`@include`, `@skip`), aliases, and nested input object literals. Paste a minified or inconsistently indented GraphQL document and get back cleanly indented output with consistent brace placement. Or switch to Minify mode to strip an operation down to the smallest valid form for sending over the wire. Everything runs client-side with a purpose-built tokenizer — your GraphQL schema and queries, which often reveal internal API structure, never leave your browser.
When to use it
- →Cleaning up a GraphQL query copied from browser DevTools' Network tab before sharing it in a bug report
- →Formatting queries pasted from a minified GraphQL Playground or Apollo Studio export
- →Minifying GraphQL operations before embedding them in application code to save bytes
- →Reviewing a teammate's PR that adds a new GraphQL operation by formatting it consistently first
Tips
- ◆Inline fragments (`... on User { ... }`) and named fragment spreads (`...UserFields`) are formatted correctly — most simple indenters break on these.
- ◆Minify mode is useful for embedding queries in source code where you want a single-line string rather than a template literal.
- ◆Comments (lines starting with #) are preserved by the formatter but stripped by the minifier, matching how GraphQL servers treat them.
Frequently asked questions
Does this validate my GraphQL against a schema?
No — this is a syntax formatter, not a schema validator. It reformats whatever valid GraphQL syntax you paste in, but doesn't check field names, types, or arguments against an actual schema.
What's the difference between an inline fragment and a fragment spread?
An inline fragment (`... on User { name }`) is defined right where it's used, typically to select type-specific fields on a union or interface. A fragment spread (`...UserFields`) references a separately defined `fragment UserFields on User { ... }` block elsewhere in the document. Both use the `...` syntax but format differently, which this tool handles correctly.
Can I format a whole .graphql schema file, not just an operation?
The formatter is built for operations (queries, mutations, subscriptions, fragments) rather than SDL schema definitions (type User { ... }). Simple SDL will often format reasonably, but it isn't the primary target.