Format, minify and check GraphQL queries, mutations and schemas in your browser. Find syntax errors by line and column, and keep your comments intact.
A GraphQL query copied from a network tab or a log arrives as one long line, with escaped quotes and no shape. Paste it here and it comes back indented, one field to a line, with its comments still where you put them. If it does not parse, you get the line and column of the problem.
The box starts with a one-line query beginning query VesselReport($port: String!, …, which formats into a readable block with its CargoFieldsfragment below it.
The summary also catches mistakes a formatter normally ignores: a fragment that is used but not defined, one defined but never used, a repeated operation name, and an unnamed operation sharing a document with others. Deepest nesting is a quick check before a query reaches a server that limits depth.
Formatting changes layout only. Commas, which GraphQL ignores, are tidied; comments and triple-quoted descriptions stay. Arguments stay on one line up to 80 characters and then wrap to one per line. Minifying removes comments and every optional space, leaving a space only where two words would otherwise merge, so query Q keeps its space. The parser covers queries and the schema language, and was tested against the official graphql-js parser on 80,000 mutated documents: it accepted and rejected exactly the same ones, and each valid result parsed back to the same document.
This checks that the document is well-formed, not that it will run. It has no schema, so a misspelled field or a wrong argument type passes here and fails on the server. An error reads like “Line 1, column 14: Expected a value, found ")".” and points at the first problem only, since one missing brace can make everything after it meaningless. Text stays in your browser, so a query with a token in it goes nowhere, though it is saved locally for your next visit.
Operations
1
Fragments
1
Type definitions
0
Fields selected
10
Deepest nesting
3