How do I test a GraphQL query in the browser?

Paste the endpoint, type the query and its variables, add any header the API needs and press Run. The request goes from your browser to that endpoint, and the response appears with the status code and the time it took. GraphQL errors in the response are listed in the errors tab.

Why do I get a CORS or network error?

The browser does not say why a request failed, so the page shows one message for CORS, DNS, TLS and a dropped connection. If curl reaches the endpoint, the server probably does not allow this page's origin in its CORS headers. The page says You appear to be offline when the browser reports no connection.

How do I get a GraphQL schema with introspection?

Press Introspect. The tool sends a short introspection query with your headers and writes a list of each type with its fields, such as posts: [Post!]!, on the Schema tab. The same result feeds a field picker that writes a query from the fields you tick. It is not full SDL: input-object fields, default values, descriptions and directives are not requested, and the list is not used for checking or completion. Pasting an introspection result (JSON) on that tab also feeds the picker. A server can turn introspection off, and then the page shows the error the server returned.

Does the tool validate my query?

Only lightly. It checks that the opening and closing braces balance and that the variables are valid JSON before it sends the request. Field names, types and arguments are checked by the server, which returns errors in the response.

Are my headers and tokens saved?

Headers and variables stay in memory and are not saved. The endpoint, query, operation name, the schema list and the introspection result behind the field picker are saved in this browser (a schema over 200,000 characters is kept for the visit only), so keep a token out of the endpoint URL. Copy Share URL puts the endpoint and the query in the link and leaves the variables and headers out. Copy as cURL is different: it writes every header with a value, tokens included, so mask them before you share the command.

GraphQL Query Builder

Test a GraphQL query in the browser: send it with variables and headers, pick fields from the introspected schema, read the response and copy it as cURL. How it works

GraphQL Endpoint URL

Requests are sent directly from your browser to the endpoint URL you enter. Request headers and variables are kept in memory only: they are not saved in your browser and are not included in share links. The endpoint, query, operation name and schema are saved in your browser, and the endpoint and query are included in share links.

About the GraphQL Query Builder

Enter an endpoint, a query and optional variables and headers, then press Run. The tool sends one POST request with a JSON body of query, variables and operationName, and shows the status, the time, the response and the response headers that CORS lets the page read. Introspect fetches the schema, and its field picker writes a query from the fields you tick; Copy as cURL writes the same request for a terminal. The query box is plain text, and the server does the validation.

How to use this tool

Enter the endpoint URL, for example https://api.example.com/graphql.
Type the query, then the variables as JSON. Add headers such as Authorization on the Headers tab.
Press Run to send the query, or Introspect to read the schema. On the Schema tab, tick fields and arguments in the picker and press Use in query editor to fill in the query and its variables.
Read the data, errors and response headers tabs. Use Copy as cURL or Copy Share URL to pass the request on.

Frequently asked questions

How do I test a GraphQL query in the browser?: Paste the endpoint, type the query and its variables, add any header the API needs and press Run. The request goes from your browser to that endpoint, and the response appears with the status code and the time it took. GraphQL errors in the response are listed in the errors tab.
Why do I get a CORS or network error?: The browser does not say why a request failed, so the page shows one message for CORS, DNS, TLS and a dropped connection. If curl reaches the endpoint, the server probably does not allow this page's origin in its CORS headers. The page says You appear to be offline when the browser reports no connection.
How do I get a GraphQL schema with introspection?: Press Introspect. The tool sends a short introspection query with your headers and writes a list of each type with its fields, such as posts: [Post!]!, on the Schema tab. The same result feeds a field picker that writes a query from the fields you tick. It is not full SDL: input-object fields, default values, descriptions and directives are not requested, and the list is not used for checking or completion. Pasting an introspection result (JSON) on that tab also feeds the picker. A server can turn introspection off, and then the page shows the error the server returned.
Does the tool validate my query?: Only lightly. It checks that the opening and closing braces balance and that the variables are valid JSON before it sends the request. Field names, types and arguments are checked by the server, which returns errors in the response.
Are my headers and tokens saved?: Headers and variables stay in memory and are not saved. The endpoint, query, operation name, the schema list and the introspection result behind the field picker are saved in this browser (a schema over 200,000 characters is kept for the visit only), so keep a token out of the endpoint URL. Copy Share URL puts the endpoint and the query in the link and leaves the variables and headers out. Copy as cURL is different: it writes every header with a value, tokens included, so mask them before you share the command.

Network use

When you press Run, this tool sends your query, variables and headers to the GraphQL endpoint URL you enter. Introspect sends a standard introspection query and your headers, not your variables. Privacy policy

Trying a query against an endpoint before you write code

Paste the endpoint URL, type the query and its variables, add an Authorization header if the API needs one, and press Run. Introspect lists the schema's types and fields and opens a field picker on the Schema tab: tick the fields and arguments you want, and Use in query editor writes the query and its variables. A pasted introspection result (JSON) feeds the picker too. Copy as cURL turns the request into a terminal command that includes every header, Authorization tokens too, so mask them before you share it.

The query box is plain text. The page checks only that the braces balance and that the variables are valid JSON; the server does the real validation and returns its errors. Browsers also apply CORS: an endpoint that does not allow this page's origin fails with a network error that the browser does not explain.

What is sent

Run sends one POST request with a JSON body made of query, variables (when you filled them in) and operationName (when you set one), plus your headers, by default Content-Type: application/json, the form the GraphQL over HTTP guide describes. Introspect sends an introspection query and your headers, not your variables. It asks for each type's name, kind, fields with their arguments, and enum values, seven wrapper levels deep, so [Post!]! shows in full.

The picker passes every non-null argument and each optional one you tick as a variable of its exact type, and writes __typename under an object field with nothing ticked. Ticking user, its name and posts.title with the first argument, under the operation name GetUser, gives query GetUser($id: ID!, $first: Int); the variables start as "" and 0 for you to fill in.

This page does not send your request to CalcChef's servers. It goes from your browser to the endpoint you enter. Servers may turn introspection off, and then Introspect shows the server's error.

Related Tools

View all tools

Dev

HTTP Headers Viewer

See the request headers an echo service (httpbin.org) receives from one fetch by this page, or by your own URL. Copy as cURL, fetch(), Python or .env.

Dev

RegEx Playground

Try 11 regex presets, from email, phone and IPv4 to semver and hex color, on sample text, see every match, and read what each pattern does not check.

Dev

JSON Path Query Tool

Test a JSONPath expression on your JSON and see the match count, each matching value and its path. Filters such as ?(@.price < 10) work. Up to 100 KB.

Dev

SQL Query Formatter

Format SQL for Standard SQL, PostgreSQL, MySQL, SQLite or SQL Server, with keywords kept, upper-cased or lower-cased and 2-space, 4-space or tab indents.

Dev

XML to JSON Converter

Convert XML to JSON and JSON back to XML: attributes go under @attributes, repeated elements become arrays, and an XML error shows its line and column.

Dev

Color Picker

Pick a color or type a HEX, RGB or HSL value to get the other two, the CSS and CMYK forms, and its WCAG contrast ratio on white, black or a second color.