From fbf6c6b226cd61e842c57485ee88841cf210973b Mon Sep 17 00:00:00 2001
From: Evans Hauser <evanshauser@gmail.com>
Date: Fri, 13 Jul 2018 10:43:38 -0700
Subject: [PATCH] update playground to include #1319

---
 docs/source/features/graphql-playground.md | 45 ++++++++++--------
 docs/source/features/playground.md         | 53 ----------------------
 2 files changed, 26 insertions(+), 72 deletions(-)
 delete mode 100644 docs/source/features/playground.md

diff --git a/docs/source/features/graphql-playground.md b/docs/source/features/graphql-playground.md
index 2604416d..429ecfce 100644
--- a/docs/source/features/graphql-playground.md
+++ b/docs/source/features/graphql-playground.md
@@ -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.
diff --git a/docs/source/features/playground.md b/docs/source/features/playground.md
deleted file mode 100644
index 2745f3b7..00000000
--- a/docs/source/features/playground.md
+++ /dev/null
@@ -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}`);
-});
-```