Advertisement

GraphQL Formatter

Paste a minified or messy GraphQL query, mutation or fragment and get back clean, consistently indented code. The formatter handles arguments, directives, fragments and nested selection sets, and everything runs locally in your browser.

GraphQL

Paste minified or unformatted GraphQL below.

Advertisement

How the formatter works

The formatter tokenizes your GraphQL into braces, parentheses, arguments and strings, then rebuilds it with two-space indentation. Opening braces start a new indent level, arguments stay on one line like user(id: 1), and quoted strings are never touched, so the query keeps working exactly as before.

When formatting helps

Formatted queries are easier to debug in GraphiQL or Apollo Studio, simpler to review in pull requests, and cleaner to paste into documentation. Consistent indentation also makes diffs readable when an API query changes between app versions.

GraphQL Formatter FAQs

Does this GraphQL formatter validate my query?
No, it only reformats whitespace and indentation. It does not check your query against a schema, so a query with a wrong field name will still format fine. Use GraphiQL or your API playground for validation.
Are fragments and directives supported?
Yes. Named fragments like ...UserFields, inline fragments, and directives such as @include(if: $withPosts) are tokenized and indented like any other selection set.
Will my string arguments stay intact?
Yes. Quoted strings are treated as single tokens, so spaces inside values like "New York" are never collapsed or split across lines.
Can I minify GraphQL here instead?
This tool only pretty prints. To minify, strip the line breaks from the output, or keep the formatted version for readability and let your client remove whitespace at build time.
Is my query sent to a server?
No. Formatting runs entirely in your browser with JavaScript, so API queries containing tokens or internal field names never leave your device.
Advertisement