99tools

GraphQL Formatter

runs in your browser

Format or minify a GraphQL query, mutation or schema, with syntax errors reported by line and column. Uses the official parser, so nothing is mangled.

Mode
Indent

Queries, mutations, subscriptions and schemas all work. Comments are dropped, because they are not part of the document the server receives.

GraphQL

Formatted

about this tool

Format, or squeeze flat

Paste a query, a mutation, a subscription or a whole schema. Format lays it out at two or four spaces; minify strips it down to what a server actually needs.

Both go through the official GraphQL parser rather than a clever regular expression. That is the whole design decision here, and it buys three things: a document is either understood completely or reported as broken, block strings and directives survive being reprinted, and a syntax error arrives with the line and column instead of the word "unexpected".

Errors that point at something

A formatter that says only "invalid" sends you hunting. This gives the parser's own message along with where it gave up, so you can go straight there.

It checks syntax, not meaning. Whether a field exists, or a variable has the right type, depends on the schema the query will run against — and this page has no idea what that is. Anything claiming otherwise from your query text alone is guessing.

Minifying

The small version is made by printing the parsed document and then removing the whitespace between tokens, not by running a pattern over your text. A brace inside a string can never be mistaken for structure that way.

The single space between two field names is kept, because there it is the only thing separating them.

Comments are dropped

They are not part of the document a server receives, and the official printer does not keep them. A formatter that preserved some comments and lost others would be worse than one that is plain about losing them all.

The line underneath

Under the panes you get what the document holds: the operations by name, how many fragments, how many types, and the nesting depth. The depth is the useful one — it is what query-cost limits on a server count, so it tells you at a glance whether something is likely to be refused.

Loaded only when you need it

The parser is a substantial library, so it is fetched when you open this page rather than shipped to everyone who visits the site. After that it runs entirely in your browser and nothing is uploaded.

For the JSON that comes back from a GraphQL endpoint, use the JSON formatter. To turn a cURL command into the code that sends the query, use the cURL converter.

questions

Does it validate as well as format?
It checks the syntax, which is what a formatter can honestly do without your schema. A document that will not parse gives you the reason with a line and column. It cannot tell you a field does not exist, because that needs the schema it is being run against.
Why do my comments disappear?
Comments are not part of the document a server receives — the official printer drops them, and so does this. If you need them kept, format by hand; a formatter that half-preserves comments is worse than one that is clear about losing them.
Will it handle my schema, or only queries?
Both. Queries, mutations, subscriptions, fragments and full SDL schemas with descriptions all go through the same parser. Block-string descriptions survive intact, which is the corner a hand-written formatter usually loses.
Is the minified version still the same query?
Yes. It is produced by printing the parsed document and then removing the whitespace a server does not need, rather than by running a regular expression over your text — so a brace inside a string can never be mistaken for structure. A test re-formats the minified output and checks it matches.
What is the depth number for?
It is how deeply the selections nest, which is what query-cost and depth limits on a server count. Handy for seeing at a glance whether a query is likely to be rejected.
Does my query get sent anywhere?
No. The parser runs in your browser. It is a sizeable library, so it is fetched only when you open this page, but once it is there everything happens locally and nothing is uploaded.