GraphQL Query Formatter
Paste code in both editors to see differences
Hint: Paste original code on left, modified code on right, then click Compare to see differences highlighted.
Hint: Paste your code, customize font size and line numbers, then click Export PDF to download formatted code.
Hint: Paste your JWT token to decode and view its header, payload, and signature. The tool validates token structure and format.
Hint: Select conversion type, paste your data, and get instant conversion. Supports JSON, YAML, XML, Excel, PDF, and more.
Issue Description
Hint: Paste any code and click Format to beautify indentation, spacing, and structure instantly.
How It Works
- Step 1: Paste minified or unformatted GraphQL queries, mutations, subscriptions, or schema definitions with inconsistent spacing and indentation.
- Step 2: The formatter parses GraphQL syntax identifying operations (query, mutation, subscription), field selections, arguments, variables, fragments, and directives (@include, @skip).
- Step 3: Applies GraphQL formatting standards with 2-space indentation, proper line breaks after field selections, aligned arguments, and organized fragment spreads.
- Step 4: Outputs formatted queries following GraphQL best practices, improving readability for API development, debugging Apollo/Relay clients, and schema documentation.
GraphQL Formatting Examples
Example: GraphQL Query Formatting
query GetUser($id:ID!){user(id:$id){id name email posts(first:10){edges{node{title createdAt comments{totalCount}}}}}}query GetUser($id: ID!) {
user(id: $id) {
id
name
email
posts(first: 10) {
edges {
node {
title
createdAt
comments {
totalCount
}
}
}
}
}
}Key Changes:
The formatter transforms compressed GraphQL into readable query structure following GraphQL specification formatting. Variable declarations ($id: ID!) gain proper spacing after colons, distinguishing variable names from types. The exclamation mark (!) indicating non-nullable types is preserved. Field selections are indented with 2 spaces per nesting level, making the query hierarchy immediately visible—user contains posts, posts contain edges, edges contain nodes. Arguments like (first: 10) receive spacing around colons for consistency. The nested structure clearly shows the relationship between entities: user → posts → edges → node → comments. This formatting is critical for debugging GraphQL queries in tools like GraphiQL, Apollo Studio, or Hasura Console. Properly formatted queries help identify over-fetching (requesting unnecessary fields), under-fetching (missing required data), and N+1 query problems. Frontend developers working with React Apollo or Relay benefit from readable queries when debugging data fetching issues or optimizing bundle size.
Frequently Asked Questions
What is a GraphQL query formatter?
A GraphQL query formatter is a tool that formats GraphQL queries and mutations with proper indentation, spacing, and structure. It makes GraphQL queries more readable and easier to maintain by applying consistent formatting rules.
How do I format GraphQL queries online?
Simply paste your GraphQL query into the editor, and our formatter will automatically format it with proper indentation and spacing. The formatting happens instantly in your browser.
Is the GraphQL formatter free?
Yes, our GraphQL query formatter is completely free to use with no limits. There's no registration required, and all processing happens in your browser for maximum privacy.
Does the formatter validate GraphQL syntax?
Yes, our GraphQL formatter validates GraphQL syntax while formatting. If there are syntax errors, the formatter will highlight them so you can fix them before formatting.
Can I format GraphQL mutations?
Yes, our GraphQL formatter supports both queries and mutations. It formats all GraphQL operations including queries, mutations, and subscriptions.
What GraphQL features are supported?
Our GraphQL formatter supports all GraphQL features including fields, arguments, fragments, variables, directives, aliases, and all standard GraphQL syntax.