GraphQL Formatter

Understanding the Basics

GraphQL is a query language for APIs developed by Facebook (now Meta) in 2012, open-sourced in 2015, and now managed by the GraphQL Foundation. Unlike REST APIs where each endpoint returns a fixed data structure, GraphQL allows clients to specify exactly the data they need in a hierarchical query. This flexibility means GraphQL queries can become complex: multiple nested fields, arguments with variables, fragments for reusability, directives (@include, @skip, @defer), inline fragments for union types, and multiple operation types (query, mutation, subscription) in the same document. GraphQL's schema definition language (SDL) defines the type system: types, interfaces, unions, enums, scalars, and directive definitions. Both queries and schemas benefit from consistent formatting: indented field selections, aligned arguments, and properly placed directives. The GraphQL Foundation's reference implementation (graphql-js) includes a built-in formatter (print() function) that applies canonical formatting — one field per line, arguments on the same line if short or indented on separate lines if long. Our formatter uses graphql-js's official printer to guarantee spec-compliant, canonical output for both operations (queries/mutations/subscriptions) and schema SDL.

How to Use the Tool

1. Paste your GraphQL query, mutation, subscription, or schema SDL into the input editor.
2. The formatter automatically detects whether it is an operation document or a schema definition.
3. The graphql-js printer applies canonical formatting: indented field selections, proper argument formatting, and directive placement.
4. Output is syntax-highlighted GraphQL for easy review.
5. Copy the formatted GraphQL for use in your API client code, documentation, or code review.

Key Features & Specifications

• Formats GraphQL operations (query, mutation, subscription) and schema SDL using the official graphql-js printer
• Canonical output matching the GraphQL specification's recommended formatting
• Handles fragments, variables, directives, inline fragments, and union type spreads
• Formats schema types, interfaces, unions, enums, input types, and custom scalars
• Syntax highlighting for formatted output with keyword and type coloring

Frequently Asked Questions (FAQ)

Q:What is the difference between a GraphQL query and a schema SDL?

A GraphQL query (operation document) is what a client sends to request data — it specifies which fields to fetch within the available type graph. A Schema Definition Language (SDL) document defines the type system itself — what types exist, which fields they have, their argument types, and their relationships. The formatter handles both.

Q:Can I format GraphQL that uses fragments from a separate file?

Yes, as long as you paste all relevant fragments along with the operation into the same input. The graphql-js parser validates that all fragments referenced in spread syntax (...FragmentName) are defined within the document. Alternatively, format operation and fragment files separately.

Q:Does formatting a GraphQL schema change the API behavior?

No. SDL formatting only adds whitespace and normalizes the order of type system extensions — it does not change type definitions, field names, argument lists, or directives in a semantically meaningful way. The GraphQL server parses the SDL identically before and after formatting.