🔗 GraphQL Formatter/Beautifier

🔗
Characters: {{ graphqlInput.length }}
⚙️
📏
⚡
{{ result.isValid ?'✅' :'❌' }}
{{ result.isValid ?'GraphQL is valid and well-formed' :'GraphQL contains errors' }}
🚨
{{ error }}
⚠️
{{ warning }}
📤 
{{ result.formatted }}
Characters: {{ result.stats.formattedSize }}
📊
Operations:
{{ result.stats.operations }}
Fields:
{{ result.stats.fields }}
Types:
{{ result.stats.types.join(',') }}
Directives:
@{{ result.stats.directives.join(', @') }}
💾
Original: {{ result.stats.originalSize }} chars (~{{ Math.round(result.stats.originalSize / 1024 * 100) / 100 }} KB)
Formatted: {{ result.stats.formattedSize }} chars (~{{ Math.round(result.stats.formattedSize / 1024 * 100) / 100 }} KB)
{{ result.stats.formattedSize > result.stats.originalSize ?'Increase:' :'Decrease:' }} {{ Math.abs(result.stats.originalSize - result.stats.formattedSize) }} chars
💾
⚠️ {{ error }}

ℹ️ About GraphQL Formatter

GraphQL is a query language and runtime for APIs where a client sends a typed document describing the exact fields it wants back. This formatter pretty-prints GraphQL documents so queries, mutations, subscriptions, fragments, directives, variables, and schema definition snippets are easier to review before they are checked into code or pasted into an API client.

The tool is useful when you need to expand a minified operation such as query GetUser($id: ID!) { user(id: $id) { id name } }, clean up nested selection sets from browser logs, compare generated GraphQL operations during code review, or normalize indentation across examples in documentation and tests.

What it checks: the formatter reports common structural problems such as unmatched braces, parentheses, and brackets, then shows lightweight statistics for operations, fields, detected types, and directives. It does not connect to your GraphQL server, execute the operation, introspect a schema, or prove that requested fields exist on a particular API type. For full validation, parse the operation against the target schema in your GraphQL client, gateway, or CI pipeline.

Common GraphQL parts:

  • Queries read data from the schema's query root and return a response shaped like the selection set.
  • Mutations request writes or side effects and usually return the changed object or status fields.
  • Subscriptions describe a stream of future results for real-time updates.
  • Fragments reuse field selections across operations and help keep large documents maintainable.
  • Directives such as @include and @skip conditionally alter execution without string-building a new query.

Formatting options:

  • Pretty-print or preserve the original text while still running structural checks.
  • Choose 2, 4, or 8 spaces, or switch to tab indentation for teams that standardize on tabs.
  • Use compact mode when you want field arguments to stay closer to a single-line style.
  • Remove # comments when sharing a query without local notes or debugging annotations.

Practical limitations: GraphQL documents can contain sensitive field names, IDs, or business workflow details. Avoid pasting production secrets, access tokens, or private customer data into examples. Formatting also cannot resolve API-specific behavior such as custom scalar coercion, authorization rules, persisted-query IDs, federation composition, or server-defined directives.

Primary references:

API Usage Example:

POST /api/tools/webdev/graphql-formatter
Content-Type: application/json

{
    "graphql": "query GetUser($id: ID!) { user(id: $id) { name email posts { title content } } }",
    "format": true,
    "indentSize": 2,
    "indentType": "spaces",
    "compactMode": false,
    "removeComments": false,
    "sortArguments": false
}
Ready