GraphQL Query Formatter
Format and indent GraphQL query and mutation strings for readability.
Input
Result
GraphQL Query Formatter
The GraphQL Query Formatter is a software development and API testing utility designed to format raw, minified GraphQL query and mutation strings. GraphQL allows client applications to request specific data structures from a backend server. However, queries pasted from log files or network tabs are often collapsed into a single line, making them hard to read and debug. This tool automates the formatting process, aligning braces and applying consistent indentation. Mobile developers, API engineers, and front-end developers input raw queries, and the formatting engine returns a clean query document instantly.
GraphQL Syntax and Indentation Rules
Formatting GraphQL queries requires analyzing the nested braces that define the requested fields. The formatter sets the correct indentation level for each field based on its depth in the query tree.
According to GraphQL syntax standards, there are 4 distinct structural properties that govern query formatting. First, field lists wrap in opening and closing curly braces. Second, nested fields are indented to show their relationship to parent fields. Third, arguments (like id: 1) sit inline or stack vertically depending on how long the line is. Fourth, keywords (like query, mutation, fragment) sit at the root level of the document. Formatting engines apply these rules to make queries easy to read.
The Growth of Graph APIs
Facebook developed GraphQL in 2012 and released it as an open-source project in 2015 to solve the problems of over-fetching and under-fetching data in REST APIs. Instead of making requests to multiple endpoints, clients send a single query describing the data they need. As applications grow, these queries become deeply nested, making automated formatters essential for debugging API payloads and maintaining clean codebase documentation.
How the GraphQL Query Formatter Works
To format a GraphQL query, paste the raw query string into the input box and run the formatter. The parsing engine processes the text through a 3-step sequence.
- Whitespace Normalization: The engine trims whitespace from the start and end of each line and filters out empty lines.
- Indentation Level Tracking:
- The engine checks each line for opening and closing curly braces.
- It decreases the indentation level when it finds a closing brace and increases it after an opening brace.
- Re-serialization: The engine adds two spaces of indentation per depth level to the start of each line, building the formatted query document.
For example, inputting 'query { user { name } }' returns a formatted document with the nested fields indented on separate lines. The tool displays this result instantly.
GraphQL Formatting Reference Table
The table below displays sample inputs and their formatted outputs.
| Raw Input Query | Formatted Line Count | Root Operation Type | Readability Action |
|---|---|---|---|
{ viewer { name } } |
4 lines | Anonymous Query | Indents nested viewer fields |
query GetUser { user { id name } } |
5 lines | Named Query | Organizes user fields vertically |
mutation { addPost(title:"Hello") { id } } |
4 lines | Mutation | Aligns mutation arguments and fields |
fragment UserDetails on User { email } |
3 lines | Fragment Definition | Formats fragment fields cleanly |
Frequently Asked Questions
Why does the formatter place curly braces on separate lines?
Placing braces on separate lines visually defines the block structure. This matches standard coding style guidelines, making the query structure easy to follow.
Can this tool parse and format GraphQL schemas?
Yes, this tool formats standard GraphQL Schema Definition Language (SDL) files. It applies the same indentation rules to type and input declarations.
Does this tool validate the schema fields against my backend?
This tool formats the syntax structure of the query. It does not connect to your server to validate if the fields exist in your API schema.
Format Your GraphQL Queries Instantly
Manual indentation of nested braces in query strings is slow and tedious. The GraphQL Query Formatter delivers clean, structured queries. Use this tool to format logs, build API requests, and document your endpoints easily.