GraphQL Playground
Visually explore Apollo Server
📣 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.
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.
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.
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.
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}`);});