integrate into example

graphql · Sep 7, 2022 · 7bc8b1a · 7bc8b1a
1 parent 74678f8
commit 7bc8b1a
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 25 deletions.
diff --git a/examples/graphiql-webpack/package.json b/examples/graphiql-webpack/package.json
@@ -9,11 +9,14 @@
     "start": "cross-env NODE_ENV=development webpack-dev-server"
   },
   "dependencies": {
+    "@graphiql/plugin-code-exporter": "^0.0.1",
+    "@graphiql/plugin-explorer": "^0.1.3",
     "@graphiql/toolkit": "^0.7.3",
     "graphiql": "^2.0.6",
     "graphql": "^16.4.0",
     "graphql-ws": "^5.5.5",
-    "react": "^17.0.2"
+    "react": "^17.0.2",
+    "regenerator-runtime": "^0.13.9"
   },
   "devDependencies": {
     "@babel/plugin-proposal-class-properties": "^7.8.3",

diff --git a/examples/graphiql-webpack/src/index.jsx b/examples/graphiql-webpack/src/index.jsx
@@ -1,34 +1,55 @@
-import React from 'react';
+import 'regenerator-runtime/runtime.js';
+
+import * as React from 'react';
 import { render } from 'react-dom';
 import GraphiQL from 'graphiql';
+import snippets from 'graphiql-code-exporter/lib/snippets';
+import { useExplorerPlugin } from '@graphiql/plugin-explorer';
+import { useExporterPlugin } from '@graphiql/plugin-code-exporter';
+
 import 'graphiql/graphiql.css';
+import '@graphiql/plugin-explorer/dist/style.css';
 
 const Logo = () => <span>My Corp</span>;
 
 // See GraphiQL Readme - Advanced Usage section for more examples like this
 GraphiQL.Logo = Logo;
 
-const App = () => (
-  <GraphiQL
-    style={{ height: '100vh' }}
-    headerEditorEnabled
-    fetcher={async (graphQLParams, options) => {
-      const data = await fetch(
-        'https://swapi-graphql.netlify.app/.netlify/functions/index',
-        {
-          method: 'POST',
-          headers: {
-            Accept: 'application/json',
-            'Content-Type': 'application/json',
-            ...options.headers,
+const App = () => {
+  const [query, setQuery] = React.useState('');
+  const explorerPlugin = useExplorerPlugin({
+    query,
+    onEdit: setQuery,
+  });
+  const exporterPlugin = useExporterPlugin({
+    query,
+    snippets,
+  });
+
+  return (
+    <GraphiQL
+      style={{ height: '100vh' }}
+      query={query}
+      onEditQuery={setQuery}
+      plugins={[explorerPlugin, exporterPlugin]}
+      fetcher={async (graphQLParams, options) => {
+        const data = await fetch(
+          'https://swapi-graphql.netlify.app/.netlify/functions/index',
+          {
+            method: 'POST',
+            headers: {
+              Accept: 'application/json',
+              'Content-Type': 'application/json',
+              ...options.headers,
+            },
+            body: JSON.stringify(graphQLParams),
+            credentials: 'same-origin',
           },
-          body: JSON.stringify(graphQLParams),
-          credentials: 'same-origin',
-        },
-      );
-      return data.json().catch(() => data.text());
-    }}
-  />
-);
+        );
+        return data.json().catch(() => data.text());
+      }}
+    />
+  );
+};
 
 render(<App />, document.getElementById('root'));
diff --git a/packages/graphiql-plugin-code-exporter/package.json b/packages/graphiql-plugin-code-exporter/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@graphiql/plugin-code-exporter",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/graphql/graphiql",

diff --git a/packages/graphiql-plugin-code-exporter/src/index.tsx b/packages/graphiql-plugin-code-exporter/src/index.tsx
@@ -11,7 +11,7 @@ function ExporterPlugin(props: GraphiQLCodeExporterProps) {
   return <GraphiQLCodeExporter {...props} />;
 }
 
-export function useExplorerPlugin(props: GraphiQLCodeExporterProps) {
+export function useExporterPlugin(props: GraphiQLCodeExporterProps) {
   const propsRef = useRef(props);
   propsRef.current = props;
   return useMemo<GraphiQLPlugin>(

diff --git a/yarn.lock b/yarn.lock
@@ -15551,6 +15551,11 @@ regenerator-runtime@^0.13.4:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz#cac2dacc8a1ea675feaabaeb8ae833898ae46f55"
   integrity sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==
 
+regenerator-runtime@^0.13.9:
+  version "0.13.9"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"
+  integrity sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==
+
 regenerator-transform@^0.14.2:
   version "0.14.5"
   resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.14.5.tgz#c98da154683671c9c4dcb16ece736517e1b7feb4"