feat(gatsby): GraphQL playground

docs/docs/using-graphql-playground.md

@@ -0,0 +1,23 @@
+---
+title: Using the GraphQl Playground
+---
+
+## Intro
+
+In this page we want to introduce you to an alternative to the current IDE for your GraphQl queries: The [Prisma Playground](https://github.com/prisma/graphql-playground).
+
+## What is The Prisma Playground?
+
+The Playground is a way for you to interact with the data your sources and plugins add as schemas. You will be interacting with this data a lot and the Playground will help you greatly with exploring this data.
+
+## Accessing the Playground
+
+As this is an experimental feature, you need to access it by adding an environmental variable, you need to add `GATSBY_GRAPHQL_IDE` to your `develop` script, like this:
+
+```
+"develop": "GATSBY_GRAPHQL_IDE=playground gatsby develop",
+```
+
+You can then access it, when the development server is running on `https://localhost:8000/___graphql`
+
+![An image pointing out where to find the GraphQl schema](images/playground-schema.png)

packages/gatsby/package.json

@@ -69,6 +69,7 @@
     "gatsby-react-router-scroll": "^2.0.2",
     "glob": "^7.1.1",
     "graphql": "^0.13.2",
+    "graphql-playground-middleware-express": "^1.7.10",
     "graphql-relay": "^0.5.5",
     "graphql-skip-limit": "^2.0.4",
     "graphql-tools": "^3.0.4",

packages/gatsby/src/commands/develop.js

@@ -7,6 +7,8 @@ const openurl = require(`better-opn`)
 const chokidar = require(`chokidar`)
 const express = require(`express`)
 const graphqlHTTP = require(`express-graphql`)
+const graphqlPlayground = require(`graphql-playground-middleware-express`)
+  .default
 const parsePath = require(`parse-filepath`)
 const request = require(`request`)
 const rl = require(`readline`)
@@ -92,11 +94,21 @@ async function startServer(program) {
       heartbeat: 10 * 1000,
     })
   )
+
+  if (process.env.GATSBY_GRAPHQL_IDE === `playground`) {
+    app.get(
+      `/___graphql`,
+      graphqlPlayground({
+        endpoint: `/___graphql`,
+      }),
+      () => {}
+    )
+  }
   app.use(
     `/___graphql`,
     graphqlHTTP({
       schema: store.getState().schema,
-      graphiql: true,
+      graphiql: process.env.GATSBY_GRAPHQL_IDE === `playground` ? false : true,
     })
   )
 
@@ -361,7 +373,11 @@ module.exports = async (program: any) => {
 
     console.log()
     console.log(
-      `View GraphiQL, an in-browser IDE, to explore your site's data and schema`
+      `View ${
+        process.env.GATSBY_GRAPHQL_IDE === `playground`
+          ? `the GraphQL Playground`
+          : `GraphiQL`
+      }, an in-browser IDE, to explore your site's data and schema`
     )
     console.log()
     console.log(`  ${urls.localUrlForTerminal}___graphql`)

yarn.lock

@@ -8912,6 +8912,18 @@ graphql-import@^0.7.1:
     lodash "^4.17.4"
     resolve-from "^4.0.0"
 
+graphql-playground-html@1.6.11:
+  version "1.6.11"
+  resolved "https://registry.yarnpkg.com/graphql-playground-html/-/graphql-playground-html-1.6.11.tgz#a4e40b3d43527270722cacf7a96811c7806eb22a"
+  integrity sha512-KBeZH7irqW0GB08AfryknQ4c0BPDGxJSvqJ+DYmGzbhyaQTUnocMv+5TfpaU+SUY8lnS7OGvEIHo/SIYyrjuWg==
+
+graphql-playground-middleware-express@^1.7.10:
+  version "1.7.10"
+  resolved "https://registry.yarnpkg.com/graphql-playground-middleware-express/-/graphql-playground-middleware-express-1.7.10.tgz#8bc154e988c288e06cc350e918853aad25fbcd7d"
+  integrity sha512-yzL5gwelHWBNE6X0rJTEBotJmVGa107j0BBiLqkaFHrGs+tT19lYFQtQowQs/mwTVt5sb/e7/HroXQPIBERhzg==
+  dependencies:
+    graphql-playground-html "1.6.11"
+
 graphql-relay@^0.5.5:
   version "0.5.5"
   resolved "https://registry.yarnpkg.com/graphql-relay/-/graphql-relay-0.5.5.tgz#d6815e6edd618e878d5d921c13fc66033ec867e2"