GraphQL Playground

query GetUserWithPosts {
  user(id: "42") {
    id
    name
    email
    role
    posts(first: 3) {
      edges {
        node {
          id
          title
          publishedAt
          tags
        }
      }
      pageInfo {
        hasNextPage
        endCursor
      }
    }
  }
}

{
  "data": {
    "user": {
      "id": "42",
      "name": "Dana Chen",
      "email": "dana@example.com",
      "role": "ADMIN",
      "posts": {
        "edges": [
          {
            "node": {
              "id": "101",
              "title": "Cursor Pagination",
              "publishedAt": "2025-01-15",
              "tags": ["graphql", "pagination"]
            }
          }
        ],
        "pageInfo": {
          "hasNextPage": true,
          "endCursor": "Y3Vyc29yMTAx"
        }
      }
    }
  }
}

How to Use a GraphQL Playground

A GraphQL playground is an in-browser IDE for writing and executing queries against a GraphQL endpoint. Most playgrounds provide:

Schema exploration — browse available types, fields, and their descriptions
Autocompletion — type-aware suggestions as you write queries
Query variables — a panel for passing variables as JSON
HTTP headers — set authorization tokens and other headers
History — access previously executed queries

Point the playground at your GraphQL endpoint URL (typically /graphql), write a query in the left panel, and press the execute button. The response appears on the right.

How to Use a GraphQL Playground

External Playgrounds

Apollo Studio Explorer

GraphiQL