GraphQL Query Builder
Tick the fields you need, set your arguments, and get a clean, formatted GraphQL query string instantly. Nothing leaves your browser.
Presets
Sample schema
type Query {
products(first: Int, search: String): [Product]
user(id: ID!): User
}
type Mutation {
createProduct(name: String!, price: Float!): Product
updateUser(id: ID!, email: String): User
}
type Product { id: ID, name: String, price: Float }
type User { id: ID, name: String, email: String, orders: [Order] }
type Order { id: ID, total: Float, items: [String] }
1. Operation
Root field
2. Arguments
Only filled arguments are added to the query. Arguments that do not apply to the chosen root field are ignored.
3. Fields
Product fields
User fields
Order sub-fields
Generated query
How to use this builder
- Pick the operation type and a root field, then tick the fields you want returned.
- Fill only the arguments you need; empty ones are left out of the query automatically.
- Use the presets to start from a working example, then adjust it to your needs.
- The schema shown here is a sample. Adapt field names to your own GraphQL API before sending.
Frequently Asked Questions (FAQ)
What does the GraphQL Query Builder do?
It lets you tick checkboxes for the fields you want from a sample shop schema and instantly generates the matching GraphQL query string, formatted with indentation and ready to copy.
Does this tool call a real API?
No. Everything is built in your browser from text. The sample schema is fictional, so the generated query is a template you can adapt to your own GraphQL server.
What presets are included?
Two one-click presets are included: listing products with basic details, and fetching a user together with their orders.
Can I name the operation and choose between query and mutation?
Yes. You can set the operation type to query or mutation, give the operation a name, and add common arguments such as first, id and search.