GraphQL Explorer

Interactive GraphQL client with schema introspection, query editor, variables panel, and CORS proxy. Test any GraphQL API from your browser — no install required.

Was this tool helpful?

How to Use

Test any GraphQL API directly from your browser:

Enter the endpoint URL — Paste any GraphQL API URL (e.g., https://countries.trevorblades.com/graphql) or click a quick-try example. The CORS proxy is enabled by default to bypass cross-origin restrictions.
Write and run queries — Type your GraphQL query in the editor and click Run or press Ctrl+Enter. Add variables as JSON in the collapsible Variables panel. The response appears on the right with syntax highlighting, error locations, and timing.
Explore the schema — Click the Schema button to run an introspection query. The Schema tab shows all types, fields, arguments, and descriptions in a browsable tree. Filter by name to find specific types quickly.

About This Tool

What is GraphQL?

GraphQL is a query language for APIs developed by Facebook in 2012 and open-sourced in 2015. Unlike REST, where the server defines fixed response shapes per endpoint, GraphQL lets clients specify exactly which fields they need in a single request. A query like { user(id: 1) { name email } } returns only the name and email fields — nothing more, nothing less.

GraphQL has three operation types: queries (read data), mutations (write data), and subscriptions (real-time updates via WebSocket). Every GraphQL API has a strongly-typed schema that defines all available types, fields, and their relationships. This schema is self-documenting — clients can introspect it to discover the full API surface without external documentation.

Schema Introspection

This tool sends the standard __schema introspection query defined in the GraphQL specification. The response contains every type (objects, inputs, enums, interfaces, unions, scalars), their fields and arguments, type references, and human-readable descriptions. Built-in types (String, Int, Boolean) and meta-types (__Type, __Field) are filtered out for clarity.

Some production APIs disable introspection for security. If introspection fails, you'll see an error message — in that case, refer to the API's documentation for the schema. Apollo Server, Hasura, and most GraphQL frameworks support introspection by default in development but may disable it in production.

Variables and Operations

GraphQL variables separate dynamic values from the query structure. Instead of string-interpolating values (risky for injection and bad for query caching), define typed parameters: query GetUser($id: ID!) { user(id: $id) { name } } and pass { "id": "123" } in the Variables panel. The server validates types at runtime — passing a string where an integer is expected returns a clear type error.

GraphQL vs REST

REST: multiple endpoints (/users, /users/1/posts), fixed response shapes, HTTP verbs for semantics, leverages HTTP caching. GraphQL: single endpoint, flexible response shapes, all requests are POST, requires application-level caching. GraphQL excels when clients need different data shapes (mobile vs web), when APIs have deeply nested relationships, or when bandwidth is constrained. REST excels for simple CRUD, file uploads, and when HTTP caching is critical. For REST API testing, see API Tester.

Why Use This Tool

Browser-Based GraphQL IDE

Full-featured GraphQL IDEs like GraphiQL, Apollo Studio, and Insomnia require installation or account creation. This tool loads instantly in any browser tab — paste an endpoint URL, write a query, and get results. The built-in CORS proxy means you can test any GraphQL API, even those without permissive CORS headers.

Common Use Cases

API exploration: Discover unfamiliar GraphQL APIs by introspecting their schema. Browse types, fields, and arguments without reading documentation.
Query development: Build and test queries iteratively before integrating them into your application code. Verify response shapes and handle edge cases.
Schema review: Audit a GraphQL schema's type design — check naming conventions, nullable fields, enum values, and input type structures.
Debugging: Test queries with specific variable values to reproduce bugs. Inspect error locations and paths in the response to identify schema mismatches.
Team collaboration: Share query examples with teammates by copying the query text. The History tab preserves recent queries in localStorage for quick access.

Privacy

The CORS proxy does not log queries, variables, headers, or responses. Query history is stored only in your browser's localStorage. For REST API testing, see API Tester. For API documentation, see OpenAPI Validator. Related tools include JSON Formatter and GraphQL Formatter.

FAQ

How does GraphQL differ from REST APIs?

GraphQL uses a single endpoint where clients specify exactly which fields they need in a query language. REST uses multiple endpoints (one per resource) with fixed response shapes. GraphQL eliminates over-fetching (getting fields you don't need) and under-fetching (needing multiple requests), making it especially efficient for mobile apps and complex UIs.

What is GraphQL introspection?

Introspection is a built-in GraphQL feature that lets clients query the schema itself — discovering all available types, fields, arguments, and their descriptions. This explorer uses the standard __schema introspection query to build a browsable schema viewer. Some production APIs disable introspection for security, in which case you'll need the schema documentation.

Why do I need a CORS proxy for GraphQL?

Browsers enforce the Same-Origin Policy, blocking requests from one domain to another unless the server sends CORS headers. Many GraphQL APIs don't include these headers because they're designed for server-to-server or native app communication. The CORS proxy routes your request through a Cloudflare Worker that adds the necessary headers.

What are GraphQL variables?

Variables separate dynamic values from the query structure. Instead of interpolating values into the query string (which risks injection attacks and breaks caching), you define typed variable placeholders like $id: ID! in the query and pass actual values as a separate JSON object. The server validates variable types against the schema.

Can I use this with authenticated GraphQL APIs?

Yes. Add authentication headers (like Authorization: Bearer <token>) in the Headers section. These are forwarded through the CORS proxy to the target API. Common authentication methods include Bearer tokens (JWT), API keys, and Basic auth.