How It Works

GraphQL is a structured language: selection sets are wrapped in curly braces, arguments are enclosed in parentheses, and lists and input objects use brackets and braces. The formatter uses that structure to decide where to place line breaks and how much to indent each nested level. It preserves your identifiers and values while normalizing spacing around punctuation.

In prettify mode, the tool inserts line breaks after opening braces and before closing braces, then indents nested selections by the chosen number of spaces. It also collapses repeated whitespace into single spaces where appropriate, producing a consistent, review-friendly layout. In minify mode, it removes most whitespace outside quoted strings so you can embed the query more easily in JSON payloads or configuration files.

Step-by-step

• 1) Paste your GraphQL: Add a query, mutation, fragment, subscription, or mixed document in the input box. Variables, directives, inline fragments, and fragment spreads are supported.
• 2) Choose indentation: Pick 2 spaces (common in JS/TS projects) or 4 spaces (common in backend codebases). The tool applies it consistently at each nesting level.
• 3) Decide on output style: Use prettify to improve readability or enable minify mode to reduce size and remove line breaks.
• 4) Generate output: Submit the form to compute formatted text. The tool keeps your content intact and only changes layout.
• 5) Copy or download: Copy the result to your clipboard for immediate use in GraphiQL or Apollo Studio, or download as a file to commit or attach to a ticket.

The goal is practical consistency. When your team shares one formatting style, your diffs become smaller, your reviews become faster, and your operations become easier to understand at a glance.

Key Features

Readable indentation for deep nesting

GraphQL shines when you request exactly the data you need, but complex UI screens often lead to deep nesting. Clear indentation helps you see parent-child relationships immediately, spot missing fields, and understand which selections belong to which type.

Minify mode for compact payloads

Sometimes readability is not the priority. If you store queries in environment variables, ship them in small JSON payloads, or paste them into tools that prefer single-line inputs, minification helps. The formatter removes non-essential spaces and line breaks while preserving quoted strings and values.

Consistent spacing around punctuation

Small inconsistencies—extra spaces around colons, uneven whitespace in argument lists, or accidental blank lines—create noisy diffs and make queries harder to scan. The formatter normalizes spacing so your documents look intentional and tidy.

Quick copy, reset, and download actions

Developer utilities should be fast. Copy lets you paste output directly into clients and explorers. Reset takes you back to a known clean state, which is handy when you are iterating on examples. Download produces a .graphql file you can commit, share, or attach to documentation.

Safe formatting that preserves meaning

The formatter is designed to avoid semantic changes. It does not rename fields, reorder selections, remove directives, or alter string literals. It focuses on whitespace and indentation so you can confidently run it as part of a formatting workflow.

Use Cases

• API debugging and support: When a server log prints a compressed query, formatting makes it readable again. You can quickly determine what data the client requested and whether the selection set matches your expectations.
• Frontend development: Teams using Apollo Client, Relay, urql, or custom GraphQL fetchers benefit from clean queries that are easy to maintain, split into fragments, and refactor over time.
• Backend schema evolution: When you deprecate fields or migrate types, formatted queries help you search and update selection sets safely, especially in large documents with many fragments.
• Documentation and examples: A well-formatted query is easier for readers to copy, understand, and adapt. This is useful for READMEs, tutorials, API reference pages, and internal wikis.
• Review-friendly pull requests: Formatting reduces whitespace churn. When everyone formats the same way, pull requests show meaningful changes—added fields, removed fields, or updated arguments—instead of random spacing differences.
• Testing and fixtures: Snapshot tests and fixture files become more stable when formatting is deterministic. A consistent layout also makes it easier to see what a test is actually requesting.
• CI formatting checks: Some teams enforce formatting rules to keep their repos clean. A formatter tool can be used during development and mirrored in CI to prevent inconsistent query files.
• Embedding queries safely: When you need to embed a query in JSON, minifying reduces the risk of accidental newline handling issues and keeps payloads compact.

From quick one-off debugging to long-term maintenance of a GraphQL codebase, consistent formatting pays off. It improves communication across teams and reduces the mental overhead of parsing complex operations.

Optimization Tips

Design smaller operations and compose with fragments

Formatting makes documents readable, but clarity also comes from structure. Prefer smaller operations that match a single UI screen or workflow step. Extract repeated field sets into fragments so the intent is reusable and changes are centralized. When you run the formatter, fragments become easier to audit and review.

Be intentional with variables and defaults

Variables keep operations flexible and cache-friendly. Use clear variable names and default values where it makes sense. A formatted operation will highlight your variable definitions, helping you confirm you are passing the correct types and not duplicating similar variables across fragments.

Use minify at build or transport boundaries

Human-readable queries are a long-term asset in your repository. If you need compact payloads at runtime, consider minifying during a build step or right before sending the request. This keeps your source readable while still optimizing what goes over the network.

Keep directives visible and aligned

Directives like @include, @skip, and custom directives can change behavior significantly. A formatter helps keep directives aligned and visible so reviewers don’t miss a conditional selection or an important annotation.

FAQ