About GraphQL Query Builder

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.