GraphQL Query Formatter

It takes any messy, minified, or poorly indented GraphQL query, mutation, subscription, or fragment and formats it into clean, readable output with consistent 2-space indentation and proper line breaks. It works entirely in your browser — nothing is sent to any server.

Yes. The formatter handles all four GraphQL operation types: query (or shorthand), mutation, subscription, and fragment. It also handles inline fragments (...on TypeName), field aliases (alias: fieldName), and arguments with variables ($var: Type).

Properly indented GraphQL makes the selection set hierarchy immediately visible — you can see at a glance which fields are nested under which type. It also makes diffing queries in version control much easier, and simplifies debugging when checking what data is being requested.

This tool formats (prettifies) GraphQL. For minification (removing whitespace to reduce payload size), the standard approach is a single-line join with spaces: query.replace(/\s+/g, ' ').trim(). GraphQL clients like Apollo automatically handle query minification in production builds.

The formatter does basic structural validation — it checks for balanced braces, valid operation keywords, and proper nesting. However, it does not validate field names, types, or directives against a schema. Use GraphQL Playground or your client's type-checking (e.g. gql`` tagged templates in TypeScript) for full schema validation.