graphiql 5: Ensure storage and theme store values aren't shared between GraphiQL instances. Deprecate useTheme and useStorage hooks in favour of values from useGraphiQL and useGraphiQLActions hooks (#4074)

* upd

* upd

* upd

* upd

* upd

* upd

* upd

* upd

* upd

* upd

* upd

* upd

* upd

* polish

* polish

* polish

* polish

* upd

* fix unit tests

* upd

* upd

* Update components.spec.tsx

* Update components.spec.tsx

* Update components.spec.tsx

* set timeout to 6s

* set timeout to 7s

* set timeout to 7s

* try 8

* 15?

* upd

* upd

* upd

* upd

* upd

* upd

* upd

* try use mounted to avoid hydration errors with localStorage

* try use mounted to avoid hydration errors with localStorage

* try use mounted to avoid hydration errors with localStorage

* prettier and timeout

* upd

* temporarily add `graphql-language-service` in changeset to test esm sh example

* add esm.sh file to vite `lib.entry`

* use minor semver

* add `@graphiql/react` to peerDeps for history and doc explorer

* upd

* update esm example

* prettier

* cleanup

* better changeset

* Update .changeset/cold-ads-end.md

Author: dimaMachina

.changeset/cold-ads-end.md

@@ -0,0 +1,10 @@
+---
+'@graphiql/plugin-history': minor
+'@graphiql/plugin-doc-explorer': minor
+'@graphiql/react': minor
+'graphiql': minor
+---
+
+Ensure `storage` and `theme` store values aren't shared between GraphiQL instances. Deprecate `useTheme` and `useStorage` hooks in favour of values from `useGraphiQL` and `useGraphiQLActions` hooks
+
+feat(`@graphiql/plugin-history`/`@graphiql/plugin-doc-explorer`): move `@graphiql/react` to `peerDependencies`

examples/graphiql-cdn/index.html

@@ -42,18 +42,19 @@
       {
         "imports": {
           "react": "https://esm.sh/[email protected]",
-          "react/jsx-runtime": "https://esm.sh/[email protected]/jsx-runtime",
+          "react/": "https://esm.sh/[email protected]/",
 
           "react-dom": "https://esm.sh/[email protected]",
-          "react-dom/client": "https://esm.sh/[email protected]/client",
-          "@emotion/is-prop-valid": "data:text/javascript,",
+          "react-dom/": "https://esm.sh/[email protected]/",
 
           "graphiql": "https://esm.sh/graphiql?standalone&external=react,react-dom,@graphiql/react,graphql",
+          "graphiql/": "https://esm.sh/graphiql/",
           "@graphiql/plugin-explorer": "https://esm.sh/@graphiql/plugin-explorer?standalone&external=react,@graphiql/react,graphql",
-          "@graphiql/react": "https://esm.sh/@graphiql/react?standalone&external=react,react-dom,graphql,@emotion/is-prop-valid",
+          "@graphiql/react": "https://esm.sh/@graphiql/react?standalone&external=react,react-dom,graphql,@graphiql/toolkit,@emotion/is-prop-valid",
 
           "@graphiql/toolkit": "https://esm.sh/@graphiql/toolkit?standalone&external=graphql",
-          "graphql": "https://esm.sh/[email protected]"
+          "graphql": "https://esm.sh/[email protected]",
+          "@emotion/is-prop-valid": "data:text/javascript,"
         }
       }
     </script>
@@ -63,23 +64,7 @@
       import { GraphiQL, HISTORY_PLUGIN } from 'graphiql';
       import { createGraphiQLFetcher } from '@graphiql/toolkit';
       import { explorerPlugin } from '@graphiql/plugin-explorer';
