GraphQL Query Formatter

Beautify, indent, and format GraphQL queries.

Clean up GraphQL queries that arrive on a single line

GraphQL queries copied from a network log, a client library's debug output or a chat message are often squashed into one line with irregular spacing. The GraphQL Query Formatter re-indents them so that every selection set sits on its own level. It is a quick way to read a query, review one in a code change, or tidy it before saving it in documentation.

How to format a query

Paste your query or mutation into the Input Data area, or use Sample to load a getUser query with nested posts.
Press Process / Generate.
The indented query appears in the results panel, with the operation keyword, field names that open a selection set, and argument names colored differently. A status line confirms the formatting.
Take the text with Copy, save it with Download, or empty the box with Clear and start again.

What the formatting does

The tool collapses all runs of whitespace, puts spaces around every opening and closing brace, and then rebuilds the query. Each opening brace ends a line and increases the indent by two spaces, and each closing brace returns to the previous level on its own line. Field names within a block are placed on the same line unless a brace forces a break, so a short list of scalar fields stays compact rather than being split one per line.

Everyday uses

Reading a persisted or minified query taken from a production log while debugging.
Making a long query legible before pasting it into a code review comment.
Normalizing indentation before storing queries in a .graphql file or a wiki page.
Explaining the depth of a nested selection to a colleague who is new to GraphQL.

Limits and edge cases

This is a lightweight text formatter, not a GraphQL parser, so it does not validate syntax against a schema and it will not tell you that a field is misspelled or a bracket is missing. Because whitespace is collapsed everywhere, multiple spaces inside string arguments are reduced to one, and braces inside strings or comments are treated like structural braces. Arguments in parentheses are kept on the same line as the field rather than being broken apart, and variables, directives and fragments pass through as ordinary words. Commas are left where they were. For a query with unusual constructs, check the output before committing it. Copy and Download use the plain text of the result, without the color styling.

Related Tools

Frequently Asked Questions

Does the formatter check whether my query is valid GraphQL?

No. It only rearranges whitespace around braces. A misspelled field or an unclosed bracket will not be reported, so validate the query against your schema in your GraphQL client or editor plugin if correctness matters.

How many spaces does it indent by?

Each nesting level is indented by two spaces. An opening brace ends its line, the contents move in one level, and the matching closing brace returns to the parent level on its own line.

Will it format mutations and fragments as well as queries?

Yes, in the sense that it reflows any text using braces. The words query, mutation, subscription and fragment are highlighted, and the selection sets beneath them are indented the same way. It does not interpret the meaning of any of them.

Why did my string argument lose extra spaces?

The tool collapses every run of whitespace into a single space before formatting, including inside string values. If exact spacing within a string matters, restore it by hand after formatting or format only the structure around it.

Can I download the formatted query?

Yes. The Download button saves the visible formatted text as result.txt, and Copy places the same text on your clipboard. You can rename the file to .graphql if you want an editor to recognize it.