Build GraphQL queries and mutations with field selection. Part of the DevTools Surf developer suite. Browse more tools in the API / Config collection.
Use Cases
Build GraphQL queries for a public API without writing query strings manually.
Generate curl-compatible request snippets for testing queries from a CI pipeline.
Draft mutations with input type variables for creating or updating records.
Create query templates for a code generation pipeline (codegen).
Tips
Use the field tree to build queries visually, then switch to the text editor to add inline fragments or directives.
Add @skip(if: $condition) and @include(if: $condition) directives to make queries conditionally fetch fields without multiple round trips.
Export the query with curl to test it from the command line or share it with a backend developer for debugging.
Fun Facts
GraphQL queries are hierarchically typed — every field in a query maps to a concrete type in the schema, making them self-documenting in a way SQL queries are not.
The GraphQL spec allows queries, mutations, and subscriptions as operation types. 'Query' is the read operation; despite its name, all three are just named differently in the spec.
GitHub moved its v4 API entirely to GraphQL in 2016, making it one of the first major companies to deprecate a REST API in favor of GraphQL at scale.
FAQ
What's the difference between this and the GraphQL Explorer?
The request builder focuses on constructing and exporting query strings; the GraphQL Explorer executes queries against a live endpoint. Use both together for a full workflow.
Does it generate TypeScript types from queries?
It generates the raw GraphQL query string and variable types in JSON. For full TypeScript type generation, pipe the output through a codegen tool like GraphQL Code Generator.
Can I add custom directives?
Yes — type custom directives (@defer, @stream, @cacheControl) directly in the text editor. The builder doesn't restrict directive use beyond what the schema declares.
