[graphiql] upgrade graphiql deps (#3279)

Co-authored-by: Blake Gentry <blakesgentry@gmail.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
dotansimha · May 17, 2024 · 5a40b2b · 5a40b2b
1 parent 8663e78
commit 5a40b2b
Show file tree

Hide file tree

Showing 10 changed files with 1,776 additions and 1,174 deletions.
diff --git a/.changeset/@graphql-yoga_graphiql-3279-dependencies.md b/.changeset/@graphql-yoga_graphiql-3279-dependencies.md
@@ -0,0 +1,16 @@
+---
+'@graphql-yoga/graphiql': patch
+---
+dependencies updates:
+  - Updated dependency [`@graphiql/plugin-explorer@^1.0.3`
+    ↗︎](https://www.npmjs.com/package/@graphiql/plugin-explorer/v/1.0.3) (from `^0.1.4`, in
+    `dependencies`)
+  - Updated dependency [`@graphiql/toolkit@0.9.1`
+    ↗︎](https://www.npmjs.com/package/@graphiql/toolkit/v/0.9.1) (from `0.8.4`, in `dependencies`)
+  - Updated dependency [`@graphql-tools/url-loader@8.0.2`
+    ↗︎](https://www.npmjs.com/package/@graphql-tools/url-loader/v/8.0.2) (from `8.0.1`, in
+    `dependencies`)
+  - Updated dependency [`graphiql@3.1.1` ↗︎](https://www.npmjs.com/package/graphiql/v/3.1.1) (from
+    `2.0.7`, in `dependencies`)
+  - Updated dependency [`graphql@16.8.1` ↗︎](https://www.npmjs.com/package/graphql/v/16.8.1) (from
+    `16.6.0`, in `dependencies`)
diff --git a/package.json b/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"
     }
   }
 }
diff --git a/packages/graphiql/package.json b/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",
+    "@types/react": "18.2.55",
+    "@types/react-dom": "18.2.19",
     "@vitejs/plugin-react": "4.2.1",
-    "vite": "5.2.7"
+    "vite": "5.1.7"
   },
   "sideEffects": false,
   "bob": false

diff --git a/packages/graphiql/src/YogaGraphiQL.tsx b/packages/graphiql/src/YogaGraphiQL.tsx
@@ -1,14 +1,14 @@
-import 'json-bigint-patch';
-import React, { useMemo, useState } from 'react';
+import { explorerPlugin } from '@graphiql/plugin-explorer';
+import '@graphiql/plugin-explorer/dist/style.css';
 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 { Fetcher, FetcherOpts, FetcherParams } from '@graphiql/toolkit';
 import { LoadFromUrlOptions, SubscriptionProtocol, UrlLoader } from '@graphql-tools/url-loader';
-import { YogaLogo } from './YogaLogo';
 import 'graphiql/graphiql.css';
-import '@graphiql/plugin-explorer/dist/style.css';
+import { DocumentNode, Kind, parse } from 'graphql';
+import 'json-bigint-patch';
+import React, { useMemo, useState } from 'react';
+import { useUrlSearchParams } from 'use-url-search-params';
+import { YogaLogo } from './YogaLogo';
 import './styles.css';
 
 const getOperationWithFragments = (
@@ -134,30 +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}
+        shouldPersistHeaders={props.shouldPersistHeaders ?? true}
       >
         <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,7 +12,7 @@ export default defineConfig({
   server: {
     port: 4001,
     proxy: {
-      '/graphql': 'http://localhost:4000',
+      '/graphql': 'http://localhost:4000/graphql',
     },
   },
   define: