· 4 min read
How to Format a GraphQL Query or Schema Cleanly
Heshan Fernando
Co-founder & COO
A GraphQL query copied from a network request log, a minified schema pulled from an API response, or a mutation someone pasted into a chat message tends to arrive as one dense, unindented block. GraphQL’s nested field selections are exactly the part that needs visual structure to actually understand — which fields belong to which type, how deep a nested selection goes — and none of that is legible when it’s all crammed onto a single line.
Getting a query’s structure wrong when reading it isn’t just an inconvenience — misreading which fields are nested under which parent can lead to editing the wrong part of a query entirely, especially in a schema with several levels of nested object types.
What formatting GraphQL actually involves
GraphQL queries, mutations, and schemas are built from nested selection sets — a query’s top-level field can contain further fields, which can themselves contain more nested fields, and so on. None of this nesting requires any specific whitespace to be valid; a query can be minified onto one line and still work identically to a properly indented version. Formatting means parsing that selection-set structure and rebuilding indentation that actually reflects it — each nested level indented further than its parent, closing braces aligned with their opening statement — so the visual layout matches the query’s real logical structure rather than being an arbitrary line-wrapping choice.
This matters more for GraphQL specifically than for some other formats, because a query’s entire value is in expressing exactly which nested fields you want back — losing track of that nesting while reading an unformatted query is losing track of the query’s actual meaning.
Why people get stuck here
- GraphQL doesn’t require any particular whitespace to be valid. A minified query with everything on one line runs identically to a properly formatted one, so there’s no functional pressure to keep it readable.
- Nested selection sets are hard to track visually without proper indentation. Understanding which fields belong to which parent type is the whole point of reading a query, and that’s exactly what’s lost without consistent indentation.
- Queries copied from network logs or API tooling often come pre-minified. Debugging tools and network inspectors frequently show request bodies compacted, which needs reformatting before it’s actually readable.
- Manually reformatting nested GraphQL by hand is tedious and easy to get wrong. Tracking matching braces and correct indentation depth by eye across several nested levels invites mistakes, especially under time pressure while debugging.
What a good GraphQL formatter looks like
Understands nested selection-set structure
Correctly identifying how deeply each field is nested is what allows indentation that actually reflects the query’s real logical shape.
Handles queries, mutations, and schemas alike
Supporting all three GraphQL document types in one tool covers the actual range of GraphQL content people need to read and debug.
Produces output that’s immediately readable
Clean, consistent indentation turns a dense, hard-to-parse block into something you can actually scan and understand at a glance.
Common mistakes to avoid
- Trying to read or debug a minified GraphQL query directly from a network log without reformatting it first.
- Manually reformatting a deeply nested query by hand, risking a misplaced brace or incorrect indentation level.
- Assuming a query that works correctly doesn’t need reformatting, when readability matters just as much during debugging or review.
- Losing track of which fields are nested under which parent type when reading an unformatted query.
How to do it with GraphQL Formatter
Online Tool Store’s GraphQL Formatter takes a minified or unevenly indented GraphQL query, mutation, or schema and returns cleanly formatted output, entirely in your browser.
- Paste your minified or inconsistently indented GraphQL document.
- Let it parse the nested selection-set structure.
- Review the cleanly formatted, properly indented result.
- Copy the formatted output for debugging, review, or documentation.
Because it parses the actual nesting structure rather than just wrapping lines, the reformatted GraphQL clearly shows which fields belong to which parent, exactly matching the query’s real logical shape.
Frequently asked questions
Does formatting change what my GraphQL query actually requests?
No — formatting only changes whitespace and indentation; the fields, arguments, and structure your query requests stay exactly the same.
Why do GraphQL queries from network logs often look unformatted?
Debugging tools and network inspectors frequently display request bodies in their raw, compacted form, since minified output is more efficient to transmit — it just isn’t built for readability.
Can this format a full schema, not just a single query?
Yes — it handles queries, mutations, and schema documents alike, applying the same consistent indentation logic to whichever type of GraphQL content you paste in.
Final thought
A GraphQL query’s real value is in its nested structure, and that structure is exactly what’s lost in a minified, unformatted block. Reformat it properly, and the query’s actual shape becomes obvious again.