/
Launch Apollo Studio

GraphQL Playground

Visually explore Apollo Server


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.

GraphQL Playground

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.

new ApolloServer({
typeDefs,
resolvers,
playground: {
  settings: {
    'editor.theme': 'light',
  },
  tabs: [
    {
      endpoint,
      query: defaultQuery,
    },
  ],
},
});

Enabling GraphQL Playground in production

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

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

const server = new ApolloServer({
  typeDefs,
  resolvers,
  introspection: true,  playground: true,});


server.listen().then(({ url }) => {
  console.log(`🚀 Server ready at ${url}`);
});
Edit on GitHub