GraphQL formatter — pretty-print queries, mutations and schemas

How to use the GraphQL formatter

1. Paste your operation or schema into the Input box. The sample is a one-line GetUser query.
2. Pick the Indent: 2 spaces, 4 spaces or Tab.
3. The Formatted GraphQL updates as you type.
4. Copy it into your code, docs or API client.

What it does and when to use it

Queries often travel as a single line: in network logs, in a JSON request body, in a test fixture or in code written by a generator. Nested selections five levels deep are very hard to read that way. The formatter puts each field on its own line and indents it under its parent, so you can see at a glance which fields come from which object. It also gives a team one layout for .graphql files, which keeps diffs small.

For other languages in the same project, the code beautifier covers JavaScript and TypeScript, the SQL formatter handles database queries, and the CSS formatter tidies stylesheets.

How it works

The page loads Prettier’s standalone build with its GraphQL plugin, parses your text into a syntax tree and prints it again with an 80-character line width. Prettier’s rules for GraphQL include:

• each field, argument definition and enum value on its own line,
• a space after every : and around = in default values,
• short argument lists and input objects kept on one line, { title: "Buy milk", done: false },
• comments kept where they were.

If the text does not parse, you get the parser’s message with a line and column, and a caret under the problem.

Worked examples

These are the tool’s own outputs.

The sample query. query GetUser($id: ID!){user(id:$id){id name posts(first:5){edges{node{id title}}}}} becomes a 14-line block that starts:

query GetUser($id: ID!) {
  user(id: $id) {
    id
    name
    posts(first: 5) {
      edges {

A schema type with 4-space indent. type User{id:ID! name:String # display and posts(first:Int=10):[Post!]!} on the next line give:

type User {
    id: ID!
    name: String # display
    posts(first: Int = 10): [Post!]!
}

A missing brace. query{user{id} stops with “Syntax Error: Expected Name, found <EOF>. (1:15)”, meaning the text ended while a selection was still open.

Limits and tips

• Layout is Prettier’s. Only the indent can be changed; line breaks follow its 80-column rule.
• No blank lines are added between definitions. Leave one in your input if you want fragments and operations separated.
• Syntax only. Pair it with your schema-aware tooling before shipping a query.