GraphQL Query Formatter
Beautify and format GraphQL queries, mutations, and variables.
GraphQL Query Formatter
Runs entirely in your browser
This tool executes locally using standard browser APIs (for example window.crypto.getRandomValues or crypto.subtle where applicable). Your input is not transmitted to or stored on a ScriptPulse server. See How Calculations Work.
What This Tool Does
- The GraphQL Query Formatter reformats a GraphQL query, mutation, or fragment with consistent indentation, making a minified or inconsistently-formatted query readable again. GraphQL's syntax is built around nested field selections — braces within braces describing exactly which fields of which types you want returned — and that nesting is precisely what makes a poorly-formatted query hard to review: matching opening and closing braces visually is how most people actually verify a complex selection is structured the way they intended, and that's much harder to do when everything is on one line.
- This matters more for GraphQL specifically than for many other query languages, because a GraphQL query's shape directly determines its result shape — there's no separate schema-side projection step the way there might be in other data-fetching patterns. A query that looks correct but has a field nested one level too deep or too shallow will return a differently-shaped (or outright invalid) result, and formatting is often what makes that kind of structural mistake visible at a glance.
How It Works
- The query text is scanned for opening and closing braces, which mark the boundaries of each nested field selection.
- Each line is re-indented based on its current brace-nesting depth, so a deeply nested selection is visibly indented further than its parent fields.
- Opening braces increase the indentation level for subsequent lines; closing braces decrease it before that line is rendered, producing a visually accurate representation of the query's actual nesting structure.
- The result is the same query, functionally unchanged, but laid out so its nested structure is immediately visible rather than requiring careful brace-counting to follow.
Usage
- Paste the GraphQL query, mutation, or fragment you want to reformat.
- Run the formatter.
- Review the indented output to confirm the nesting structure looks the way you intended.
- Copy the formatted query for use in documentation, a codebase, or further review.
Examples
- Formatting a minified query captured from a browser's network tab to understand exactly what fields a page is actually requesting from a GraphQL API.
- Cleaning up a deeply nested query with several levels of related-object selections before adding it to a test suite.
- Reformatting a query pasted from Slack or an email, where line breaks and indentation were lost, before reviewing it for correctness.
- Comparing the formatted structure of two similar queries side by side to spot exactly where their field selections diverge.
Real-World Use Cases
- Reformatting a minified GraphQL query pulled from a network request log or browser dev tools into a readable form before reviewing or reusing it.
- Cleaning up a query pasted from a colleague's message or a bug report that arrived without consistent indentation.
- Formatting a complex, deeply-nested query before committing it to a codebase, so future readers (including yourself) can follow its structure at a glance.
- Verifying a query's actual nesting depth matches what you intended, by formatting it and visually confirming the indentation lines up with your mental model of the selection.
Best Practices
- Format any query before committing it to a shared codebase — consistent indentation is what makes a future reader (including a reviewer in a pull request) able to follow the nesting without mentally re-parsing braces.
- Use formatting as a correctness check, not just a style preference — a query that looks wrong once properly indented (a field nested at an unexpected level) often reveals an actual structural mistake.
- Keep formatted queries in version control rather than repeatedly reformatting a minified version pulled fresh from logs each time — this preserves a readable history of how a query has evolved.
- Pair this tool with the GraphQL Query Explorer to confirm a formatted query still executes and returns the shape you expect after any manual cleanup.
Common Mistakes
- Assuming a query is correctly nested just because it executes without an error — a structurally valid but unintentionally-shaped query can still return more or less data than intended without GraphQL itself flagging it as wrong.
- Manually re-indenting a complex query by hand rather than using a formatter, introducing an inconsistent indentation error that then gets mistaken for an intentional part of the structure.
- Not reformatting a query pulled from logs or dev tools before trying to read it, making a simple selection look far more complex than it actually is due to lack of whitespace.
- Treating formatting as purely cosmetic and skipping it for 'quick' queries, missing the structural-verification benefit that reformatting provides even for queries not intended to be shared.
Limitations
- This tool reformats indentation based on brace nesting; it does not validate the query against a schema or check that referenced fields and types actually exist.
- It does not execute the query or show you a response — use the GraphQL Query Explorer for that.
- Extremely unusual formatting (such as braces embedded within string literal arguments) may not be handled identically to a full GraphQL-aware parser.
Technical Reference Guide
- GraphQL's query language, including the nested field-selection syntax this tool formats, is defined by the GraphQL Specification, maintained by the GraphQL Foundation independently of any single implementation.
- Unlike JSON (RFC 8259) or many REST-oriented formats, GraphQL has no IETF RFC of its own — its specification is maintained entirely through the GraphQL Foundation's own governance process.
- Mutations, which follow the same nested-selection syntax as queries but perform writes rather than reads, are defined within the same GraphQL Specification as a distinct root operation type.
FAQ
Does formatting change what a query actually does?
No — formatting only changes whitespace and indentation. The query's fields, arguments, and structure remain functionally identical; only its readability changes.
Why does GraphQL formatting matter more than for some other languages?
A GraphQL query's nested shape directly determines its result shape — there's no separate projection step. A field nested at the wrong level changes what's actually returned, and clear indentation is often what makes that kind of mistake visible at a glance.
Can this tool validate my query against a schema?
No — it only reformats indentation based on brace structure. Use the GraphQL Query Explorer to actually run a query against a schema and see whether it's valid and what it returns.
What's the difference between a query and a mutation in GraphQL?
Both share the same nested-selection syntax, but a query reads data while a mutation performs a write with side effects. Formatting treats them identically since the structural syntax is the same; the distinction matters for how carefully you should treat running one, not for how it's formatted.
Should I keep formatted queries in version control?
Yes — a consistently-formatted, readable query is far easier to review and diff in version control than a minified one repeatedly pulled fresh from logs each time it's needed.
Does this tool work on GraphQL fragments, not just full queries?
Yes — fragments use the same brace-nested selection syntax as queries and mutations, so the same indentation logic applies to them directly.
Part of this Developer Hub
This utility is part of our comprehensive API & Web Engineering topic workspace.
Explore foundational guidelines, technical specifications, and other interactive utilities related to this workflow.
Related Tools
Explore related utilities inside the API & Web Engineering Lab workshop for complementary engineering workflows.
View all API & Web Engineering Lab tools