GraphQL Formatter

GraphQL documents arrive flattened far more often than most other languages. A query extracted from a network trace, copied out of an Apollo error message, pulled from a log line or lifted out of a JavaScript template literal is usually a single long line with every selection run together. Since a GraphQL query is a tree and its whole meaning is in the nesting, that single line is close to unreadable — you cannot see which fields belong to which parent without counting braces.

This page runs Prettier 3.9.6 with its GraphQL parser, in your browser. It handles both halves of the language: executable documents (queries, mutations, subscriptions and fragments) and schema definition language (types, interfaces, unions, inputs, enums and directives). No schema is required and none is consulted — the formatter works purely from the syntax of the document you paste.

What the printer does to a document

GraphQL is unusual in that commas are pure whitespace — the specification treats them as ignored tokens, so { id, name } and { id name } are the same document. Prettier takes advantage of this:

• Commas between fields and between arguments are removed when the items are printed on separate lines, because the line break already separates them. This is the change people notice first, and it is entirely safe.
• Each field in a selection set gets its own line, indented one level deeper than its parent. Nesting depth becomes visible immediately.
• Argument lists wrap one argument per line when they do not fit within the print width, with the closing parenthesis aligned to the field.
• Variable definitions on an operation, including their types and default values, are printed one per line when the list is long.
• Directives such as @include(if: $flag), @skip, @deprecated and your own custom directives stay attached to the element they modify.
• Block strings — the triple-quoted descriptions used throughout SDL — keep their content and indentation semantics intact.

Field order within a selection set is never changed. It has no effect on which data comes back, but response objects preserve the requested order and, more practically, reordering would make every diff unreadable.

Schema definition language

The same formatter handles SDL, which is where most day-to-day GraphQL reading actually happens. Object types, interface definitions with implements A & B, unions written as A | B | C, input types, enum values, scalar declarations, the root schema block, directive definitions with their locations, and extend statements are all recognised.

Descriptions are treated as first-class syntax rather than comments. A string literal placed before a type or field is a description that ends up in your introspection result and in every GraphQL IDE, and it is preserved and indented correctly. A # comment is a source comment that does not survive into introspection; it is also preserved, but the two are not interchangeable and the formatter does not convert one into the other.

A schema stitched together from several service files, or one dumped from an introspection query in whatever order the server produced, becomes navigable after a single pass.

What it cannot check

The formatter parses syntax only. It has no schema, so it cannot tell you that a field you selected does not exist, that a variable is declared but never used, that a fragment is defined on the wrong type, that a required argument is missing, or that your query exceeds a depth limit. Those are validation questions, and answering any of them requires the schema the query will run against.

It also cannot format a query embedded inside a JavaScript gql tagged template literal from this page — paste the query text itself, without the surrounding backticks. In your own toolchain Prettier can do that, because there it has the JavaScript parser loaded alongside the GraphQL one.

Syntax errors — an unclosed brace, a missing colon in an argument, a stray character — are reported with their line and column. Everything runs in a Web Worker on your own machine, so an internal schema that reveals your entire domain model never leaves the browser.