GraphQL Formatter
Paste a messy GraphQL query, mutation or schema and get clean, consistently indented code, or a minified one-liner. It runs entirely in your browser, so private APIs and schemas never leave your device.
Tip: press Ctrl + Enter in the input to format. Everything runs in your browser; your schema never leaves this page.
How to use the GraphQL Formatter
- Paste your GraphQL query, mutation, fragment or schema into the input box, or open a .graphql file.
- Choose the indentation (2 spaces, 4 spaces or tabs) and whether to keep # comments.
- Press Format GraphQL (or Ctrl + Enter). With Format as I type on, the output updates while you edit.
- Fix errors: if the syntax is invalid you see the line and column with a caret; press Show in input to jump there.
- Copy or download the result, or press Minify to get a compact single-line version for requests.
Before and after formatting
GraphQL ignores whitespace and commas, so queries copied from logs, network tabs or code generators are often a single dense line. The formatter rebuilds them with one field per line and one level of indentation per selection set:
| Input | Formatted |
|---|---|
query($id:ID!){user(id:$id){name,posts(first:5){title}}} | query($id: ID!) { user(id: $id) { name posts(first: 5) { title … |
GraphQL syntax cheat sheet
| Construct | Example | Notes |
|---|---|---|
| Alias | small: avatar(size: 32) | Rename a field in the response; lets you request the same field twice. |
| Variables | query Q($first: Int = 10) | Typed, optional default value; ! marks a required (non-null) type. |
| Fragment | fragment F on User { id } + ...F | Reusable selection set with a type condition. |
| Inline fragment | ... on Admin { permissions } | Select fields only for a concrete type of an interface or union. |
| Directives | @include(if: $x), @skip, @deprecated | Annotate fields, fragments, operations or schema elements. |
| Input object value | orderBy: { field: NAME, direction: ASC } | Kept inline; enums are written without quotes. |
| Block string | """Multi-line description""" | Common indentation is removed, so the formatter can re-indent it safely. |
| Comment | # note | Runs to the end of the line; ignored by the server. |
Common GraphQL syntax errors
- Expected Name, found "}": an empty selection set such as
user { }, or a missing field after a comma or alias colon. - Expected "on": a fragment definition needs a type condition, for example
fragment UserFields on User. - Unterminated string: a regular
"string"cannot span lines; use a"""block string"""instead. - Unexpected character: smart quotes (“ ”) pasted from documents or chat apps are not valid. Replace them with straight quotes.
- Variables are not allowed in constant values: default values and directives in a schema cannot use
$variables.
Working with the JSON responses too? Tidy them with the JSON Formatter, or compare two versions of a schema with the Code Diff Checker.
Frequently asked questions
Does this GraphQL formatter send my query or schema to a server?
No. The tokenizer, parser and printer are plain JavaScript running in your browser tab. Nothing you paste is uploaded or stored, so it is safe for internal schemas and queries containing IDs.
Does it validate my query against a schema?
It checks GraphQL syntax only: brackets, strings, names, arguments, directives and definition structure, following the GraphQL specification grammar. It does not know your server's schema, so it cannot tell you that a field or type does not exist.
Can it format SDL schema files?
Yes. Type, interface, input, enum, union, scalar, schema and directive definitions are supported, as well as extend type and other extensions, descriptions in quotes or triple-quoted block strings, implements A & B, default values and repeatable directives.
What happens to commas in GraphQL?
In GraphQL commas are insignificant, like whitespace. The formatter separates inline arguments and list items with a comma and a space for readability, and removes them when arguments are split over several lines or when you minify.
Are comments preserved?
Yes, # comments are kept on their own line before the item they precede, and a comment that ended a line stays at the end of that line. Untick Keep # comments to remove them. Minify always removes comments, because they are not needed by the server.
Why minify a GraphQL query?
A minified query is smaller in HTTP requests, persisted-query maps and URLs for GET requests. The server parses it exactly the same as the formatted version, because whitespace, commas and comments carry no meaning.
How are long lines handled?
If a field's arguments, an operation's variables or a field definition's arguments would make a line longer than 80 characters, each item is placed on its own line, similar to Prettier and graphql-js print.