GraphQL Playground — Learn GraphQL In Your Browser with a Full In-Browser Executor

GraphQL has become the standard query language for modern APIs — powering data layers at GitHub, Shopify, Twitter, and thousands of other companies. Yet learning GraphQL traditionally requires setting up a server, installing dependencies, configuring a schema, and wiring up resolvers before writing your first query. This playground removes every barrier. Open any lesson and you can write and execute GraphQL immediately.

All GraphQL operations run entirely in your browser — no data is sent to any server. The playground includes a complete custom GraphQL tokenizer, parser, and executor implemented in pure JavaScript. Every query, mutation, fragment, directive, and introspection call executes locally against in-memory resolvers defined alongside each lesson. There is no npm, no Node.js, no backend, and no API key.

How the executor works: When you click Run, the query string is tokenized into tokens (field names, braces, arguments, directives), parsed into an AST (Abstract Syntax Tree) representing the operations and selection sets, and then executed by walking the AST and calling resolver functions for each field. Aliases rename response keys, variables replace {kind:'variable'} nodes, @include and @skip directives gate field inclusion, fragment spreads expand into inline selection sets, and inline fragments match on __typename for union types. The result is the familiar { data: {...} } JSON response rendered with syntax highlighting in the response panel.

The 28-lesson curriculum spans 12 chapters and takes you from your first query to production concerns. Your First Query starts with field selection — the core idea that GraphQL returns only the fields you ask for — and then covers arguments for filtering and finding by ID. You immediately see that requesting { hello } returns only hello, not any other field the type might have.

Nested & Lists shows how GraphQL traverses relationships. The nested objects lesson demonstrates that resolver functions receive the parent object as their first argument — a User resolver passes the user to a Posts resolver, which filters by authorId. The aliases lesson shows how alice: user(id: "1") and bob: user(id: "2") coexist in one query response without key collisions.

Mutations introduces the mutation keyword and the pattern of returning fields from write operations. The input types lesson shows the standard input CreatePostInput { ... } pattern for grouping mutation arguments, which is cleaner than many separate top-level arguments and makes mutations reusable.

Variables covers the canonical way to parameterise queries — declare $id: ID! in the operation signature and pass {"id": "2"} as a separate JSON object. The default variables lesson shows = value syntax in declarations, so clients can omit optional variables entirely.

Fragments & Directives covers two of the most powerful query composition features. Fragments eliminate field duplication with fragment UserFields on User { id name role } and ...UserFields spreads. Directives use @include(if: $showEmail) and @skip(if: $skipRole) to let clients control response shape at query time — change the variables and re-run to see the response change.

Aliases & Meta Fields covers renaming response keys to query the same field twice, and the __typename meta field that client caches use to key entities. Filtering, Sorting & Pagination moves into real API design: filter and sort arguments, offset pagination with limit/offset, and the production-standard cursor pagination using Relay-style connections with edges, node, cursor, and pageInfo.

Enums & Interfaces constrains inputs with enum Role { ADMIN USER GUEST } and shares fields across types with interfaces, selected via inline fragments. Errors & Nullability shows how a thrown resolver lands in the top-level errors array (alongside partial data), and how ! non-null fields differ from nullable ones — including how a null bubbles up to nullify its parent.

Introspection & Tooling uses __schema to explore types at runtime, exactly as GraphiQL and Apollo Studio do. Auth & Context models how production servers authorize requests: a protected operation throws Unauthorized without a valid token, and field-level authorization hides sensitive fields like email unless an admin is calling.

Performance & Production is where the curriculum reaches pro level. The N+1 problem lesson shows how nested resolvers fire once per parent — 1 query for posts plus N for authors — and the DataLoader lesson demonstrates the batching-and-caching fix that turns 1 + N into 1 + 1. A schema design lesson covers naming, input types, nullable-by-default, connections, and evolving without versioning via @deprecated, and a final lesson gives an honest overview of subscriptions (real-time over a long-lived connection) and federation (composing many subgraphs into one supergraph), both of which need a live server beyond this sandbox.

Why Use GraphQL?

GraphQL lets the client ask for exactly the data it needs in one request, ending the over-fetching and under-fetching that plague REST. A single strongly-typed schema documents the entire API and drives editor autocomplete; one request can fetch deeply nested, related data that would take many REST round-trips; and the API evolves by adding fields and deprecating old ones, so versioned endpoints become rare. Those benefits are why GitHub, Shopify, and countless others expose GraphQL APIs — and this playground teaches not just the syntax but the production patterns (pagination, authorization, N+1/DataLoader) that separate a beginner from a professional. Pair it with the JavaScript Playground for language fundamentals and the REST API Builder to compare the request/response model with REST.