Developer Tools
Format GraphQL
Transform pasted text with the graphql formatter and copy the cleaned output.
Direct Answer
Use the GraphQL Formatter when a query, mutation, or schema definition is minified, copied from a network tab, or generated by a client library and needs consistent indentation to read the field selection or type structure. It works on both operation documents, meaning queries, mutations, and subscriptions, and on schema definition language files.
Formatting a Query vs a Schema
GraphQL syntax is shared between two very different kinds of files, and a formatter needs to handle both correctly.
- A query document describes the fields a client wants back from the server.
- A schema, written in schema definition language, defines the types and fields a server actually exposes.
- Fragments and their spread references both need consistent indentation to stay readable.
- Directives like include and skip are preserved exactly, since their arguments affect behavior.
What Formatting Does Not Check
Formatting is purely about syntax layout, not whether the query or schema is actually correct together.
- Whether a requested field actually exists on the schema's type.
- Whether required arguments are missing from a query.
- Whether the query would actually execute successfully against a live server.
- Introspection query results come back as JSON, not GraphQL syntax, and need a JSON formatter instead.
How to Use Graphql Formatter
- Paste or type your content into the input box.
- The transformed result appears instantly in the result panel below.
- Click Copy result to copy the output to your clipboard.
- Download .txt saves the transformed text as a file.
- Reset clears everything and lets you start over.
Reference
| Feature | Details |
|---|---|
| Purpose | Transform pasted text into a cleaner or different format. |
| Input | Text, lines, lists, or copied content. |
| Result | Transformed text ready to copy or download. |
| Best for | Cleanup, formatting, list preparation, and copy-paste workflows. |
| Category | Developer Tools |
| Works on | Desktop, tablet, and mobile browsers |
Useful Related Tools
Frequently Asked Questions
What is the difference between a GraphQL query document and a schema?
A query document is what a client sends, such as a query, mutation, or subscription describing which fields it wants back. A schema is what a server defines: the types, fields, and operations that are actually available. A formatter handles the syntax of both, but they serve very different purposes in a GraphQL system.
Does formatting a GraphQL query validate it against my schema?
No, formatting only fixes indentation and spacing in a syntactically parseable query. It does not check whether the fields you are requesting actually exist on the type, whether required arguments are missing, or whether the query would succeed against your actual schema, since that check requires the schema itself, not just the query text.
What is a fragment, and why does formatting handle it differently?
A fragment is a reusable, named set of fields defined once and then spread into a query wherever it is needed, letting you avoid repeating the same field selection across multiple queries. A formatter needs to correctly indent both the fragment definition and every place it gets spread into, keeping the reference readable in context.
What do the include and skip directives do?
They are conditional directives that control whether a field is included in the response based on a boolean variable: include keeps the field only when its condition is true, and skip omits the field when its condition is true. Formatting preserves these directive expressions exactly, since altering the argument would change the query's actual behavior.
Why does my formatted schema separate types with blank lines?
Readable schema definition language convention puts each type, input, enum, or interface definition in its own block separated by a blank line, similar to how classes are typically separated in most programming languages, making it easy to scan a large schema file for a specific type.
Can I format a GraphQL query copied from a browser's network tab?
Yes, queries sent over the wire are often minified into one line as part of the request payload. Pasting that into a formatter reconstructs readable indentation for the field selection tree, which is useful for understanding exactly what a frontend application is requesting.
Does formatting fix an invalid query, like a typo in a field name?
No, formatting operates on syntax structure, meaning braces and indentation, not semantic correctness against a schema. A typo'd field name will format cleanly and still fail when actually executed against the server, since the server is the one that checks whether a field exists.
What is the difference between a query, a mutation, and a subscription in terms of formatting?
All three are operation types that share the same field-selection syntax, so a formatter treats them identically for indentation purposes. The real difference between reading data, writing data, and streaming real-time updates is about server-side execution semantics, not formatting rules.