GraphQL Playground

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.

1
new ApolloServer({
2
typeDefs,
3
resolvers,
4
playground: {
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.

1
const { ApolloServer } = require('apollo-server');
2
const { typeDefs, resolvers } = require('./schema');
3

4
const server = new ApolloServer({
5
  typeDefs,
6
  resolvers,
7
  introspection: true,
8
  playground: true,
9
});
10

11

12
server.listen().then(({ url }) => {
13
  console.log(`🚀 Server ready at ${url}`);
14
});