Merge pull request #21 from henrikwirth/feature/code-exporter

Adds Code-Exporter to WPGraphiQL
wp-graphql · Oct 14, 2019 · f88a51f · f88a51f
2 parents 7c08302 + 69c2619
commit f88a51f
Show file tree

Hide file tree

Showing 15 changed files with 143 additions and 15 deletions.
diff --git a/assets/app/build/asset-manifest.json b/assets/app/build/asset-manifest.json
@@ -1,8 +1,8 @@
 {
-  "main.css": "static/css/main.e7f7b683.css",
-  "main.css.map": "static/css/main.e7f7b683.css.map",
-  "main.js": "static/js/main.082a1d43.js",
-  "main.js.map": "static/js/main.082a1d43.js.map",
+  "main.css": "static/css/main.aafb6422.css",
+  "main.css.map": "static/css/main.aafb6422.css.map",
+  "main.js": "static/js/main.fe7dc498.js",
+  "main.js.map": "static/js/main.fe7dc498.js.map",
   "static/media/GraphQLLanguageService.js.flow": "static/media/GraphQLLanguageService.js.5ab204b9.flow",
   "static/media/autocompleteUtils.js.flow": "static/media/autocompleteUtils.js.4ce7ba19.flow",
   "static/media/getAutocompleteSuggestions.js.flow": "static/media/getAutocompleteSuggestions.js.7f98f032.flow",

diff --git a/assets/app/build/index.html b/assets/app/build/index.html
@@ -1 +1 @@
-<head><link href="/static/css/main.e7f7b683.css" rel="stylesheet"></head><script type="text/javascript" src="/static/js/main.082a1d43.js"></script>
+<head><link href="/static/css/main.aafb6422.css" rel="stylesheet"></head><script type="text/javascript" src="/static/js/main.fe7dc498.js"></script>
diff --git a/assets/app/build/service-worker.js b/assets/app/build/service-worker.js
diff --git a/...ts/app/build/static/css/main.e7f7b683.css → ...ts/app/build/static/css/main.aafb6422.css b/...ts/app/build/static/css/main.e7f7b683.css → ...ts/app/build/static/css/main.aafb6422.css
diff --git a/assets/app/build/static/css/main.aafb6422.css.map b/assets/app/build/static/css/main.aafb6422.css.map
diff --git a/assets/app/build/static/css/main.e7f7b683.css.map b/assets/app/build/static/css/main.e7f7b683.css.map
diff --git a/assets/app/build/static/js/main.082a1d43.js b/assets/app/build/static/js/main.082a1d43.js
diff --git a/assets/app/build/static/js/main.082a1d43.js.map b/assets/app/build/static/js/main.082a1d43.js.map
diff --git a/assets/app/build/static/js/main.fe7dc498.js b/assets/app/build/static/js/main.fe7dc498.js
diff --git a/assets/app/build/static/js/main.fe7dc498.js.map b/assets/app/build/static/js/main.fe7dc498.js.map
diff --git a/assets/app/package-lock.json b/assets/app/package-lock.json
diff --git a/assets/app/package.json b/assets/app/package.json
@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "graphiql": "^0.13.2",
+    "graphiql-code-exporter": "^2.0.5",
     "graphiql-explorer": "^0.4.3",
     "graphql": "^14.4.2",
     "react": "^16.8.6",

diff --git a/assets/app/src/App.js b/assets/app/src/App.js
@@ -2,15 +2,17 @@ import React from 'react';
 
 import GraphiQL from "graphiql"
 import GraphiQLExplorer from "graphiql-explorer"
+import CodeExporter from "graphiql-code-exporter"
 import {getIntrospectionQuery, buildClientSchema, parse, print} from "graphql"
-
 import "whatwg-fetch"
+import snippets from "./snippets"
 
 /**
  * Style the app
  */
 import 'graphiql/graphiql.css';
 import './app.css';
+import "graphiql-code-exporter/CodeExporter.css"
 
 const parameters = {}
 
@@ -154,12 +156,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() {
@@ -284,9 +296,31 @@ 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>
@@ -325,8 +359,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/assets/app/src/snippets.js b/assets/app/src/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: `Gatsby`,
+	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: `Gatsby`,
+	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: `Gatsby`,
+	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/assets/app/yarn.lock b/assets/app/yarn.lock
@@ -1909,7 +1909,7 @@ copy-descriptor@^0.1.0:
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
   integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
 
-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==
@@ -3454,6 +3454,13 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.1.9:
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.1.tgz#1c1f0c364882c868f5bff6512146328336a11b1d"
   integrity sha512-b9usnbDGnD928gJB3LrCmxoibr3VE4U2SMo5PBuBnokWyDADTqDPXg4YpwKF1trpH+UbGp7QLicO3+aWEy0+mw==
 
+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"
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<head><link href="/static/css/main.e7f7b683.css" rel="stylesheet"></head><script type="text/javascript" src="/static/js/main.082a1d43.js"></script>
		<head><link href="/static/css/main.aafb6422.css" rel="stylesheet"></head><script type="text/javascript" src="/static/js/main.fe7dc498.js"></script>