feat(@graphiql/react): migrate React context to zustand. Replace useExecutionContext with useExecutionStore hook and replace useEditorContext with useEditorStore hook (#3946)

* use execution store

* upd

* upd

* upd

* upd

* upd

* upd

* upd

* upd

* upd

* upd

* upd

* upd

* upd

* upd

* default query

* persist headers

* upd

* upd

* upd

* upd

* upd

* upd

* upd

* upd

* upd

* upd

* reduce rerenders

* add logs

* try

* cleanup

* cspell

* Update index.ts

* Update index.ts

* Update .changeset/five-cars-roll.md

Author: dimaMachina

.changeset/five-cars-roll.md

@@ -0,0 +1,12 @@
+---
+'@graphiql/plugin-doc-explorer': patch
+'@graphiql/plugin-explorer': patch
+'@graphiql/plugin-history': patch
+'@graphiql/react': minor
+'graphiql': minor
+---
+
+feat(@graphiql/react): migrate React context to zustand:
+  - replace `useExecutionContext` with `useExecutionStore` hook
+  - replace `useEditorContext` with `useEditorStore` hook
+  - replace `useAutoCompleteLeafs` hook with `getAutoCompleteLeafs` function

packages/graphiql-plugin-doc-explorer/src/context.ts

@@ -16,9 +16,9 @@ import {
 } from 'graphql';
 import { FC, ReactElement, ReactNode, useEffect } from 'react';
 import {
-  createBoundedUseStore,
   SchemaContextType,
   useSchemaStore,
+  createBoundedUseStore,
 } from '@graphiql/react';
 import { createStore } from 'zustand';
 

packages/graphiql-plugin-explorer/src/index.tsx

@@ -1,8 +1,8 @@
 import React, { CSSProperties, FC, useCallback } from 'react';
 import {
   GraphiQLPlugin,
-  useEditorContext,
-  useExecutionContext,
+  useEditorStore,
+  useExecutionStore,
   useSchemaStore,
   useOperationsEditorState,
   useOptimisticState,
@@ -62,9 +62,9 @@ export type GraphiQLExplorerPluginProps = Omit<
 >;
 
 const ExplorerPlugin: FC<GraphiQLExplorerPluginProps> = props => {
-  const { setOperationName } = useEditorContext({ nonNull: true });
+  const { setOperationName } = useEditorStore();
   const { schema } = useSchemaStore();
-  const { run } = useExecutionContext({ nonNull: true });
+  const { run } = useExecutionStore();
 
   // handle running the current operation from the plugin
   const handleRunOperation = useCallback(

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

@@ -4,7 +4,7 @@ import type { ComponentProps } from 'react';
 import { formatQuery, HistoryItem } from '../components';
 import { HistoryContextProvider } from '../context';
 import {
-  useEditorContext,
+  useEditorStore,
   Tooltip,
   StorageContextProvider,
 } from '@graphiql/react';
@@ -16,15 +16,15 @@ vi.mock('@graphiql/react', async () => {
   const mockedSetHeaderEditor = vi.fn();
   return {
     ...originalModule,
-    useEditorContext() {
+    useEditorStore() {
       return {
         queryEditor: { setValue: mockedSetQueryEditor },
         variableEditor: { setValue: mockedSetVariableEditor },
         headerEditor: { setValue: mockedSetHeaderEditor },
         tabs: [],
       };
     },
-    useExecutionContext() {
+    useExecutionStore() {
       return {};
     },
   };
@@ -78,12 +78,10 @@ function getMockProps(
 }
 
 describe('QueryHistoryItem', () => {
-  const mockedSetQueryEditor = useEditorContext()!.queryEditor!
-    .setValue as Mock;
-  const mockedSetVariableEditor = useEditorContext()!.variableEditor!
-    .setValue as Mock;
-  const mockedSetHeaderEditor = useEditorContext()!.headerEditor!
-    .setValue as Mock;
+  const store = useEditorStore();
+  const mockedSetQueryEditor = store.queryEditor!.setValue as Mock;
+  const mockedSetVariableEditor = store.variableEditor!.setValue as Mock;
+  const mockedSetHeaderEditor = store.headerEditor!.setValue as Mock;
   beforeEach(() => {
     mockedSetQueryEditor.mockClear();
     mockedSetVariableEditor.mockClear();

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

@@ -7,7 +7,7 @@ import {
   StarFilledIcon,
   StarIcon,
   TrashIcon,
-  useEditorContext,
+  useEditorStore,
   Button,
   Tooltip,
   UnStyledButton,
@@ -112,10 +112,7 @@ type QueryHistoryItemProps = {
 export const HistoryItem: FC<QueryHistoryItemProps> = props => {
   const { editLabel, toggleFavorite, deleteFromHistory, setActive } =
     useHistoryActions();
-  const { headerEditor, queryEditor, variableEditor } = useEditorContext({
-    nonNull: true,
-    caller: HistoryItem,
-  });
+  const { headerEditor, queryEditor, variableEditor } = useEditorStore();
   const inputRef = useRef<HTMLInputElement>(null);
   const buttonRef = useRef<HTMLButtonElement>(null);
   const [isEditable, setIsEditable] = useState(false);

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

@@ -3,8 +3,8 @@ import { FC, ReactElement, ReactNode, useEffect } from 'react';
 import { createStore } from 'zustand';
 import { HistoryStore, QueryStoreItem } from '@graphiql/toolkit';
 import {
-  useExecutionContext,
-  useEditorContext,
+  useExecutionStore,
+  useEditorStore,
   useStorage,
   createBoundedUseStore,
 } from '@graphiql/react';
@@ -119,8 +119,8 @@ export const HistoryContextProvider: FC<HistoryContextProviderProps> = ({
   maxHistoryLength = 20,
   children,
 }) => {
-  const { isFetching } = useExecutionContext({ nonNull: true });
-  const { tabs, activeTabIndex } = useEditorContext({ nonNull: true });
+  const { isFetching } = useExecutionStore();
+  const { tabs, activeTabIndex } = useEditorStore();
   const activeTab = tabs[activeTabIndex];
   const storage = useStorage();
 

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

@@ -1,6 +1,6 @@
 import { FC, useEffect } from 'react';
 import { clsx } from 'clsx';
-import { useEditorContext } from '../context';
+import { useEditorStore } from '../context';
 import { useHeaderEditor, UseHeaderEditorArgs } from '../header-editor';
 import '../style/codemirror.css';
 import '../style/fold.css';
@@ -18,11 +18,8 @@ export const HeaderEditor: FC<HeaderEditorProps> = ({
   isHidden,
   ...hookArgs
 }) => {
-  const { headerEditor } = useEditorContext({
-    nonNull: true,
-    caller: HeaderEditor,
-  });
-  const ref = useHeaderEditor(hookArgs, HeaderEditor);
+  const headerEditor = useEditorStore(store => store.headerEditor);
+  const ref = useHeaderEditor(hookArgs);
 
   useEffect(() => {
     if (!isHidden) {

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

@@ -6,7 +6,7 @@ import '../style/info.css';
 import '../style/editor.css';
 
 export const ResponseEditor: FC<UseResponseEditorArgs> = props => {
-  const ref = useResponseEditor(props, ResponseEditor);
+  const ref = useResponseEditor(props);
   return (
     <section
       className="result-window"

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

@@ -1,7 +1,7 @@
 import { FC, useEffect } from 'react';
 import { clsx } from 'clsx';
 
-import { useEditorContext } from '../context';
+import { useEditorStore } from '../context';
 import { useVariableEditor, UseVariableEditorArgs } from '../variable-editor';
 
 import '../style/codemirror.css';
@@ -22,11 +22,8 @@ export const VariableEditor: FC<VariableEditorProps> = ({
   isHidden,
   ...hookArgs
 }) => {
-  const { variableEditor } = useEditorContext({
-    nonNull: true,
-    caller: VariableEditor,
-  });
-  const ref = useVariableEditor(hookArgs, VariableEditor);
+  const variableEditor = useEditorStore(store => store.variableEditor);
+  const ref = useVariableEditor(hookArgs);
 
   useEffect(() => {
     if (!isHidden) {