Does this run against my own server or this site's?

Yours. The request is sent directly from your browser to the endpoint URL you provide using fetch(); this site never sees the endpoint, query, variables, or response.

Why does my request fail even though the endpoint works fine in my app?

The most likely cause is CORS: your production app may run server-side or same-origin, while this tool calls the endpoint directly from the browser tab you're using, which many GraphQL servers don't allow by default from arbitrary origins.

What request format does this use?

A standard GraphQL-over-HTTP POST with a JSON body of {"query": "...", "variables": {...}}, the same convention every major GraphQL server (Apollo, GraphQL Yoga, Hasura, and others) accepts.

GraphQL Query Tester - Send a GraphQL Query Online

Overview

Introduction

Testing a GraphQL query usually means reaching for a full IDE-style client, which is overkill when you just need to confirm a query works or see what shape a response takes.

This tool sends a query or mutation directly from your browser to any endpoint you specify and shows you the raw response, with no client to install.

What Is GraphQL Query Tester?

A minimal GraphQL client: an endpoint URL, a query, optional variables, and optional headers, sent as a standard GraphQL-over-HTTP POST request.

It's part of this site's API Tools collection; the request itself is made directly from your browser to the endpoint you specify.

How GraphQL Query Tester Works

Your query and variables are packaged into the standard {query, variables} JSON body and POSTed to the endpoint, with a Content-Type: application/json header plus anything you add yourself.

The response status and body are read back and pretty-printed if it's JSON (which a GraphQL response always should be), or shown as-is otherwise.

When To Use GraphQL Query Tester

Use it to quickly check that a query or mutation is well-formed and returns what you expect, without setting up a full GraphQL client.

It's also useful for reproducing a reported bug by resending the exact same query and variables a user or another team described.

Often used alongside Webhook Tester.

Features

Advantages

No installation or account needed; just an endpoint, a query, and go.
Shows the exact raw response, including GraphQL's own errors array when a query partially or fully fails.

Limitations

No schema introspection, autocomplete, or query validation against a schema; it's a raw request sender, not a full IDE.
Subscriptions (which use WebSockets, not plain HTTP POST) aren't supported; only queries and mutations are.

Examples

Sending a simple query

Input

query { user(id: "1") { name email } }

Output

{
  "data": {
    "user": {
      "name": "Ada Lovelace",
      "email": "ada@example.com"
    }
  }
}

The query is sent as-is in the request body's query field, and the server's data object comes back exactly as it returned it.

A query with a GraphQL-level error

Input

query { user(id: "missing") { name } }

Output

{
  "errors": [{"message": "User not found"}],
  "data": null
}

GraphQL servers return errors as part of a normal 200 response body rather than an HTTP error status, so check the errors array, not just the status code.

Best Practices & Notes

Best Practices

Check the errors array in the response even when the HTTP status is 200; GraphQL reports query-level failures inside a successful response.
Pass variables as JSON rather than interpolating values directly into the query string, matching how a real client would send them.
Add an Authorization header for endpoints that require it; this tool doesn't manage auth tokens for you.

Developer Notes

Variables are validated as JSON before the request is sent, so a malformed variables block is caught locally with a clear error instead of producing a confusing server-side parse failure.

GraphQL Query Tester Use Cases

Quickly checking that a GraphQL query or mutation is well-formed and returns the expected shape
Reproducing a bug report by resending the exact query and variables described
Exploring a third-party GraphQL API's responses before writing real client code against it

Common Mistakes

Only checking the HTTP status code and missing a GraphQL-level errors array inside an otherwise-200 response.
Assuming a failed request means the query is wrong, when it's often a CORS policy blocking the browser from reading the response.

Tips

If a query needs variables, define them with $ placeholders in the query and supply matching values in the variables field, exactly as a real client would.

GraphQL Query Tester