GraphQL Playground

GraphQL Playground

GraphQL Playground is an interactive environment for exploring and testing GraphQL APIs. It's like a sandbox where you can write queries, see results, and explore your schema.

Apollo Server includes a built-in playground at your server's URL.

Using Apollo Sandbox

When you start Apollo Server, you can access the sandbox at http://localhost:4000. It provides:

Query Editor: Write and execute queries with syntax highlighting.

Schema Explorer: Browse all types, queries, and mutations.

Documentation: Auto-generated docs from your schema.

Variables Panel: Set query variables easily.

// Try this in the playground
query {
  users {
    name
    email
    posts {
      title
    }
  }
}

// Set variables in the Variables panel
{
  "id": "1"
}

The playground validates your queries in real-time and shows errors as you type.

Schema Documentation

The playground auto-generates documentation from your schema. Click the Schema tab to explore:

// Your schema
type User {
  id: ID!
  name: String!
  email: String!
  posts: [Post!]!
}

type Query {
  user(id: ID!): User
  users: [User!]!
}

// The playground will show:
// - All available types
// - Required vs optional fields
// - Argument types
// - Field descriptions (if you add them)

You can click on any type to see its fields and related types.

Query History

The playground saves your query history so you can revisit previous queries. This is helpful when you're debugging or exploring an API.

// Previous queries are saved automatically
// You can pin important queries
// Share queries via URL
// Export queries as files

Query history is stored locally in your browser.

Configuring the Playground

You can customize the playground behavior in your server configuration:

const server = new ApolloServer({
  typeDefs,
  resolvers,
  introspection: true, // Enable schema introspection
  playground: true,    // Enable playground (default in dev)
  
  // Custom playground settings
  playground: {
    settings: {
      'request.credentials': 'same-origin',
      'schema.polling.enable': false,
    },
  },
});

In production, you might want to disable the playground for security reasons.