GraphQL Formatter
Use our GraphQL formatter to clean up indentation and spacing. Paste code, get a formatted result right away, and copy it to your editor.
GraphQL Formatter
SIMILAR TOOLS
What this does
So you have got a GraphQL query or schema where the fields and braces have collapsed into a heap, and reading the selection set is hard work. This formats it. Paste your GraphQL, click Format, and it comes back indented so the nested fields are easy to follow.
How to use it
- Paste your GraphQL query or schema into the box.
- Click Format.
- Copy the formatted result.
How it works
This uses Prettier with its GraphQL parser. Because it knows GraphQL syntax, it can take your fields, arguments, and fragments and lay each level of the selection set under the one above it, with consistent indentation. It all runs locally in the browser, so your query is not uploaded to any server.
Why nesting needs indentation
GraphQL is built around nesting. You ask for fields, and those fields have fields of their own, sometimes several layers deep. When that nesting is laid out with proper indentation, the shape of what you are requesting becomes obvious, and it is easy to see which fields belong to which object. Cram it onto a few lines and that clarity disappears.
A formatted query is also much easier to share and review. As with the other Prettier based tools, it parses the input, so a query with a syntax error gets flagged rather than half formatted, which points you straight at the problem. It formats the text, it does not run the query or check it against a schema.
Questions people ask
Does it work on schemas as well as queries?
Yes. Prettier understands both GraphQL queries and schema definitions, so it will format either.
Does formatting change my query?
No. It only adjusts indentation and spacing. The fields, arguments, and structure are unchanged.
Why did it report an error?
Prettier parses the GraphQL, so a syntax error stops it. Fix the query and it will format cleanly.
Is my query uploaded?
No. It runs entirely in your browser, so nothing you paste is sent away.
References
- GraphQL. GraphQL Specification. https://spec.graphql.org/
- Prettier. An opinionated code formatter. https://prettier.io/
Sugam Baskota is a senior software engineer and Computer Science graduate from UT Arlington, with interests in user scripts, browser extensions, developer tooling, and productivity systems. He spends time building practical utilities and extensions in the kinds of workflows Eon is designed to simplify. At Eon Tools, he reviews useful, password, and developer tools.