feat(@graphiql/react): migrate React context to zustand, replace usePluginContext with usePluginStore hook (#3945)

dimaMachina · web-flow · commit 117627b45160 · 2025-05-13T18:13:39.000+02:00
* upd

* upd

* upd

* upd

* upd

* upd

* upd

* upd

* upd

* upd

* upd

* changeset

* upd

* upd

* fix tests

* fix example

* fix tests

* upd

* upd

* upd

* upd

* upd

* less git lines

* fix tests

* fix tests

* lint

* fix build

* fix build

* fix cspell

* Update packages/graphiql-react/src/schema.ts
diff --git a/.changeset/good-geese-joke.md b/.changeset/good-geese-joke.md
@@ -0,0 +1,10 @@
+---
+'@graphiql/plugin-doc-explorer': patch
+'@graphiql/plugin-explorer': patch
+'@graphiql/plugin-history': patch
+'@graphiql/react': minor
+'graphiql': patch
+---
+
+feat(@graphiql/react): migrate React context to zustand, replace `usePluginContext` with `usePluginStore` hook
+
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -31,6 +31,9 @@ module.exports = {
     '**/CHANGELOG.md',
     'functions/*',
     'packages/vscode-graphql-syntax/tests/__fixtures__/*',
+    // symlinks
+    'packages/graphiql-plugin-doc-explorer/__mocks__/zustand.ts',
+    'packages/graphiql-plugin-history/__mocks__/zustand.ts',
   ],
   overrides: [
     {
diff --git a/packages/graphiql-plugin-doc-explorer/__mocks__/zustand.ts b/packages/graphiql-plugin-doc-explorer/__mocks__/zustand.ts
@@ -0,0 +1 @@
+../../graphiql/__mocks__/zustand.ts
diff --git a/packages/graphiql-plugin-doc-explorer/setup-files.ts b/packages/graphiql-plugin-doc-explorer/setup-files.ts
@@ -1,3 +1,5 @@
 'use no memo';
 
 import '@testing-library/jest-dom';
+
+vi.mock('zustand'); // to make it works like Jest (auto-mocking)
diff --git a/packages/graphiql-plugin-doc-explorer/src/index.tsx b/packages/graphiql-plugin-doc-explorer/src/index.tsx
@@ -2,7 +2,7 @@ import {
   DocsFilledIcon,
   DocsIcon,
   GraphiQLPlugin,
-  usePluginContext,
+  usePluginStore,
 } from '@graphiql/react';
 import { DocExplorer } from './components';
 
@@ -25,8 +25,8 @@ export type {
 export const DOC_EXPLORER_PLUGIN: GraphiQLPlugin = {
   title: 'Documentation Explorer',
   icon: function Icon() {
-    const pluginContext = usePluginContext();
-    return pluginContext?.visiblePlugin === DOC_EXPLORER_PLUGIN ? (
+    const { visiblePlugin } = usePluginStore();
+    return visiblePlugin === DOC_EXPLORER_PLUGIN ? (
       <DocsFilledIcon />
     ) : (
       <DocsIcon />
diff --git a/packages/graphiql-plugin-history/__mocks__/zustand.ts b/packages/graphiql-plugin-history/__mocks__/zustand.ts
@@ -0,0 +1 @@
+../../graphiql/__mocks__/zustand.ts
diff --git a/packages/graphiql-plugin-history/setup-files.ts b/packages/graphiql-plugin-history/setup-files.ts
@@ -0,0 +1,5 @@
+'use no memo';
+
+import '@testing-library/jest-dom';
+
+vi.mock('zustand'); // to make it works like Jest (auto-mocking)
diff --git a/packages/graphiql-plugin-history/vitest.config.mts b/packages/graphiql-plugin-history/vitest.config.mts
@@ -6,5 +6,6 @@ export default defineConfig({
   test: {
     globals: true,
     environment: 'jsdom',
+    setupFiles: ['./setup-files.ts'],
   },
 });
diff --git a/packages/graphiql-react/src/editor/hooks.ts b/packages/graphiql-react/src/editor/hooks.ts
@@ -10,7 +10,7 @@ import copyToClipboard from 'copy-to-clipboard';
 import { parse, print } from 'graphql';
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports -- TODO: check why query builder update only 1st field https://github.com/graphql/graphiql/issues/3836
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { usePluginContext } from '../plugin';
+import { usePluginStore } from '../plugin';
 import { useSchemaStore } from '../schema';
 import { useStorage } from '../storage';
 import { debounce } from '../utility';
@@ -97,7 +97,7 @@ export function useCompletion(
   callback?: (reference: SchemaReference) => void,
 ) {
   const { schema, setSchemaReference } = useSchemaStore();
-  const plugin = usePluginContext();
+  const plugin = usePluginStore();
   useEffect(() => {
     if (!editor) {
       return;
diff --git a/packages/graphiql-react/src/editor/query-editor.ts b/packages/graphiql-react/src/editor/query-editor.ts
@@ -14,7 +14,7 @@ import {
 import { RefObject, useEffect, useRef } from 'react';
 import { useExecutionContext } from '../execution';
 import { markdown } from '../markdown';
-import { usePluginContext } from '../plugin';
+import { usePluginStore } from '../plugin';
 import { useSchemaStore } from '../schema';
 import { useStorage } from '../storage';
 import { debounce } from '../utility/debounce';
@@ -145,7 +145,7 @@ export function useQueryEditor(
   });
   const executionContext = useExecutionContext();
   const storage = useStorage();
-  const plugin = usePluginContext();
+  const plugin = usePluginStore();
   const copy = useCopyQuery({ caller: caller || _useQueryEditor, onCopyQuery });
   const merge = useMergeQuery({ caller: caller || _useQueryEditor });
   const prettify = usePrettifyEditors({
diff --git a/packages/graphiql-react/src/index.ts b/packages/graphiql-react/src/index.ts
@@ -28,11 +28,7 @@ export {
   ExecutionContextProvider,
   useExecutionContext,
 } from './execution';
-export {
-  PluginContext,
-  PluginContextProvider,
-  usePluginContext,
-} from './plugin';
+export { PluginContextProvider, usePluginStore } from './plugin';
 export { GraphiQLProvider } from './provider';
 export { SchemaContextProvider, useSchemaStore } from './schema';
 export { StorageContextProvider, useStorage } from './storage';
diff --git a/packages/graphiql-react/src/plugin.tsx b/packages/graphiql-react/src/plugin.tsx
@@ -1,6 +1,7 @@
-import { ComponentType, FC, ReactNode, useEffect, useState } from 'react';
+// eslint-disable-next-line react/jsx-filename-extension -- TODO
+import { ComponentType, FC, ReactNode, useEffect } from 'react';
 import { useStorage } from './storage';
-import { createContextHook, createNullableContext } from './utility';
+import { createStore, useStore } from 'zustand';
 
 export type GraphiQLPlugin = {
   /**
@@ -41,21 +42,21 @@ export type PluginContextType = {
    * The plugin which is used to display the reference documentation when selecting a type.
    */
   referencePlugin?: GraphiQLPlugin;
-};
-
-export const PluginContext =
-  createNullableContext<PluginContextType>('PluginContext');
-
-type PluginContextProviderProps = Pick<PluginContextType, 'referencePlugin'> & {
-  children: ReactNode;
   /**
    * Invoked when the visibility state of any plugin changes.
    * @param visiblePlugin The plugin object that is now visible. If no plugin
    * is visible, the function will be invoked with `null`.
    */
   onTogglePluginVisibility?(visiblePlugin: GraphiQLPlugin | null): void;
+};
+
+type PluginContextProviderProps = Pick<
+  PluginContextType,
+  'referencePlugin' | 'onTogglePluginVisibility'
+> & {
+  children: ReactNode;
   /**
-   * This props accepts a list of plugins that will be shown in addition to the
+   * This prop accepts a list of plugins that will be shown in addition to the
    * built-in ones (the doc explorer and the history).
    */
   plugins?: GraphiQLPlugin[];
@@ -68,93 +69,78 @@ type PluginContextProviderProps = Pick<PluginContextType, 'referencePlugin'> & {
   visiblePlugin?: GraphiQLPlugin | string;
 };
 
+export const pluginStore = createStore<PluginContextType>((set, get) => ({
+  plugins: [],
+  visiblePlugin: null,
+  referencePlugin: undefined,
+  setVisiblePlugin(plugin) {
+    const { plugins, onTogglePluginVisibility } = get();
+    const byTitle = typeof plugin === 'string';
+    const newVisiblePlugin: PluginContextType['visiblePlugin'] =
+      (plugin && plugins.find(p => (byTitle ? p.title : p) === plugin)) || null;
+    set(({ visiblePlugin }) => {
+      if (newVisiblePlugin === visiblePlugin) {
+        return { visiblePlugin };
+      }
+      onTogglePluginVisibility?.(newVisiblePlugin);
+      return { visiblePlugin: newVisiblePlugin };
+    });
+  },
+}));
+
+// @ts-expect-error -- ignore `children` type warning
 export const PluginContextProvider: FC<PluginContextProviderProps> = ({
   onTogglePluginVisibility,
   children,
   visiblePlugin,
-  plugins: $plugins,
+  plugins = [],
   referencePlugin,
 }) => {
   const storage = useStorage();
-  const plugins = (() => {
-    const pluginList: GraphiQLPlugin[] = [];
-    const pluginTitles: Record<string, true> = {};
-    for (const plugin of $plugins || []) {
-      if (typeof plugin.title !== 'string' || !plugin.title) {
-        throw new Error('All GraphiQL plugins must have a unique title');
-      }
-      if (pluginTitles[plugin.title]) {
-        throw new Error(
-          `All GraphiQL plugins must have a unique title, found two plugins with the title '${plugin.title}'`,
-        );
-      } else {
-        pluginList.push(plugin);
-        pluginTitles[plugin.title] = true;
-      }
-    }
-
-    return pluginList;
-  })();
 
-  const [$visiblePlugin, internalSetVisiblePlugin] =
-    useState<GraphiQLPlugin | null>(() => {
-      const storedValue = storage?.get(STORAGE_KEY);
-      const pluginForStoredValue = plugins.find(
-        plugin => plugin.title === storedValue,
-      );
-      if (pluginForStoredValue) {
-        return pluginForStoredValue;
-      }
-      if (storedValue) {
-        storage?.set(STORAGE_KEY, '');
+  useEffect(() => {
+    const seenTitles = new Set<string>();
+    const msg = 'All GraphiQL plugins must have a unique title';
+    for (const { title } of plugins) {
+      if (typeof title !== 'string' || !title) {
+        throw new Error(msg);
       }
-
-      if (!visiblePlugin) {
-        return null;
+      if (seenTitles.has(title)) {
+        throw new Error(`${msg}, found two plugins with the title '${title}'`);
       }
-
-      return (
-        plugins.find(
-          plugin =>
-            (typeof visiblePlugin === 'string' ? plugin.title : plugin) ===
-            visiblePlugin,
-        ) || null
-      );
-    });
-
-  const setVisiblePlugin: PluginContextType['setVisiblePlugin'] = // eslint-disable-line react-hooks/exhaustive-deps -- false positive, function is optimized by react-compiler, no need to wrap with useCallback
-    plugin => {
-      const newVisiblePlugin = plugin
-        ? plugins.find(
-            p => (typeof plugin === 'string' ? p.title : p) === plugin,
-          ) || null
-        : null;
-      internalSetVisiblePlugin(current => {
-        if (newVisiblePlugin === current) {
-          return current;
-        }
-        onTogglePluginVisibility?.(newVisiblePlugin);
-        return newVisiblePlugin;
-      });
-    };
-
-  useEffect(() => {
-    if (visiblePlugin) {
-      setVisiblePlugin(visiblePlugin);
+      seenTitles.add(title);
     }
-  }, [plugins, visiblePlugin, setVisiblePlugin]);
+    // TODO: visiblePlugin initial data
+    // const storedValue = storage?.get(STORAGE_KEY);
+    // const pluginForStoredValue = plugins.find(
+    //   plugin => plugin.title === storedValue,
+    // );
+    // if (pluginForStoredValue) {
+    //   return pluginForStoredValue;
+    // }
+    // if (storedValue) {
+    //   storage?.set(STORAGE_KEY, '');
+    // }
 
-  const value: PluginContextType = {
+    pluginStore.setState({
+      plugins,
+      onTogglePluginVisibility,
+      referencePlugin,
+    });
+    pluginStore.getState().setVisiblePlugin(visiblePlugin ?? null);
+  }, [
     plugins,
-    setVisiblePlugin,
-    visiblePlugin: $visiblePlugin,
+    onTogglePluginVisibility,
     referencePlugin,
-  };
-  return (
-    <PluginContext.Provider value={value}>{children}</PluginContext.Provider>
-  );
+    storage,
+    visiblePlugin,
+  ]);
+
+  return children;
 };
 
-export const usePluginContext = createContextHook(PluginContext);
+export function usePluginStore() {
+  return useStore(pluginStore);
+}
 
-const STORAGE_KEY = 'visiblePlugin';
+// const STORAGE_KEY = 'visiblePlugin';
diff --git a/packages/graphiql-react/src/utility/resize.ts b/packages/graphiql-react/src/utility/resize.ts
@@ -96,21 +96,15 @@ export function useDragResize({
       (storageKey && storage?.get(storageKey)) || defaultFlexRef.current;
 
     if (firstRef.current) {
-      firstRef.current.style.display = 'flex';
       firstRef.current.style.flex =
         storedValue === HIDE_FIRST || storedValue === HIDE_SECOND
           ? defaultFlexRef.current
           : storedValue;
     }
 
     if (secondRef.current) {
-      secondRef.current.style.display = 'flex';
       secondRef.current.style.flex = '1';
     }
-
-    if (dragBarRef.current) {
-      dragBarRef.current.style.display = 'flex';
-    }
   }, [direction, storage, storageKey]);
 
   /**
diff --git a/packages/graphiql/__mocks__/zustand.ts b/packages/graphiql/__mocks__/zustand.ts
@@ -0,0 +1,70 @@
+/* eslint-disable no-console */
+
+/**
+ * Mocking Zustand for Vitest with resetting store between each test.
+ * @see https://zustand.docs.pmnd.rs/guides/testing#vitest
+ */
+
+import { act } from '@testing-library/react';
+// eslint-disable-next-line import-x/no-extraneous-dependencies
+import {
+  create as originalCreate,
+  createStore as originalCreateStore,
+  useStore,
+  StateCreator,
+} from 'zustand';
+
+// Originally zustand docs suggest to use `export * from 'zustand'`, but I had issues with it.
+// It conflicts with locale export of `create` and `createStore` functions
+export { useStore };
+
+// a variable to hold reset functions for all stores declared in the app
+export const storeResetFns = new Set<() => void>();
+
+const createUncurried = <T>(stateCreator: StateCreator<T>) => {
+  const store = originalCreate(stateCreator);
+  const initialState = store.getInitialState();
+  storeResetFns.add(() => {
+    store.setState(initialState, true);
+  });
+  return store;
+};
+
+// when creating a store, we get its initial state, create a reset function and add it in the set
+export const create = (<T>(stateCreator: StateCreator<T>) => {
+  console.log('zustand create mock');
+
+  // to support a curried version of create
+  return typeof stateCreator === 'function'
+    ? createUncurried(stateCreator)
+    : createUncurried;
+}) as typeof originalCreate;
+
+function createStoreUncurried<T>(stateCreator: StateCreator<T>) {
+  const store = originalCreateStore(stateCreator);
+  const initialState = store.getInitialState();
+
+  storeResetFns.add(() => {
+    store.setState(initialState, true);
+  });
+  return store;
+}
+
+// When creating a store, we get its initial state, create a reset function and add it in the set
+export const createStore = (<T>(stateCreator: StateCreator<T>) => {
+  console.log('zustand createStore mock');
+
+  // to support a curried version of createStore
+  return typeof stateCreator === 'function'
+    ? createStoreUncurried(stateCreator)
+    : createStoreUncurried;
+}) as typeof originalCreateStore;
+
+// Reset all stores after each test run
+afterEach(() => {
+  act(() => {
+    for (const resetFn of storeResetFns) {
+      resetFn();
+    }
+  });
+});
diff --git a/packages/graphiql/setup-files.ts b/packages/graphiql/setup-files.ts
diff --git a/packages/graphiql/src/GraphiQL.spec.tsx b/packages/graphiql/src/GraphiQL.spec.tsx
diff --git a/packages/graphiql/src/GraphiQL.tsx b/packages/graphiql/src/GraphiQL.tsx
diff --git a/resources/custom-words.txt b/resources/custom-words.txt
