GraphQL Formatter

Worked Examples

Before formatting

query GetUser($id:ID!,$withPosts:Boolean!){user(id:$id){id name email posts @include(if:$withPosts){...PostSummary}}} fragment PostSummary on Post{id title publishedAt}

After formatting

query GetUser($id: ID!, $withPosts: Boolean!) {
  user(id: $id) {
    id
    name
    email
    posts @include(if: $withPosts) {
      ...PostSummary
    }
  }
}

fragment PostSummary on Post {
  id
  title
  publishedAt
}

SDL schema

type Post {
  id: ID!
  title: String!
  publishedAt: DateTime
  author: User!
}

type Query {
  post(id: ID!): Post
  posts(authorId: ID, limit: Int = 20): [Post!]!
}

Why Format GraphQL?

Consistent GraphQL formatting matters for code review, schema diffs, and storing operations in .graphql files. Minified queries shrink wire payloads when you cannot rely on persisted queries; pretty-printed queries are easier to scan in PRs. Validating a query in isolation catches syntax mistakes such as a missing brace or an unclosed string before you send it; an undefined fragment name is not a syntax error and needs schema-aware validation.

Behind the Scenes

This tool runs graphql-js (the reference implementation maintained by The GraphQL Foundation) entirely inside your browser. parse() builds an AST from your text and reports the first syntax error with line and column. print() serializes the AST back to canonical GraphQL. stripIgnoredCharacters() removes every token the spec marks as ignored — that is the minified form. Nothing is sent anywhere, and there is no server round-trip.

Minify and Error Examples

Minify on the “before” query above returns (graphql-js 16.14 stripIgnoredCharacters):

query GetUser($id:ID!$withPosts:Boolean!){user(id:$id){id name email posts@include(if:$withPosts){...PostSummary}}}fragment PostSummary on Post{id title publishedAt}

Commas are ignored tokens in GraphQL, so they are removed along with the whitespace. A missing closing brace in query { user(id: 1) { id name } is reported as Parse error: Syntax Error: Expected Name, found <EOF>. (line 1, column 32), pointing at the end of the input where the parser ran out of text.

Aliases, Variables, and Comments

This query asks for two users with different aliases. Choose 4 spaces and click Format to separate the nested selections. The output keeps primary, secondary, the quoted IDs, the variable default, and the @include directive. The leading comment disappears. Keep a copy of the original query when that comment contains useful context. Minify keeps the same operation and selections while removing the comment and spacing between tokens where the parser permits it.

Input

# Fetch two labels
query Labels($show: Boolean! = true) { primary: user(id: "a") { name } secondary: user(id: "b") @include(if: $show) { name } }

Four-space output

query Labels($show: Boolean! = true) {
    primary: user(id: "a") {
        name
    }
    secondary: user(id: "b") @include(if: $show) {
        name
    }
}

Minified output

query Labels($show:Boolean!=true){primary:user(id:"a"){name}secondary:user(id:"b")@include(if:$show){name}}

Keep Indented Description Text

A description can contain its own indentation. In this SDL example, the note starts two spaces further in than the preceding sentence. Formatting with 4 spaces moves the field and the description delimiters to the wider structural indentation. The note still starts two spaces further in than the sentence. Parsing the formatted result gives the same description text as the input, including that newline and the two spaces before the note.

Input

type Query {
  """
  Returns a label.
    Keep this note indented.
  """
  label: String
}

Four-space output

type Query {
    """
    Returns a label.
      Keep this note indented.
    """
    label: String
}

Limits

• Format drops comments. graphql-js print() rebuilds the text from the syntax tree, and # comments are not part of the tree. Minify removes them too. Keep the original file if its comments matter.
• Validation is syntax only. { user(id: $id) { id } } passes even though $id is never declared; checking variables and fields needs the schema.
• Only the first syntax error is reported.
• The 4-space option widens only the indentation that comes from nesting. Inside a """ block string, the opening line moves to the new indentation and the text keeps its own indentation relative to it, because the GraphQL spec removes only the common indentation of a block string; widening the inner lines would change the description text. graphql-js prints with 2 spaces, so 2 spaces is the output other tools produce.
• Input is limited to 10,485,760 characters.