Upgrade GraphiQL setup, support more options

package.json

@@ -94,13 +94,13 @@
   "pnpm": {
     "patchedDependencies": {
       "@changesets/assemble-release-plan@5.2.1": "patches/@changesets__assemble-release-plan@5.2.1.patch",
-      "@graphiql/react@0.13.3": "patches/@graphiql__react@0.13.3.patch"
+      "@graphiql/react@0.20.4": "patches/@graphiql__react@0.20.4.patch"
     },
     "overrides": {
-      "graphql": "16.6.0",
+      "graphql": "16.8.1",
       "@envelop/core": "4.0.0",
       "@changesets/assemble-release-plan": "5.2.1",
-      "@types/react": "18.2.8"
+      "@types/react": "18.2.55"
     }
   }
 }

packages/graphiql/package.json

@@ -33,21 +33,21 @@
     "start": "vite"
   },
   "dependencies": {
-    "@graphiql/plugin-explorer": "^0.1.4",
-    "@graphiql/toolkit": "0.8.4",
-    "@graphql-tools/url-loader": "8.0.1",
-    "graphiql": "2.0.7",
-    "graphql": "16.6.0",
+    "@graphiql/plugin-explorer": "^1.0.3",
+    "@graphiql/toolkit": "0.9.1",
+    "@graphql-tools/url-loader": "8.0.2",
+    "graphiql": "3.1.1",
+    "graphql": "16.8.1",
     "json-bigint-patch": "0.0.8",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "use-url-search-params": "2.5.1"
   },
   "devDependencies": {
-    "@types/react": "18.2.8",
-    "@types/react-dom": "18.2.4",
-    "@vitejs/plugin-react": "4.0.0",
-    "vite": "4.3.9"
+    "@types/react": "18.2.55",
+    "@types/react-dom": "18.2.19",
+    "@vitejs/plugin-react": "4.2.1",
+    "vite": "5.1.5"
   },
   "sideEffects": false,
   "bob": false

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' }}>

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: {

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
    */

patches/@graphiql__react@0.20.4.patch

@@ -0,0 +1,22 @@
+diff --git a/src/editor/tabs.ts b/src/editor/tabs.ts
+index b9110dd513589978b1f8c16a525e9cf5ccc9bf52..aa875009c15c468ed057f1450cc6a0a7e215e4d4 100644
+--- a/src/editor/tabs.ts
++++ b/src/editor/tabs.ts
+@@ -188,6 +188,7 @@ function hasStringOrNullKey(obj: Record<string, any>, key: string) {
+   return key in obj && (typeof obj[key] === 'string' || obj[key] === null);
+ }
+
++window.g = {};
+ export function useSynchronizeActiveTabValues({
+   queryEditor,
+   variableEditor,
+@@ -199,6 +200,9 @@ export function useSynchronizeActiveTabValues({
+   headerEditor: CodeMirrorEditor | null;
+   responseEditor: CodeMirrorEditor | null;
+ }) {
++  window.g.resultComponent = {
++     viewer: responseEditor,
++  };
+   return useCallback<(state: TabsState) => TabsState>(
+     state => {
+       const query = queryEditor?.getValue() ?? null;