GraphQL Playground

📣 Query your server with Apollo Sandbox

Apollo Sandbox provides a special instance of our Explorer IDE that you can use for local development without an Apollo account.

Launch Sandbox

Sandbox automatically attempts to connect to a GraphQL server running at http://localhost:4000. Use the box in the top-left to change this URL to any local or remote GraphQL endpoint that's reachable by your browser.

Learn more about Sandbox.

About GraphQL Playground

⚠️ Apollo Server 2's GraphQL playground feature is officially end-of-life as of 31 December 2022 and will no longer receive updates of any kind.

Learn more about this deprecation and end-of-life.

GraphQL Playground is a graphical, interactive, in-browser GraphQL IDE, created by Prisma and based on GraphiQL.

In development, Apollo Server enables GraphQL Playground on the same URL as the GraphQL server itself (e.g. http://localhost:4000/graphql) and automatically serves the GUI to web browsers. When NODE_ENV is set to production, GraphQL Playground (as well as introspection) is disabled as a production best-practice.

Configuring Playground

The Apollo Server constructor contains the ability to configure GraphQL Playground with the playground configuration option. The options can be found on GraphQL Playground's documentation.

1new ApolloServer({
2typeDefs,
3resolvers,
4playground: {
5  settings: {
6    'editor.theme': 'light',
7  },
8  tabs: [
9    {
10      endpoint,
11      query: defaultQuery,
12    },
13  ],
14},
15});

Enabling GraphQL Playground in production

To enable GraphQL Playground in production, introspection and the playground can be enabled explicitly in the following manner.

1const { ApolloServer } = require('apollo-server');
2const { typeDefs, resolvers } = require('./schema');
3
4const server = new ApolloServer({
5  typeDefs,
6  resolvers,
7  introspection: true,
8  playground: true,
9});
10
11
12server.listen().then(({ url }) => {
13  console.log(`🚀 Server ready at ${url}`);
14});