Join us for GraphQL Summit, October 10-12 in San Diego. Use promo code ODYSSEY for $400 off your pass.
Docs
Launch GraphOS Studio
Apollo Server 2 is officially deprecated, with end-of-life scheduled for 22 October 2023. Additionally, certain features are end-of-life as of 31 December 2023. Learn more about these deprecations and upgrading.

GraphQL Playground

Visually explore Apollo Server


📣 Query your server with Apollo Sandbox

Apollo Sandbox provides a special instance of our 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 ) 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, 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}`);
});
Previous
Integration testing
Next
Caching
Edit on GitHubEditForumsDiscord