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

.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.

packages/graphiql-react/README.md

@@ -89,36 +89,35 @@ React hooks.
 
 ### Core Hooks
 
-- **`useStorage`**: Provides a storage API that can be used to persist state in the browser (by default using `localStorage`).
-- **`useTheme`**: Manages the current theme and provides a method to update it.
 - **`useMonaco`**: Access `monaco-editor` exports and the `monaco-graphql` instance. Designed for safe use in SSR environments.
 - **`useGraphiQL`**: Access the current state.
 - **`useGraphiQLActions`**: Trigger actions that mutate the state. This hook **never** rerenders.
 
 The `useGraphiQLActions` hook **exposes all actions** across store slices.
 The `useGraphiQL` hook **provides access to the following store slices**:
 
-| Store Slice | Responsibilities                                                                 |
-| ----------- | -------------------------------------------------------------------------------- |
-| `editor`    | Manages **query**, **variables**, **headers**, and **response** editors and tabs |
-| `execution` | Handles the execution of GraphQL requests                                        |
-| `plugin`    | Manages plugins and the currently active plugin                                  |
-| `schema`    | Fetches, validates, and stores the GraphQL schema                                |
+| Store Slice | Responsibilities                                                                                          |
+| ----------- | --------------------------------------------------------------------------------------------------------- |
+| `storage`   | Provides a storage API that can be used to persist state in the browser (by default using `localStorage`) |
+| `editor`    | Manages **query**, **variables**, **headers**, and **response** editors and tabs                          |
+| `execution` | Handles the execution of GraphQL requests                                                                 |
+| `plugin`    | Manages plugins and the currently active plugin                                                           |
+| `schema`    | Fetches, validates, and stores the GraphQL schema                                                         |
+| `theme`     | Manages the current theme and provides a method to update it                                              |
 
 ### Usage Example
 
 ```js
 import { useGraphiQL, useGraphiQLActions, useTheme } from '@graphiql/react';
 
-// Get an action to fetch the schema
-const { introspect } = useGraphiQLActions();
+// Get an action to fetch the schema and an action to change theme
+const { introspect, setTheme } = useGraphiQLActions();
 
-// Get the current theme and a method to change it
-const { theme, setTheme } = useTheme();
-
-// Or use a selector to access specific parts of the state
-const schema = useGraphiQL(state => state.schema);
-const currentTheme = useTheme(state => state.theme);
+// Use a selector to access specific parts of the state like current schema and theme
+const { schema, theme } = useGraphiQL(state => ({
+  schema: state.schema,
+  theme: state.theme,
+}));
 ```
 
 All store properties are documented using TSDoc comments. If you're using an

packages/graphiql-react/package.json

@@ -2,9 +2,7 @@
   "name": "@graphiql/react",
   "version": "0.35.6",
   "sideEffects": [
-    "dist/monaco-editor.js",
-    "dist/setup-workers/webpack.js",
-    "dist/setup-workers/vite.js"
+    "dist/setup-workers/*"
   ],
   "repository": {
     "type": "git",
@@ -48,6 +46,7 @@
   "peerDependencies": {
     "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": {
@@ -65,7 +64,6 @@
     "monaco-editor": "^0.52.2",
     "monaco-graphql": "^1.7.1",
     "prettier": "^3.5.3",
-    "react-compiler-runtime": "19.1.0-rc.1",
     "set-value": "^4.1.0",
     "zustand": "^5"
   },

packages/graphiql-react/src/components/operation-editor.tsx

@@ -5,7 +5,7 @@ import {
   getContextAtPosition,
 } from 'graphql-language-service';
 import { FC, useEffect, useRef } from 'react';
-import { useMonaco, useStorage } from '../stores';
+import { useMonaco } from '../stores';
 import { useGraphiQL, useGraphiQLActions } from './provider';
 import {
   debounce,
@@ -69,6 +69,8 @@ export const OperationEditor: FC<OperationEditorProps> = ({
     operationName,
     externalFragments,
     uriInstanceId,
+    storage,
+    monacoTheme,
   } = useGraphiQL(
     pick(
       'initialQuery',
@@ -78,9 +80,10 @@ export const OperationEditor: FC<OperationEditorProps> = ({
       'operationName',
       'externalFragments',
       'uriInstanceId',
+      'storage',
+      'monacoTheme',
     ),
   );
-  const storage = useStorage();
   const ref = useRef<HTMLDivElement>(null!);
   const onClickReferenceRef = useRef<OperationEditorProps['onClickReference']>(
     null!,
@@ -225,7 +228,10 @@ export const OperationEditor: FC<OperationEditorProps> = ({
       uri: operationUri.path.replace('/', ''),
       value: initialQuery,
     });
-    const editor = createEditor(ref, { model });
+    const editor = createEditor(ref, {
+      model,
+      theme: monacoTheme,
+    });
     setEditor({ queryEditor: editor });
 
     // We don't use the generic `useChangeHandler` hook here because we want to