graphiql 5: separate store actions from state, add useGraphiQLActions state (#4009)

* add f1 command as first item in shortcut table

* add f1 command as first item in shortcut table

* rollback

* refactor plugins

* refactor editor

* refactor execution

* refactor schema

* refactor schema

* export actions

* add SlicesWithActions

* add types tests

* execution

* lint

* editor refactoring

* avoid calling get() in set()

* fix state creators

* useGraphiQLActions

* add comment

* fix type errors

* fix type errors

* more types check

* more types check

* more types check

* upd

* add changeset

* Update editor.ts

Author: dimaMachina

.changeset/eleven-rings-complain.md

@@ -0,0 +1,8 @@
+---
+'@graphiql/plugin-doc-explorer': minor
+'@graphiql/plugin-explorer': major
+'@graphiql/react': minor
+'graphiql': major
+---
+
+separate store actions from state, add `useGraphiQLActions` state

.eslintrc.js

@@ -183,7 +183,7 @@ module.exports = {
         'init-declarations': 'off',
         'no-catch-shadow': 'error',
         'no-label-var': 'error',
-        'no-restricted-globals': 'off',
+        'no-restricted-globals': ['error', 'stop'],
         'no-shadow': 'off',
         '@typescript-eslint/no-shadow': 'error',
         'no-undef-init': 'off',

packages/graphiql-plugin-doc-explorer/src/components/__tests__/type-documentation.spec.tsx

@@ -10,13 +10,13 @@ import {
 import { docExplorerStore } from '../../context';
 import { TypeDocumentation } from '../type-documentation';
 import { unwrapType } from './test-utils';
-import { AllSlices } from '@graphiql/react';
+import { SlicesWithActions } from '@graphiql/react';
 
 vi.mock('@graphiql/react', async () => {
   const originalModule =
     await vi.importActual<typeof import('@graphiql/react')>('@graphiql/react');
   const useGraphiQL: (typeof originalModule)['useGraphiQL'] = cb =>
-    cb({ schema: ExampleSchema } as AllSlices);
+    cb({ schema: ExampleSchema } as SlicesWithActions);
 
   return {
     ...originalModule,

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

@@ -332,5 +332,10 @@ const useDocExplorerStore = createBoundedUseStore(docExplorerStore);
 
 export const useDocExplorer = () =>
   useDocExplorerStore(state => state.explorerNavStack);
+
+/**
+ * Actions are functions used to update values in your store. They are static and never change.
+ * @see https://tkdodo.eu/blog/working-with-zustand#separate-actions-from-state
+ */
 export const useDocExplorerActions = () =>
   useDocExplorerStore(state => state.actions);

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

@@ -2,7 +2,7 @@ import { CSSProperties, FC, useCallback } from 'react';
 import {
   GraphiQLPlugin,
   useGraphiQL,
-  pick,
+  useGraphiQLActions,
   useOperationsEditorState,
   useOptimisticState,
 } from '@graphiql/react';
@@ -61,9 +61,8 @@ export type GraphiQLExplorerPluginProps = Omit<
 >;
 
 const ExplorerPlugin: FC<GraphiQLExplorerPluginProps> = props => {
-  const { setOperationName, schema, run } = useGraphiQL(
-    pick('setOperationName', 'schema', 'run'),
-  );
+  const { setOperationName, run } = useGraphiQLActions();
+  const schema = useGraphiQL(state => state.schema);
 
   // handle running the current operation from the plugin
   const handleRunOperation = useCallback(

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

@@ -155,4 +155,9 @@ const useHistoryStore = createBoundedUseStore(historyStore);
 
 export const useHistory = () =>
   useHistoryStore(state => state.historyStorage.queries);
+
+/**
+ * Actions are functions used to update values in your store. They are static and never change.
+ * @see https://tkdodo.eu/blog/working-with-zustand#separate-actions-from-state
+ */
 export const useHistoryActions = () => useHistoryStore(state => state.actions);

packages/graphiql-react/src/components/execute-button/index.tsx

@@ -1,5 +1,5 @@
-import { FC } from 'react';
-import { useGraphiQL } from '../provider';
+import type { FC } from 'react';
+import { useGraphiQL, useGraphiQLActions } from '../provider';
 import { PlayIcon, StopIcon } from '../../icons';
 import { DropdownMenu } from '../dropdown-menu';
 import { Tooltip } from '../tooltip';
@@ -8,24 +8,14 @@ import { pick } from '../../utility';
 import './index.css';
 
 export const ExecuteButton: FC = () => {
+  const { setOperationName, run, stop } = useGraphiQLActions();
   const {
-    setOperationName,
     operations = [],
     operationName,
     isFetching,
     overrideOperationName,
-    run,
-    stop,
   } = useGraphiQL(
-    pick(
-      'setOperationName',
-      'operations',
-      'operationName',
-      'isFetching',
-      'overrideOperationName',
-      'run',
-      'stop',
-    ),
+    pick('operations', 'operationName', 'isFetching', 'overrideOperationName'),
   );
   const isSubscribed = useGraphiQL(state => Boolean(state.subscription));
   const hasOptions =

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

@@ -1,5 +1,5 @@
 import { FC, useEffect, useRef } from 'react';
-import { useGraphiQL } from './provider';
+import { useGraphiQL, useGraphiQLActions } from './provider';
 import { EditorProps } from '../types';
 import { HEADER_URI, KEY_BINDINGS } from '../constants';
 import {
@@ -21,22 +21,9 @@ interface HeaderEditorProps extends EditorProps {
 }
 
 export const HeaderEditor: FC<HeaderEditorProps> = ({ onEdit, ...props }) => {
-  const {
-    initialHeaders,
-    shouldPersistHeaders,
-    setEditor,
-    run,
-    prettifyEditors,
-    mergeQuery,
-  } = useGraphiQL(
-    pick(
-      'initialHeaders',
-      'shouldPersistHeaders',
-      'setEditor',
-      'run',
-      'prettifyEditors',
-      'mergeQuery',
-    ),
+  const { setEditor, run, prettifyEditors, mergeQuery } = useGraphiQLActions();
+  const { initialHeaders, shouldPersistHeaders } = useGraphiQL(
+    pick('initialHeaders', 'shouldPersistHeaders'),
   );
   const ref = useRef<HTMLDivElement>(null!);
   useChangeHandler(

packages/graphiql-react/src/components/index.ts

@@ -4,7 +4,7 @@ export { ToolbarMenu } from './toolbar-menu';
 
 export { HeaderEditor } from './header-editor';
 export { ImagePreview } from './image-preview';
-export { GraphiQLProvider, useGraphiQL } from './provider';
+export { GraphiQLProvider, useGraphiQL, useGraphiQLActions } from './provider';
 export { QueryEditor } from './query-editor';
 export { ResponseEditor } from './response-editor';
 export { VariableEditor } from './variable-editor';

packages/graphiql-react/src/components/provider.tsx

@@ -19,7 +19,7 @@ import { PluginProps, createPluginSlice } from '../stores/plugin';
 import { SchemaProps, createSchemaSlice } from '../stores/schema';
 import { StorageStore, useStorage } from '../stores/storage';
 import { ThemeStore } from '../stores/theme';
-import { AllSlices } from '../types';
+import { SlicesWithActions } from '../types';
 import { pick, useSynchronizeValue } from '../utility';
 import {
   FragmentDefinitionNode,
@@ -48,7 +48,7 @@ type GraphiQLProviderProps =
     ComponentPropsWithoutRef<typeof StorageStore> &
     ComponentPropsWithoutRef<typeof ThemeStore>;
 
-type GraphiQLStore = UseBoundStore<StoreApi<AllSlices>>;
+type GraphiQLStore = UseBoundStore<StoreApi<SlicesWithActions>>;
 
 const GraphiQLContext = createContext<RefObject<GraphiQLStore> | null>(null);
 
@@ -164,8 +164,8 @@ const InnerGraphiQLProvider: FC<InnerGraphiQLProviderProps> = ({
         return map;
       })();
 
-      const store = create<AllSlices>((...args) => ({
-        ...createEditorSlice({
+      const store = create<SlicesWithActions>((...args) => {
+        const editorSlice = createEditorSlice({
           activeTabIndex,
           defaultHeaders,
           defaultQuery,
@@ -181,12 +181,25 @@ const InnerGraphiQLProvider: FC<InnerGraphiQLProviderProps> = ({
           onTabChange,
           shouldPersistHeaders: $shouldPersistHeaders,
           tabs,
-        })(...args),
-        ...createExecutionSlice(...args),
-        ...createPluginSlice(...args),
-        ...createSchemaSlice(...args),
-      }));
-      store.getState().storeTabs({ activeTabIndex, tabs });
+        })(...args);
+        const executionSlice = createExecutionSlice(...args);
+        const pluginSlice = createPluginSlice(...args);
+        const schemaSlice = createSchemaSlice(...args);
+        return {
+          ...editorSlice,
+          ...executionSlice,
+          ...pluginSlice,
+          ...schemaSlice,
+          actions: {
+            ...editorSlice.actions,
+            ...executionSlice.actions,
+            ...pluginSlice.actions,
+            ...schemaSlice.actions,
+          },
+        };
+      });
+      const { actions } = store.getState();
+      actions.storeTabs({ activeTabIndex, tabs });
       return store;
     }
 
@@ -224,7 +237,7 @@ const InnerGraphiQLProvider: FC<InnerGraphiQLProviderProps> = ({
     //   storage.set(STORAGE_KEY, '');
     // }
     const store = storeRef.current;
-    const { setPlugins, setVisiblePlugin } = store.getState();
+    const { setPlugins, setVisiblePlugin } = store.getState().actions;
 
     setPlugins(plugins);
     setVisiblePlugin(visiblePlugin ?? null);
@@ -260,7 +273,8 @@ const InnerGraphiQLProvider: FC<InnerGraphiQLProviderProps> = ({
     }));
 
     // Trigger introspection
-    void store.getState().introspect();
+    const { actions } = store.getState();
+    void actions.introspect();
   }, [
     schema,
     dangerouslyAssumeSchemaIsValid,
@@ -277,7 +291,8 @@ const InnerGraphiQLProvider: FC<InnerGraphiQLProviderProps> = ({
   useEffect(() => {
     function triggerIntrospection(event: KeyboardEvent) {
       if (event.ctrlKey && event.key === 'R') {
-        void storeRef.current.getState().introspect();
+        const { actions } = storeRef.current.getState();
+        void actions.introspect();
       }
     }
 
@@ -315,10 +330,16 @@ const SynchronizeValue: FC<SynchronizeValueProps> = ({
   return children as ReactElement;
 };
 
-export function useGraphiQL<T>(selector: (state: AllSlices) => T): T {
+export function useGraphiQL<T>(selector: (state: SlicesWithActions) => T): T {
   const store = useContext(GraphiQLContext);
   if (!store) {
     throw new Error('Missing `GraphiQLContext.Provider` in the tree');
   }
   return useStore(store.current, useShallow(selector));
 }
+
+/**
+ * Actions are functions used to update values in your store. They are static and never change.
+ * @see https://tkdodo.eu/blog/working-with-zustand#separate-actions-from-state
+ */
+export const useGraphiQLActions = () => useGraphiQL(state => state.actions);