GraphQL Formatter

About this tool

The GraphQL Formatter re-indents and minifies GraphQL queries, mutations, subscriptions, fragments and SDL schemas with a small hand-written formatter that runs in your browser; no GraphQL.js library is loaded. Format puts a line break after every opening brace and before every closing brace and indents each nesting level by two spaces. It does not put one field per line: fields inside the same braces stay together on one line, separated by spaces, and argument lists are copied as typed inside their parentheses. Block strings ("""...""") and # comments are kept. Minify removes # comments, collapses whitespace to single spaces and drops the spaces around { } ( ) and :, giving a one-line document for logs or URL parameters. Neither mode parses the document, checks syntax or validates against a schema, so treat Format as a quick re-indent rather than a Prettier replacement.

Why use it

• No GraphQL.js dependency — the formatter is a few dozen lines of plain JavaScript, so nothing extra downloads

• Handles queries, mutations, subscriptions, fragments, and SDL in the same tool

• Minify mode is useful for pasting queries into URL parameters or logging

• Instant client-side processing with no server round-trip

How to use

1. Paste a GraphQL query, mutation, subscription, or SDL schema into the input area
2. Click Format to add a line break after each { and before each }, with nested levels indented by 2 spaces
3. Click Minify to collapse the document to a single line with minimal whitespace
4. Click Copy in the output area to copy the result to your clipboard
5. Click Clear to reset the tool

When it helps

• When cleaning up a minified or auto-generated GraphQL query for readability
• When preparing a query for documentation or a code review
• When minifying a long query to embed in a URL parameter or query whitelist hash
• When formatting SDL schemas exported from an introspection query
• When preparing a query for documentation, a code review, or a Slack message

Examples

query{user(id:"1"){name email posts{title body}}}

query  {
  user (id:"1") {
    name email posts  {
      title body
    }
  }
}

query GetUser($id: ID!) {
  user(id: $id) {
    name
  }
}

query GetUser($id:ID!){user(id:$id){name}}

type User {
  id: ID!
  name: String!
}

type User  {
  id: ID! name: String!
}

mutation {
  createUser(input: {name: "A"}) {
    id
    name
  }
}

mutation{createUser(input:{name:"A"}){id name}}

Tips

• Format keeps all fields of one selection set on a single line — add your own line breaks between fields if you want one field per line
• After formatting, look for repeated field selections — those are often candidates for refactoring into a fragment
• When using minified queries in URLs, remember that special characters (spaces, quotes) still need URL encoding
• SDL with descriptions uses triple-quoted strings — the formatter preserves these verbatim including embedded newlines
• Before minifying, check string arguments for #, colons or brackets — Minify applies its rules inside strings too
• Save formatted snippets in a snippet manager — they make great copy-paste examples in API docs

Frequently Asked Questions

Glossary

GraphQL Operation

A top-level GraphQL action — query (read), mutation (write), or subscription (real-time stream). Each operation may be named and may declare variables.

Query

A read operation that requests specific fields from a GraphQL endpoint. Multiple queries can be batched in a single document.

Mutation

A write operation that creates, updates, or deletes server-side data. Mutations execute serially in the order declared.

Subscription

A long-lived operation that streams events over a WebSocket or similar transport, pushing updates to the client when they occur.

SDL (Schema Definition Language)

The textual representation of a GraphQL schema, defining types, fields, interfaces, unions, enums, and directives.

Fragment

A reusable unit of fields. Fragments avoid repeating the same selection set across queries; spread with ...FragmentName.

Directive

A modifier prefixed with @ (e.g. @include, @skip, @deprecated) that adjusts how a field, argument, or type definition is handled.

Block String

A multi-line string delimited by triple double quotes ("""...""") used in SDL for human-readable type and field descriptions.