Formatters
GraphQL Formatter
Canonical GraphQL style for queries, mutations, fragments and full SDL schemas.
In short
Format GraphQL online: queries, mutations, fragments and SDL schemas in canonical style with exact error positions. Prettier engine, in-browser.
By NaveenKumar T · Updated
- Industry-standard formatting
- Exact error line & column
- 2/3/4-space or tab indent
Runs entirely in your browser — nothing you paste or open here is uploaded, logged, or stored.How we handle data →
Example
GraphQL Formatter: input and output
A blog schema and a query against it, both collapsed: a described, federated `Post` type with a paginated field, an `Author` type, a `PostCard` fragment, and a `LatestPosts` query with defaulted variables and input objects.
"""A published article"""
type Post implements Node @key(fields:"id"){id:ID! title:String! body:String slug:String! author:Author! tags:[String!]! comments(first:Int=10,after:String):CommentConnection! publishedAt:DateTime}
type Author{id:ID! name:String! posts:[Post!]!}
fragment PostCard on Post{id title slug author{name}}
query LatestPosts($first:Int!=5,$tag:String){posts(first:$first,filter:{tag:$tag,published:true},orderBy:{field:PUBLISHED_AT,direction:DESC}){edges{node{...PostCard publishedAt}}}}"""
A published article
"""
type Post implements Node @key(fields: "id") {
id: ID!
title: String!
body: String
slug: String!
author: Author!
tags: [String!]!
comments(first: Int = 10, after: String): CommentConnection!
publishedAt: DateTime
}
type Author {
id: ID!
name: String!
posts: [Post!]!
}
fragment PostCard on Post {
id
title
slug
author {
name
}
}
query LatestPosts($first: Int! = 5, $tag: String) {
posts(
first: $first
filter: { tag: $tag, published: true }
orderBy: { field: PUBLISHED_AT, direction: DESC }
) {
edges {
node {
...PostCard
publishedAt
}
}
}
}
`comments(first: Int = 10, after: String)` fits on one line and keeps its commas, while the wrapped `posts(...)` call drops them — GraphQL treats commas as whitespace, so both forms are canonical.
Learn more
Formatting GraphQL, properly
Both GraphQL dialects format here: executable documents (queries/mutations/subscriptions with variables, fragments, directives) and schema-definition language (types, interfaces, enums). Prettier's GraphQL plugin applies the canonical style every GraphQL tool expects — selection sets indented, arguments wrapped sensibly.
GraphQL queries get assembled in code and logged as one-line strings; pasting them here is the standard de-noising step before debugging — a 600-character persisted query becomes a readable selection tree in one click, and the fragment that's over-fetching becomes obvious. Schema authors get the inverse benefit: SDL formatted consistently before commits keeps schema diffs reviewable, which matters doubly in federated setups where multiple teams edit subgraph schemas and review churn hides real contract changes. Apollo logs, GraphiQL exports, and network-tab payloads all paste straight in.
Help
Frequently asked questions
Everything you need to know about the GraphQL Formatter.
01How do I format GraphQL code here?
Paste a GraphQL query, mutation, fragment or full SDL schema (or load a file/URL) and press Format. The parser auto-detects which kind you pasted and applies prettier's canonical GraphQL style — selection sets indented, arguments wrapped sensibly.
02Can I format a whole schema, not just queries?
Yes — SDL is first-class: type definitions, interfaces, unions, input types, enums and their directives all format. The parser tells queries from schemas automatically; paste either kind.
03What happens to descriptions, commas and fragments?
A `"""` description is expanded onto three lines, the text alone between the quotes, and stays attached to the type or field it documents. Commas are handled the way GraphQL treats them: as insignificant. An argument list that fits within 80 columns keeps `a, b`; one that wraps prints one argument per line with no commas at all. Fragment definitions and `...spreads` are formatted like any selection, and blank lines between top-level definitions are preserved (at most one) but never added.
Keep working