feat(gatsby-graphiql-explorer): Implement CodeExporter (gatsbyjs#17120)

* Implement CodeExporter into graphiql * Add some formatting * Added a createPages snippet * use same local storage key, as one that is being set * invert condition - we want to check if it's explicitely set to true * make createPages snippet richer, so full flow is accounted for * Generate more detailed query * Formatting * Return name as default * Return always from getFieldQuery * Use named components
waltercruz · Sep 8, 2019 · ee9ffd5 · ee9ffd5
1 parent 03173a1
commit ee9ffd5
Show file tree

Hide file tree

Showing 4 changed files with 123 additions and 2 deletions.
diff --git a/packages/gatsby-graphiql-explorer/package.json b/packages/gatsby-graphiql-explorer/package.json
@@ -42,6 +42,7 @@
     "cross-env": "^5.2.1",
     "css-loader": "^1.0.1",
     "graphiql": "^0.14.2",
+    "graphiql-code-exporter": "^2.0.5",
     "graphiql-explorer": "^0.4.3",
     "html-webpack-plugin": "^3.2.0",
     "npm-run-all": "4.1.5",

diff --git a/packages/gatsby-graphiql-explorer/src/app/app.js b/packages/gatsby-graphiql-explorer/src/app/app.js
@@ -4,11 +4,14 @@ import ReactDOM from "react-dom"
 import GraphiQL from "graphiql"
 import GraphiQLExplorer from "graphiql-explorer"
 import { getIntrospectionQuery, buildClientSchema, parse } from "graphql"
+import CodeExporter from "graphiql-code-exporter"
+import snippets from "./snippets"
 
 import "whatwg-fetch"
 
 import "graphiql/graphiql.css"
 import "./app.css"
+import "graphiql-code-exporter/CodeExporter.css"
 
 const parameters = {}
 window.location.search
@@ -142,11 +145,22 @@ const storedExplorerPaneState =
     ? window.localStorage.getItem(`graphiql:graphiqlExplorerOpen`) !== `false`
     : true
 
+const storedCodeExporterPaneState =
+  typeof parameters.codeExporterIsOpen !== `undefined`
+    ? parameters.codeExporterIsOpen === `false`
+      ? false
+      : true
+    : window.localStorage
+    ? window.localStorage.getItem(`graphiql:graphiqlCodeExporterOpen`) ===
+      `true`
+    : false
+
 class App extends React.Component {
   state = {
     schema: null,
     query: DEFAULT_QUERY,
     explorerIsOpen: storedExplorerPaneState,
+    codeExporterIsOpen: storedCodeExporterPaneState,
   }
 
   componentDidMount() {
@@ -269,8 +283,29 @@ class App extends React.Component {
     this.setState({ explorerIsOpen: newExplorerIsOpen })
   }
 
+  _handleToggleExporter = () => {
+    const newCodeExporterIsOpen = !this.state.codeExporterIsOpen
+    if (window.localStorage) {
+      window.localStorage.setItem(
+        `graphiql:graphiqlCodeExporterOpen`,
+        newCodeExporterIsOpen
+      )
+    }
+    parameters.codeExporterIsOpen = newCodeExporterIsOpen
+    updateURL()
+    this.setState({ codeExporterIsOpen: newCodeExporterIsOpen })
+  }
+
   render() {
-    const { query, schema } = this.state
+    const { query, schema, codeExporterIsOpen } = this.state
+    const codeExporter = codeExporterIsOpen ? (
+      <CodeExporter
+        hideCodeExporter={this._handleToggleExporter}
+        snippets={snippets}
+        query={query}
+        codeMirrorTheme="default"
+      />
+    ) : null
 
     return (
       <React.Fragment>
@@ -309,8 +344,14 @@ class App extends React.Component {
               label="Explorer"
               title="Toggle Explorer"
             />
+            <GraphiQL.Button
+              onClick={this._handleToggleExporter}
+              label="Code Exporter"
+              title="Toggle Code Exporter"
+            />
           </GraphiQL.Toolbar>
         </GraphiQL>
+        {codeExporter}
       </React.Fragment>
     )
   }

diff --git a/packages/gatsby-graphiql-explorer/src/app/snippets.js b/packages/gatsby-graphiql-explorer/src/app/snippets.js
@@ -0,0 +1,72 @@
+const getQuery = (arg, spaceCount) => {
+  const { operationDataList } = arg
+  const { query } = operationDataList[0]
+  const anonymousQuery = query.replace(/query\s.+{/gim, `{`)
+  return (
+    ` `.repeat(spaceCount) +
+    anonymousQuery.replace(/\n/g, `\n` + ` `.repeat(spaceCount))
+  )
+}
+
+const pageQuery = {
+  name: `Page query`,
+  language: `JavaScript`,
+  codeMirrorMode: `jsx`,
+  options: [],
+  generate: arg => `import React from "react"
+import { graphql } from "gatsby"
+
+const ComponentName = ({ data }) => <pre>{JSON.stringify(data, null, 4)}</pre>
+
+export const query = graphql\`
+${getQuery(arg, 2)}
+\`
+
+export default ComponentName
+
+`,
+}
+
+const staticHook = {
+  name: `StaticQuery hook`,
+  language: `JavaScript`,
+  codeMirrorMode: `jsx`,
+  options: [],
+  generate: arg => `import React from "react"
+import { useStaticQuery, graphql } from "gatsby"
+
+const ComponentName = () => {
+  const data = useStaticQuery(graphql\`
+${getQuery(arg, 4)}
+  \`)
+  return <pre>{JSON.stringify(data, null, 4)}</pre>
+}
+
+export default ComponentName
+
+`,
+}
+
+const staticQuery = {
+  name: `StaticQuery`,
+  language: `JavaScript`,
+  codeMirrorMode: `jsx`,
+  options: [],
+  generate: arg => `import React from "react"
+import { StaticQuery, graphql } from "gatsby"
+
+const ComponentName = () => (
+  <StaticQuery
+    query={graphql\`
+${getQuery(arg, 6)}
+    \`}
+    render={data => <pre>{JSON.stringify(data, null, 4)}</pre>}
+  ></StaticQuery>
+)
+
+export default ComponentName
+
+`,
+}
+
+export default [pageQuery, staticHook, staticQuery]
diff --git a/yarn.lock b/yarn.lock
@@ -5626,7 +5626,7 @@ copy-descriptor@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
 
-copy-to-clipboard@^3.2.0:
+copy-to-clipboard@^3.0.8, copy-to-clipboard@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.2.0.tgz#d2724a3ccbfed89706fac8a894872c979ac74467"
   integrity sha512-eOZERzvCmxS8HWzugj4Uxl8OJxa7T2k1Gi0X5qavwydHIfuSHq2dTD09LOg/XyGq4Zpb5IsR/2OJ5lbOegz78w==
@@ -9080,6 +9080,13 @@ graceful-fs@^4.0.0, graceful-fs@^4.1.10, graceful-fs@^4.1.11, graceful-fs@^4.1.1
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725"
 
+graphiql-code-exporter@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/graphiql-code-exporter/-/graphiql-code-exporter-2.0.5.tgz#763ffc70ef2518fb4ea4277d89bd5f322599ea4d"
+  integrity sha512-Sh0gU7zjQPTRjQa8XjZwsn0lDIJQ9bpbJGP9nlSKXzx+XgPQxMbm1UEK9tAejhB824PvkUnq+z7Wdx6nDtGCSg==
+  dependencies:
+    copy-to-clipboard "^3.0.8"
+
 graphiql-explorer@^0.4.3:
   version "0.4.3"
   resolved "https://registry.yarnpkg.com/graphiql-explorer/-/graphiql-explorer-0.4.3.tgz#86a60292faf96462e73530035ae84e678f27c0ea"