Formatting GraphQL Queries for Readable Reviews and Playgrounds

GraphQL queries are code. A one-line query{hero{name friends{name}}} is fine for a network panel screenshot and terrible for a PR. Indentation makes nested selection sets obvious, shows which arguments belong to which fields, and keeps diffs small when you add a single leaf. Formatting will not replace schema validation — but it removes the “where does this brace close?” tax.

Bottom line: Format queries before review and before pasting into a playground. Use the GraphQL Formatter for documents, JSON Formatter for variables/responses, and JSON to TypeScript when you freeze a sample payload into types.

Compact vs formatted

# Compact (hard to review)
query{hero{name friends{name}}}

# Formatted
query {
  hero {
    name
    friends {
      name
    }
  }
}

Workflow

1. Paste the operation into GraphQL Formatter.
2. Confirm field names and nesting look intentional.
3. Pretty-print variables / sample responses with JSON Formatter.
4. If you need client types from a fixture, run JSON to TypeScript.

For broader client patterns (Apollo/urql caching), see the longer GraphQL frontend guide.

What formatting does not catch

Practical takeaway

Treat GraphQL documents like TypeScript: format on save, review as structure, validate against a schema in the real toolchain. Start with GraphQL Formatter whenever a query arrives as a single line from logs or Slack.

Sources

• GraphQL language spec
• GraphQL.org — Queries