GraphQL Formatter & Validator

Overview

Formats GraphQL queries, mutations, and SDL schemas with Prettier's official GraphQL plugin, running entirely in your browser. Paste a minified one-line query from a network tab and get properly indented, consistently wrapped output - and because Prettier must fully parse input before printing, any syntax error surfaces with its exact line and column, making the tool a validator too.

How It Works

Paste your GraphQL document on the left. The formatted result appears on the right as you type, once the formatter plugin has loaded (a moment, on first use). Parse errors are reported verbatim with their position instead of leaving you a blank output, and clicking the output copies it.

Step-by-Step Usage Guide

1. Paste a minified or inconsistently indented GraphQL document.
2. Wait a moment for the formatter to load and format on first use.
3. Read the error position if parsing failed - it points at the exact offending token.
4. Copy the formatted document back into your code or .graphql file.

Technical Specifications & Standards

This is Prettier 3's standalone build with the graphql plugin, loaded through a dynamic import so the formatter only downloads when you actually use this tool. Standalone mode is the same parse-print cycle Prettier's CLI runs: the document is parsed into an AST, all original whitespace and line breaks are discarded, and the document is re-printed from the AST with Prettier's defaults - two-space indentation, arguments wrapped when the line exceeds the print width, and consistent comma placement. That parse-then-print design is what makes formatting idempotent (formatting formatted output changes nothing) and what makes error reporting trustworthy: the error you see is the parser's genuine syntax error at the position it detected, not a heuristic. The plugin handles the full GraphQL grammar - queries, mutations, subscriptions, fragments, variables, directives, and SDL type definitions - so the same tool formats an app's operation documents and a schema definition file.

Targeted Use Cases

• Reading a query copied from a network tab, where Apollo or a proxy minified it to one line.
• Normalising schema SDL from multiple authors into one consistent style before a review.
• Validating that a generated query string in application code is syntactically valid.
• Preparing .graphql documents for a commit where the project runs Prettier in CI.

Notes & Gotchas

• Treat this as a quick formatter and validator; commit a .prettierrc in the repo so the style is enforced, not just preferred.
• Minified input is fine - Prettier rebuilds structure from the AST, not the original spacing.
• If formatting fails, read the position: GraphQL errors usually are a missing brace, an unnamed operation where one is required, or a stray comma.
• Format before schema-checking: a syntax error masks every type error underneath it.

Frequently Asked Questions