GraphQL Formatter

What is GraphQL Formatter?

Paste a compressed or messily-formatted GraphQL query and get it reformatted with consistent indentation instantly, powered by Prettier's GraphQL parser. Useful for cleaning up a query copied from a network tab, an API doc, or a teammate's Slack message before you read or edit it. Formatting runs entirely in your browser via Prettier's standalone build, so the query text is never sent to a server just to be reformatted.

How to Use the GraphQL Formatter

1. 1

   Paste the Query: Enter a compressed GraphQL query, mutation, subscription, or fragment.

2. 2

   Read the Formatted Result Instantly: The indented, readable query appears automatically as you type.

3. 3

   Copy the Result: Use the copy button to copy the formatted query.

How It Works

Prettier's GraphQL parser reads the query, mutation, or fragment into an AST, then re-prints it with each field on its own line, nested selection sets indented one level deeper than their parent, and consistent spacing around arguments and colons, regardless of how compressed or unevenly spaced the original text was.

Example

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

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

Each field and nested selection set moves to its own line, indented one level per level of nesting.

Common Use Cases

• Reformatting a query copied from a browser's Network tab (GraphQL requests are typically sent as a single compressed line) into something readable before debugging it.

• Cleaning up a query pasted from documentation or a teammate's message so nested selection sets are easy to scan.