feat(gatsby): use graphiql-explorer

e2e-tests/development-runtime/cypress/integration/functionality/graphql-endpoint.js

@@ -1,10 +1,30 @@
 const endpoints = [`/___graphql`, `/_graphql`, `/___graphiql`]
 
+const testQueryString = `?query=%7B%0A%20%20site%20%7B%0A%20%20%20%20siteMetadata%20%7B%0A%20%20%20%20%20%20title%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D`
+
 describe(`The GraphQL endpoint`, () => {
   endpoints.forEach(endpoint => {
     it(`Should appear on ${endpoint}`, () => {
       cy.visit(endpoint)
       cy.title().should(`eq`, `GraphiQL`)
     })
+
+    it(`Should execute queries from query string on ${endpoint}`, () => {
+      // prefill query from query string
+      cy.visit(endpoint + testQueryString)
+      cy.get(`.execute-button`).click()
+      cy.get(`.result-window .CodeMirror-code`).contains(
+        `Gatsby Default Starter`
+      )
+    })
+
+    it(`Should execute queries created with explorer on ${endpoint}`, () => {
+      // hack to show (almost) empty editor instead of
+      cy.visit(endpoint + `?query=%20`)
+      cy.get(`[data-field-name="site"]`).click()
+      cy.get(`[data-field-name="port"]`).click()
+      cy.get(`.execute-button`).click()
+      cy.get(`.result-window .CodeMirror-code`).contains(`8000`)
+    })
   })
 })

packages/gatsby-graphiql-explorer/.gitignore

@@ -0,0 +1,3 @@
+/*.js
+/*.html
+yarn.lock

packages/gatsby-graphiql-explorer/.npmignore

@@ -0,0 +1,34 @@
+# Logs
+logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directory
+# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
+node_modules
+*.un~
+yarn.lock
+src
+flow-typed
+coverage
+decls
+examples

packages/gatsby-graphiql-explorer/README.md

@@ -0,0 +1,16 @@
+# gatsby-graphiql-explorer
+
+A package to extend the default [GraphiQL][graphiql] IDE with useful features for Gatsby users.
+
+\_Note: accessible at http://localhost:8000/___graphql after running `gatsby develop`\_
+
+![Gatsby GraphiQL Explorer](./assets/gatsby-graphiql-explorer.png)
+
+## Features
+
+- Offline support - for when you need to work on your excellent Gatsby app on a plane, train, or elsewhere off the grid
+- [GraphiQL Explorer][graphiql-explorer] - an interactive explorer plugin to visually create and interact with the GraphQL schema
+- _All_ the expected features you know and love from [GraphiQL][graphiql]
+
+[graphiql]: https://github.com/graphql/graphiql
+[graphiql-explorer]: https://github.com/OneGraph/graphiql-explorer

packages/gatsby-graphiql-explorer/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "gatsby-graphiql-explorer",
+  "version": "0.0.1",
+  "description": "GraphiQL IDE with custom features for Gatsby users",
+  "main": "index.js",
+  "scripts": {
+    "build:app": "webpack --config ./src/app/webpack.config.js",
+    "build:babel": "babel src/index.js --out-dir . --ignore **/__tests__",
+    "build": "npm-run-all --parallel build:app build:babel",
+    "prepare": "cross-env NODE_ENV=production npm run build",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "watch:app": "npm run build:app -- --watch",
+    "watch:babel": "npm run build:babel -- --watch",
+    "watch": "npm-run-all --parallel watch:app watch:babel"
+  },
+  "keywords": [
+    "gatsby"
+  ],
+  "author": "",
+  "bugs": {
+    "url": "https://github.com/gatsbyjs/gatsby/issues"
+  },
+  "homepage": "https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-graphiql-explorer#readme",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/gatsbyjs/gatsby.git"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@babel/runtime": "^7.0.0",
+    "graphiql": "^0.13.0",
+    "graphiql-explorer": "^0.3.7",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "whatwg-fetch": "^3.0.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.0.0",
+    "@babel/core": "^7.0.0",
+    "@babel/plugin-proposal-class-properties": "^7.0.0",
+    "@babel/plugin-transform-runtime": "^7.0.0",
+    "@babel/preset-env": "^7.4.1",
+    "@babel/preset-react": "^7.0.0",
+    "babel-loader": "^8.0.0",
+    "babel-preset-gatsby-package": "^0.1.4",
+    "cross-env": "^5.0.5",
+    "css-loader": "^1.0.0",
+    "html-webpack-plugin": "^3.2.0",
+    "npm-run-all": "4.1.5",
+    "style-loader": "^0.21.0",
+    "webpack-cli": "^3.3.2"
+  }
+}

packages/gatsby-graphiql-explorer/src/app/app.css

@@ -0,0 +1,19 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+    monospace;
+}
+
+.graphiql-container {
+  height: 100vh;
+  width: 100vw;
+}