mirror of
https://github.com/vale981/apollo-server
synced 2025-03-10 13:06:39 -04:00
11b867114e
* Add a wider diversity of `gui` options Although I know we want to remain less tied to the GraphQL Playground GUI options, we definitely want to support a wider variety of options to be passed in. This adds support for specifying partial options either statically or dynamically for the gui, which can be extended to allow for a wider array of guis than only GraphQL playground. * Add boolean option and configuration for tabs * move gui setting into ApolloServer Constructor * document playground configuration in the constructor * update playground types and fixed micro + koa integrations * change gui to playground * docs: change gui to playground * fix logic for playground creation
1.6 KiB
1.6 KiB
| title | description |
|---|---|
| GraphQL Playground | Visually exploring a Apollo Server |
GraphQL Playground is a graphical interactive in-browser GraphQL IDE, created by Prisma, based on GraphiQL. In development, Apollo Server collocates a GraphQL Playground instance with the GraphQL path. When a browser sends a request to Apollo Server, it receives GraphQL Playground. When NODE_ENV is set to production, introspection and Playground are 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 Playground in Production
To enable 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}`);
});