Why Format GraphQL?
GraphQL queries in production are often minified to reduce request size — all the whitespace, comments, and formatting stripped away. When debugging, you need to expand that back into a readable structure. Similarly, when writing queries, consistent formatting helps the team understand complex nested queries at a glance. A formatter handles both directions: prettify for readability, minify for production.
GraphQL Query Structure
A GraphQL query contains up to four parts:
query GetUser($id: ID!) { # Operation type and name + variables
user(id: $id) { # Root field
id
name
posts(first: 10) { # Nested field with arguments
edges {
node {
title
createdAt
}
}
}
}
}A well-formatted query uses consistent indentation (2 spaces is the community standard), places each field on its own line in nested queries, and aligns arguments and directives for scannability.
Formatting Operations and Fragments
GraphQL supports three operation types — query, mutation, and subscription — plus fragments for reusable field sets:
fragment UserFields on User {
id
name
email
avatarUrl
}
query GetUsers {
admins: users(role: ADMIN) {
...UserFields
}
members: users(role: MEMBER) {
...UserFields
}
}Good formatters preserve field ordering, indent nested selections, and keep fragment references (the ... spread syntax) clean.
Minifying for Production
Minified GraphQL strips all unnecessary whitespace, line breaks, and comments — turning a 50-line query into a single line. This reduces the request body size and bandwidth, especially for applications sending many GraphQL requests per page load. The minified query is functionally identical; just harder to read.
Schema Formatting
GraphQL schemas defined in Schema Definition Language (SDL) benefit from formatting too:
type User {
id: ID!
name: String!
email: String!
posts(first: Int = 10, after: String): PostConnection!
createdAt: DateTime!
}Consistent spacing around colons, brackets, and exclamation marks (non-nullable) makes schemas scannable.
Format GraphQL Instantly
Paste your GraphQL query or schema into ToolsVito's GraphQL Formatter to prettify it with consistent indentation or minify it for production use. All formatting runs in your browser.