-
-      import createJSONWorker from 'https://esm.sh/monaco-editor/esm/vs/language/json/json.worker.js?worker';
-      import createGraphQLWorker from 'https://esm.sh/monaco-graphql/esm/graphql.worker.js?worker';
-      import createEditorWorker from 'https://esm.sh/monaco-editor/esm/vs/editor/editor.worker.js?worker';
-
-      globalThis.MonacoEnvironment = {
-        getWorker(_workerId, label) {
-          console.info('MonacoEnvironment.getWorker', { label });
-          switch (label) {
-            case 'json':
-              return createJSONWorker();
-            case 'graphql':
-              return createGraphQLWorker();
-          }
-          return createEditorWorker();
-        },
-      };
+      import 'graphiql/setup-workers/esm.sh';
 
       const fetcher = createGraphiQLFetcher({
         url: 'https://countries.trevorblades.com',

examples/graphiql-webpack/src/index.jsx

@@ -6,7 +6,7 @@ import { explorerPlugin } from '@graphiql/plugin-explorer';
 import { getSnippets } from './snippets';
 import { codeExporterPlugin } from '@graphiql/plugin-code-exporter';
 import { createGraphiQLFetcher } from '@graphiql/toolkit';
-import { useStorage } from '@graphiql/react';
+import { useGraphiQL } from '@graphiql/react';
 import { serverSelectPlugin, LAST_URL_KEY } from './select-server-plugin';
 import 'graphiql/setup-workers/webpack';
 import './index.css';
@@ -81,17 +81,17 @@ function App() {
       fetcher={fetcher}
       shouldPersistHeaders
     >
-      <GraphiQLStorageBound setUrl={setUrl} />
+      <GraphiQLContextBound setUrl={setUrl} />
     </GraphiQL>
   );
 }
 
 /**
- * `useStorage` is a context hook that's only available within the `<GraphiQL>`
- * provider tree. `<GraphiQLStorageBound>` must be rendered as a child of `<GraphiQL>`.
+ * `useGraphiQL` is a context hook that's only available within the `<GraphiQL>`
+ * provider tree. `<GraphiQLContextBound>` must be rendered as a child of `<GraphiQL>`.
  */
-function GraphiQLStorageBound({ setUrl }) {
-  const storage = useStorage();
+function GraphiQLContextBound({ setUrl }) {
+  const storage = useGraphiQL(state => state.storage);
   const lastUrl = storage.get(LAST_URL_KEY) ?? STARTING_URL;
 
   useEffect(() => {

examples/graphiql-webpack/src/select-server-plugin.jsx

@@ -1,13 +1,20 @@
 import * as React from 'react';
-import { useStorage, useSchemaStore } from '@graphiql/react';
+import { useGraphiQL } from '@graphiql/react';
 
 export const LAST_URL_KEY = 'lastURL';
 
 export const PREV_URLS_KEY = 'previousURLs';
 
 const SelectServer = ({ url, setUrl }) => {
   const inputRef = React.useRef(null);
-  const storage = useStorage();
+  const { storage, schema, isIntrospecting, fetchError } = useGraphiQL(
+    state => ({
+      storage: state.storage,
+      schema: state.schema,
+      isIntrospecting: state.isIntrospecting,
+      fetchError: state.fetchError,
+    }),
+  );
   const lastUrl = storage.get(LAST_URL_KEY);
   const currentUrl = lastUrl ?? url;
   const [inputValue, setInputValue] = React.useState(currentUrl);
@@ -16,8 +23,6 @@ const SelectServer = ({ url, setUrl }) => {
   );
   const [error, setError] = React.useState(null);
 
-  const { schema, isFetching, fetchError } = useSchemaStore();
-
   const sameValue = inputValue.trim() === url;
 
   return (
@@ -71,7 +76,7 @@ const SelectServer = ({ url, setUrl }) => {
             </div>
           </div>
         )}
-        {isFetching ? (
+        {isIntrospecting ? (
           <div className="select-server--schema-loading">Schema loading...</div>
         ) : (
           schema &&

packages/graphiql-plugin-doc-explorer/package.json

@@ -36,14 +36,14 @@
     "test": "vitest"
   },
   "peerDependencies": {
+    "@graphiql/react": "^0.35.0-rc.0",
     "graphql": "^15.5.0 || ^16.0.0 || ^17.0.0",
     "react": "^18 || ^19",
+    "react-compiler-runtime": "19.1.0-rc.1",
     "react-dom": "^18 || ^19"
   },
   "dependencies": {
-    "@graphiql/react": "^0.35.0",
     "@headlessui/react": "^2.2",
-    "react-compiler-runtime": "19.1.0-rc.1",
     "zustand": "^5"
   },
   "devDependencies": {

packages/graphiql-plugin-history/package.json

@@ -35,13 +35,13 @@
     "test": "vitest"
   },
   "peerDependencies": {
+    "@graphiql/react": "^0.35.0-rc.0",
     "react": "^18 || ^19",
+    "react-compiler-runtime": "19.1.0-rc.1",
     "react-dom": "^18 || ^19"
   },
   "dependencies": {
-    "@graphiql/react": "^0.35.0",
     "@graphiql/toolkit": "^0.11.3",
-    "react-compiler-runtime": "19.1.0-rc.1",
     "zustand": "^5"
   },
   "devDependencies": {

packages/graphiql-plugin-history/src/__tests__/components.spec.tsx

@@ -18,6 +18,9 @@ vi.mock('@graphiql/react', async () => {
         variableEditor: { setValue: mockedSetVariableEditor },
         headerEditor: { setValue: mockedSetHeaderEditor },
         tabs: [],
+        storage: {
+          get() {},
+        },
       };
     },
   };

packages/graphiql-plugin-history/src/context.ts

@@ -4,12 +4,7 @@ import {
   HistoryStore as ToolkitHistoryStore,
   QueryStoreItem,
 } from '@graphiql/toolkit';
-import {
-  useGraphiQL,
-  pick,
-  useStorage,
-  createBoundedUseStore,
-} from '@graphiql/react';
+import { useGraphiQL, pick, createBoundedUseStore } from '@graphiql/react';
 
 const historyStore = createStore<HistoryStoreType>((set, get) => ({
   historyStorage: null,
@@ -122,12 +117,10 @@ export const HistoryStore: FC<HistoryStoreProps> = ({
   maxHistoryLength = 20,
   children,
 }) => {
-  const { isFetching, tabs, activeTabIndex } = useGraphiQL(
-    pick('isFetching', 'tabs', 'activeTabIndex'),
+  const { isFetching, tabs, activeTabIndex, storage } = useGraphiQL(
+    pick('isFetching', 'tabs', 'activeTabIndex', 'storage'),
   );
   const activeTab = tabs[activeTabIndex]!;
-  const storage = useStorage();
-
   const historyStorage = // eslint-disable-line react-hooks/exhaustive-deps -- false positive, code is optimized by React Compiler
     new ToolkitHistoryStore(storage, maxHistoryLength);
 

packages/graphiql-plugin-history/vite.config.mts

@@ -52,6 +52,7 @@ export default defineConfig({
         ...Object.keys(packageJSON.dependencies),
       ],
       output: {
+        // Separate chunks for all modules
         preserveModules: true,
       },
     },

packages/graphiql-plugin-history/vitest.config.mts

@@ -7,7 +7,7 @@ export default defineConfig({
   test: {
     globals: true,
     environment: 'jsdom',
-    setupFiles: ['./setup-files.ts'],
+    setupFiles: ['./setup-files.ts', '../graphiql/setup-window.ts'],
     alias: [
       {
         // Fixes Error: Failed to resolve entry for package "monaco-editor". The package may have incorrect main/module/exports specified in its package.json.