hiro/apollo-server
1
0
Fork 0
mirror of https://github.com/vale981/apollo-server synced 2025-03-06 02:01:40 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

update playground to include #1319

Browse source
This commit is contained in:
Evans Hauser 2018-07-13 10:43:38 -07:00
parent 2775eebc54
commit fbf6c6b226
No known key found for this signature in database
GPG key ID: 88AF586817F52EEC
2 changed files with 26 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
docs/source/features/graphql-playground.md
View file

@ -11,38 +11,45 @@ In development, Apollo Server enables GraphQL Playground on the same URL as the
![GraphQL Playground](../images/graphql-playground.png)
</div>
## Enabling GraphQL Playground in production
## Configuring Playground
To enable GraphQL Playground in production, an integration package must be installed to provide more control over the middlewares used. The following example uses the express integration:
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](https://github.com/prismagraphql/graphql-playground/#usage)
```bash
npm install --save apollo-server-express@rc graphql
```js
new ApolloServer({
typeDefs,
resolvers,
playground: {
settings: {
'editor.theme': 'light',
},
tabs: [
{
endpoint,
query: defaultQuery,
},
],
},
});
```
Introspection and the GUI can be enabled explicitly in the following manner.
## Enabling GraphQL Playground in production
```js line=8,16
const { ApolloServer } = require('apollo-server-express');
const express = require('express');
To enable GraphQL Playground in production, introspection and the playground can be enabled explicitly in the following manner.
```js line=7-8
const { ApolloServer } = require('apollo-server');
const { typeDefs, resolvers } = require('./schema');
const server = new ApolloServer({
typeDefs,
resolvers,
introspection: true,
playground: true,
});
const app = express();
// `gui` accepts a GraphQL Playground configuration
server.applyMiddleware({
app,
gui: true,
server.listen().then(({ url }) => {
console.log(`🚀 Server ready at ${url}`);
});
app.listen({ port: 4000 }, () =>
console.log(`🚀 Server ready at http://localhost:4000${server.graphqlPath}`),
);
```
> Note: When using the `apollo-server-express` package, the `apollo-server` package can be uninstalled.

53
docs/source/features/playground.md
View file

@ -1,53 +0,0 @@
---
title: GraphQL Playground
description: Visually exploring a Apollo Server
---
[GraphQL Playground](https://github.com/prismagraphql/graphql-playground) is a graphical interactive in-browser GraphQL IDE, created by [Prisma](https://www.prisma.io/), based on [GraphiQL](https://github.com/graphql/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.
<div align="center">
![GraphQL Playground](../images/playground.png)
</div>
## 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](https://github.com/prismagraphql/graphql-playground/#usage)
```js
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.
```js line=7-8
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}`);
});
```