GraphQL Formatter

How it works

A GraphQL query copied from the browser's network tab, an error log or JavaScript code is usually one long line, and you cannot see which field sits inside which. Paste the query into the left box. On the right, each field goes onto its own line, nested selections are indented by 2 spaces, and arguments (first: $count, status: DELIVERED) get one space after each colon and comma. For example, {user(id:1){name}} becomes a readable five-line query. Fragments, variable definitions ($customer: ID!), directives (@include) and schema definitions (type, input, enum) are printed in the same standard style. Choose One line to go the other way: extra spaces are removed but text inside quotes is left alone, so the query can go into a URL or into code. If there is a syntax error, its line and column are shown. Comments written with # are not kept by the standard printer; the result line tells you how many were dropped.

This tool is also known as graphql formatter, graphql beautifier, graphql pretty print, format graphql query, graphql query formatter online, graphql schema formatter.

What is GraphQL?

GraphQL is a query language in which the client describes exactly which data it wants from an API. In REST each address returns a fixed response; in GraphQL a query sent to one address lists the wanted fields in nested curly brackets, and the response comes back in exactly that shape. It was created at Facebook, and GitHub, Shopify and many app APIs use it. Queries, mutations (changes) and fragments (reusable field groups) are its main building blocks.

What is Fragment?

A fragment in GraphQL is a named group of fields that repeats across queries: fragment Address on Order { street city } is defined once and added wherever needed with ...Address. You do not have to rewrite the same field list in every query, and when a field is added only one place changes. The formatter prints the fragment definition as its own block and the place where it is used as a ...Address line.

What is the difference between a GraphQL query and a GraphQL schema?

A query (query, mutation) says what the client wants from the API: which fields, with which arguments. A schema (SDL) defines what the server offers: types such as type Order { id: ID! total: Float }, their fields and the fields' types. Queries are validated against the schema; asking for a field that is not in it makes the server return an error. This tool formats both, but it does not validate a query against a schema; it only checks the syntax.

Does formatting change the query result?

No. In GraphQL, spaces, line breaks and commas carry no meaning; the server gives the same answer to the formatted and the one-line query. The tool reads the query with the graphql-js parser and prints the same tree in the standard style; field order, aliases, argument values and strings are kept.

The one difference is comments: lines starting with # are not part of the syntax tree, so the standard printer leaves them out. If your comments matter, keep the original text; the result line says how many comment lines were dropped. Description strings ("""...""") are part of the schema and are kept.

What does this tool check, and what can it not check?

The tool checks syntax: an unclosed curly bracket, a missing colon, a misplaced comma or quote is shown with its line and column. That is enough to know whether a query is broken before it reaches the server.

It does not validate against a schema: it cannot know whether the field you ask for exists or whether an argument has the right type, because it does not have the API's schema. For that, use the API's own GraphiQL or Apollo Studio screen.

• Reading a one-line query from the logs → Readable
• Putting the query in a URL parameter or in code → One line
• Does the field exist, is the type right → the API's own GraphiQL

Frequently asked questions

How do I make a one-line GraphQL query readable?

Paste the query into the left box on this page. Each field goes onto its own line and nested selections are indented by 2 spaces. Copy the result or download it as a .graphql file.

Can it format schema definitions (type, input, enum)?

Yes. Besides the query language, the tool reads the schema definition language (SDL): type, interface, input, enum, union and scalar definitions are printed in the same standard style, and description strings are kept.

Why did my comments disappear?

The official GraphQL printer does not carry # comments, because they are not part of the query's syntax tree. The result line tells you how many comment lines were dropped; keep the original text if you need them.

Is my query sent to a server?

No. Formatting runs entirely in your browser; the query, with any IDs or values in it, never leaves this page and is not sent to any API.