GraphQL Query + Variables Playground
Paste a GraphQL query, a JSON variables object, and — optionally — your SDL schema. The tool validates the document against that schema when you supply one, catching unknown types, unknown fields, and misnamed arguments, cross-checks the variables against the operation's declared $variables (missing required, unused, extras, type mismatches), and lints depth, complexity, and fragment usage. The output is a request-ready payload JSON; the Lint and Snippets tabs carry the findings and copy-paste cURL / fetch. Runs in your browser; nothing is uploaded.
Auto-validates as you type. Ctrl+Enter to re-run.
GraphQL Query + Variables Playground
A browser-only GraphQL playground for validating queries and variables, linting your operation, and generating request snippets — without sending your query, variables, or tokens to any server.
What you can do here
- Validate GraphQL queries, mutations, and subscriptions and surface parse errors.
- Pick a single operation from a multi-operation document with
operationName. - Validate variables JSON against the declared
$variablesin your query. - Catch missing required variables, unused declarations, extras, and type mismatches.
- Estimate query depth and complexity, and flag undefined or unused fragments.
- Get a request-ready payload JSON (
query,variables,operationName). - Generate cURL and Fetch request snippets for your endpoint.
When to use it
- Reproduce a GraphQL request from a bug report or QA ticket.
- Confirm variables match the query before sharing an example.
- Estimate the cost of a query with depth and complexity before you ship it.
- Generate consistent cURL / Fetch snippets for docs.
- Spot undefined or unused fragments in a large document.
How to use it
- Paste a GraphQL operation into the Query editor.
- Paste matching variables into the Variables (JSON) editor.
- Set the endpoint URL and (optionally) the operation name.
- Read the verdict, then open the Lint tab for metrics and findings, or the Snippets tab for cURL / Fetch.
- Copy or download the request payload JSON.
Tips & pitfalls
- Variables must be a JSON object — not an array.
- If the document has multiple operations, set
operationNameso the server runs the right one. - Required variables (
Type!) must be present in the variables object. - Deeply nested queries raise the complexity score — watch the depth metric.
- Fragment spreads (
...Name) must have a matchingfragment Name on Typedefinition.
Privacy
All GraphQL parsing, variable checks, linting, request generation, and snippet generation run fully in your browser. Nothing is uploaded, and the generated snippets are code artifacts — the tool never sends the request itself.
Frequently asked questions
Does this tool send my query or variables anywhere?
No. The playground runs entirely in your browser. Endpoints in generated snippets are only
called when you copy and run the snippet yourself.
How does it validate my variables?
It parses the operation's declared $variables and compares them to your variables
object — flagging missing required values, extras, unused declarations, and basic type
mismatches (String / ID / Int / Float / Boolean / list).
What do depth and complexity mean?
Depth is the maximum nesting of selection sets; complexity is a weighted field count that
approximates fan-out cost. Both help you gauge how expensive a query is before running it.
Does it support fragments and directives?
Yes. The linter lists named fragments and fragment spreads, and flags undefined or unused
fragments in your document.
Runs locally in your browser. No uploads.