graphiql: support newer plugin-explorer, more options

dotansimha · Apr 8, 2024 · 2839861 · 2839861
1 parent 8d6e53b
commit 2839861
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 12 deletions.
diff --git a/packages/graphiql/src/YogaGraphiQL.tsx b/packages/graphiql/src/YogaGraphiQL.tsx
@@ -3,7 +3,7 @@ import React, { useMemo, useState } from 'react';
 import { GraphiQL, GraphiQLInterface, GraphiQLProps, GraphiQLProvider } from 'graphiql';
 import { DocumentNode, Kind, parse } from 'graphql';
 import { useUrlSearchParams } from 'use-url-search-params';
-import { useExplorerPlugin } from '@graphiql/plugin-explorer';
+import { explorerPlugin } from '@graphiql/plugin-explorer';
 import { Fetcher, FetcherOpts, FetcherParams } from '@graphiql/toolkit';
 import { LoadFromUrlOptions, SubscriptionProtocol, UrlLoader } from '@graphql-tools/url-loader';
 import { YogaLogo } from './YogaLogo';
@@ -134,29 +134,30 @@ export function YogaGraphiQL(props: YogaGraphiQLProps): React.ReactElement {
   );
 
   const [query, setQuery] = useState(params.query?.toString());
-  const explorerPlugin = useExplorerPlugin({
-    query: query as string,
-    onEdit: setQuery,
+  const explorer = explorerPlugin({
     showAttribution: true,
   });
 
   return (
     <div className="graphiql-container">
       <GraphiQLProvider
-        plugins={[explorerPlugin]}
-        query={query}
+        defaultHeaders={props.defaultHeaders}
+        fetcher={fetcher}
         headers={props.headers}
+        plugins={[explorer]}
+        query={query}
         schemaDescription={true}
-        fetcher={fetcher}
+        shouldPersistHeaders={props.shouldPersistHeaders}
       >
         <GraphiQLInterface
           isHeadersEditorEnabled
           defaultEditorToolsVisibility
-          onEditQuery={query =>
+          onEditQuery={query => {
             setParams({
               query,
-            })
-          }
+            });
+            setQuery(query);
+          }}
         >
           <GraphiQL.Logo>
             <div style={{ display: 'flex', alignItems: 'center' }}>

diff --git a/packages/graphiql/vite.config.ts b/packages/graphiql/vite.config.ts
@@ -12,11 +12,11 @@ export default defineConfig({
   server: {
     port: 4001,
     proxy: {
-      '/graphql': 'http://localhost:4000',
+      '/graphql': 'http://localhost:8080/graphql',
     },
   },
   define: {
-    'process.env.NODE_ENV': '"production"',
+    // 'process.env.NODE_ENV': '"production"',
   },
   build: {
     lib: {

diff --git a/packages/graphql-yoga/src/plugins/use-graphiql.ts b/packages/graphql-yoga/src/plugins/use-graphiql.ts
@@ -8,19 +8,37 @@ export function shouldRenderGraphiQL({ headers, method }: Request): boolean {
   return method === 'GET' && !!headers?.get('accept')?.includes('text/html');
 }
 
+type TabDefinition = { headers?: string | null; query: string | null; variables?: string | null };
+
 export type GraphiQLOptions = {
+  /**
+   * Headers to be set when opening a new tab
+   */
+  defaultHeaders?: string;
   /**
    * An optional GraphQL string to use when no query is provided and no stored
    * query exists from a previous session.  If undefined is provided, GraphiQL
    * will use its own default query.
    */
   defaultQuery?: string;
+  /**
+   * This prop can be used to define the default set of tabs, with their
+   * queries, variables, and headers. It will be used as default only if there
+   * is no tab state persisted in storage.
+   */
+  defaultTabs?: TabDefinition[];
   /**
    * The initial headers to render inside the header editor. Defaults to `"{}"`.
    * The value should be a JSON encoded string, for example:
    * `headers: JSON.stringify({Authorization: "Bearer your-auth-key"})`
    */
   headers?: string;
+  /**
+   * This prop toggles if the contents of the headers editor are persisted in
+   * storage.
+   */
+  shouldPersistHeaders?: undefined | false | true;
+
   /**
    * More info there: https://developer.mozilla.org/en-US/docs/Web/API/Request/credentials
    */