Input

Output

What is the GraphQL Query Formatter?

Every GraphQL request someone writes by hand starts as a one-line wall of curly braces. Pasting it into a code review without formatting it first is a sure way to get "reformat please" as the first comment. The same goes for the queries that come out of a frontend build, get logged by a server, or land in a Slack thread when a teammate asks "why is this returning null?". This page takes a query, mutation, subscription, or fragment and beautifies it: two-space indent, one field per line, arguments inline when they fit, variables tidied up, and the operation grammar from the GraphQL spec respected end to end.

Note this page is the operations-side companion to GraphQL Formatter. That tool formats schema definition language — your type Order, interface Node, enum Status. This tool formats what your client sends and what your server receives: query OrderDetails($id: ID!) { order(id: $id) { ... } }, mutations, subscriptions, and fragment definitions. The two grammars share tokens but the structural rules are different — selection sets, aliases, fragment spreads, inline fragments, and directive applications are operation-only. If you pasted SDL by accident, head to the schema formatter instead.

Formatting is hand-rolled in TypeScript — no graphql-js bundle is loaded into the page, so first paint stays small. The output matches what Prettier with its GraphQL plugin produces for the common cases, so dropping the formatted query into a code base that already uses Prettier should not cause a diff. Everything runs locally — your query never leaves the browser.

How to Use the GraphQL Query Formatter

Three steps. There is no Convert button — formatting fires automatically a moment after you stop typing.

Paste, Upload, or Load a Sample

Paste a GraphQL operation into the left Input panel. Click Upload for a .graphql or .gql file, or hit Sample for a realistic e-commerce OrderDetails query plus a small fragment. A typical messy paste looks like this:

query OrderDetails($id:ID!,$includeItems:Boolean=true){order(id:$id){id placedAt status customer{id name email}items @include(if:$includeItems){sku quantity unitPrice{amountCents currency}}total{amountCents currency}}}

The formatter handles every operation construct that shows up in real client code: variable definitions with default values, list-typed defaults, @include / @skip / custom directives, aliases, fragment spreads (...Money), and inline fragments (... on PaidOrder { ... }). Multiple operations or fragments in one document are kept separate, with a blank line between them — which is how Apollo Client and most GraphQL tooling expect documents to be laid out.

Read the Beautified Output

The right Output panel renders the formatted operation. Each field gets its own line. Arguments stay inline when the field fits in 80 characters and break onto separate lines when they do not — same rule the GraphQL plugin in Prettier uses. Variable definitions follow the same rule on the operation header. Aliases keep a single space after the colon (aliasedAs: fieldName). Comments (# ...) are preserved at the indent of the line they were attached to. If the input is malformed — unmatched braces, a stray $, a missing : — the formatter writes a friendly inline error rather than throwing.

Copy or Download

Hit Copy to grab the formatted query for a PR, doc, or chat message. Hit Download to save as query.graphql. Clear resets the input. The whole pipeline is client-side — useful when you are debugging a query against an internal API and would rather not paste it into a third-party tool.

When You'd Actually Use This

Code Review and PR Hygiene

A frontend PR adds a new mutation. The query string was emitted by a build step that stripped whitespace, and now the diff is a 400-character wall. Run the mutation through the formatter, drop the beautified version into the PR description, and the reviewer can actually see what fields you are reading. The same trick works for graphql-react, urql, Relay, and any other client where queries are inlined as template literals.

Debugging a Production Query

A query in production is returning null for a field you expected. You grab the request body from the network tab, paste it here, and now you can see the variable values, which fields use @include, and where the fragment spreads land. Beats squinting at one long line. Pair it with the official guidance on serving GraphQL over HTTP when you need to repro the request manually with curl or Postman.

Learning and Onboarding

New to GraphQL operations? Paste a query you found in a tutorial, format it, and the structure becomes obvious — operation header, selection set, nested selection sets, fragment definitions at the bottom. The output mirrors the layout you will see in graphql.org's queries guide, so it is easy to map back to the docs while you are learning.

Pre-commit and CI Gates

Because the formatter is deterministic — already-beautified queries round-trip back unchanged — you can use this page as a quick "is my query already pretty?" check before committing. For a full automated pipeline, run the same source through Prettier with its GraphQL plugin and fail the build on a non-zero diff. Same idea, just at scale.

Common Questions

How is this different from the GraphQL Formatter page?

The GraphQL Formatter page formats schema definition language — your type, interface, enum, union, scalar, and directive declarations. This page formats operations: query, mutation, subscription, and fragment. The two grammars share tokens but very different structural rules, so trying to format an operation on the schema page (or vice versa) gives muddled output. Pick the right tool for what you have pasted.

Does it validate my query against a schema?

No. The formatter checks brace, paren, and bracket balance well enough to pretty-print, but it does not know your schema, so it cannot tell you that order takes id: ID! rather than id: Int!. For real validation, run your operation through your server's startup checks or against the reference graphql-js validator at the GitHub link above.

Is my query sent to a server?

No. Formatting is pure client-side JavaScript — nothing is uploaded, nothing is logged. Safe for internal queries, queries that include sensitive variable values, or queries against private APIs.

Will it touch my variable values or arguments?

No. Argument values, default values, and list-typed defaults are emitted exactly as written, only with consistent spacing around :, =, and ,. The formatter never invents, drops, or reorders fields, arguments, or variables — what you pasted is what comes out, just laid out cleanly.

Does it handle inline fragments and fragment spreads?

Yes. Inline fragments (... on PaidOrder { ... }) get the standard selection-set treatment with two-space indent. Fragment spreads (...Money) sit on a single line at field indent, with any directives kept on the same line. Multiple fragment definitions in one document are kept as separate top-level definitions with a blank line between them.

What about anonymous queries — <code>{ field }</code> — does it expand them to <code>query { field }</code>?

No. The shortcut form is part of the spec and the formatter preserves it as-is. If you want a named query, name it yourself — the formatter does not silently rewrite operations.

Other GraphQL Tools

A query formatter is one slice of working with GraphQL. The other GraphQL tools on the site: