refactor useStorage, useDocExplorer and useHistory hooks and their stores (#3947)

* 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

* storage

* storage

* storage

* storage

* storage

* upd

* upd

* upd

* upd

* upd

* upd

* changeset

* upd

* fix unit test

* rm so ts expect error

* upd

* fix tabs tests

* fix history tests

Author: dimaMachina

.changeset/itchy-spies-develop.md

@@ -0,0 +1,9 @@
+---
+'@graphiql/plugin-doc-explorer': minor
+'@graphiql/plugin-explorer': patch
+'@graphiql/plugin-history': minor
+'@graphiql/react': minor
+'graphiql': patch
+---
+
+refactor `useStorage`, `useDocExplorer` and `useHistory` hooks

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

@@ -9,7 +9,7 @@ export const PREV_URLS_KEY = 'previousURLs';
 
 const SelectServer = ({ url, setUrl }) => {
   const inputRef = React.useRef(null);
-  const storage = useStorage({ nonNull: true });
+  const storage = useStorage();
   const lastUrl = storage.get(LAST_URL_KEY);
   const currentUrl = lastUrl ?? url;
   const [inputValue, setInputValue] = React.useState(currentUrl);

package.json

@@ -16,6 +16,7 @@
   "scripts": {
     "types:check": "turbo run types:check",
     "dev:graphiql": "turbo run dev --filter=graphiql...",
+    "build:graphiql": "turbo run build --filter=graphiql...",
     "build": "yarn build-clean && yarn tsc && yarn build:nontsc",
     "build-bundles": "yarn prebuild-bundles && yarn wsrun:noexamples --stages build-bundles",
     "build-bundles-clean": "rimraf '{packages,examples}/**/{bundle,cdn,webpack}'",

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

@@ -195,7 +195,7 @@ describe('DocExplorer', () => {
       </DocExplorerContextProvider>,
     );
 
-    const [title] = container.querySelectorAll('.graphiql-doc-explorer-title');
+    const title = container.querySelector('.graphiql-doc-explorer-title')!;
     expect(title.textContent).toEqual('field');
 
     // Second render of doc explorer, this time with a new schema, with a different field name
@@ -210,7 +210,7 @@ describe('DocExplorer', () => {
         <DocExplorer />
       </DocExplorerContextProvider>,
     );
-    const [title2] = container.querySelectorAll('.graphiql-doc-explorer-title');
+    const title2 = container.querySelector('.graphiql-doc-explorer-title')!;
     // Because `Query.field` doesn't exist anymore, the top-most item we can render is `Query`
     expect(title2.textContent).toEqual('Query');
   });

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

@@ -1,9 +1,8 @@
-import { FC } from 'react';
+import { FC, useEffect } from 'react';
 import { fireEvent, render } from '@testing-library/react';
 import { GraphQLString, GraphQLObjectType, Kind } from 'graphql';
-import { DocExplorerContext, DocExplorerFieldDef } from '../../context';
+import { DocExplorerFieldDef, docExplorerStore } from '../../context';
 import { FieldDocumentation } from '../field-documentation';
-import { useMockDocExplorerContextValue } from './test-utils';
 
 const exampleObject = new GraphQLObjectType({
   name: 'Query',
@@ -55,17 +54,19 @@ const exampleObject = new GraphQLObjectType({
 
 const FieldDocumentationWithContext: FC<{
   field: DocExplorerFieldDef;
-}> = props => {
-  return (
-    <DocExplorerContext.Provider
-      value={useMockDocExplorerContextValue({
-        name: props.field.name,
-        def: props.field,
-      })}
-    >
-      <FieldDocumentation field={props.field} />
-    </DocExplorerContext.Provider>
-  );
+}> = ({ field }) => {
+  useEffect(() => {
+    docExplorerStore.setState({
+      explorerNavStack: [
+        {
+          name: field.name,
+          def: field,
+        },
+      ],
+    });
+  }, [field]);
+
+  return <FieldDocumentation field={field} />;
 };
 
 describe('FieldDocumentation', () => {

packages/graphiql-plugin-doc-explorer/src/components/__tests__/test-utils.ts

@@ -1,13 +1,5 @@
 'use no memo';
-import { useRef } from 'react';
 import { GraphQLNamedType, GraphQLType } from 'graphql';
-import { createDocExplorerStore, DocExplorerNavStackItem } from '../../context';
-
-export function useMockDocExplorerContextValue(
-  navStackItem: DocExplorerNavStackItem,
-) {
-  return useRef(createDocExplorerStore(navStackItem));
-}
 
 export function unwrapType(type: GraphQLType): GraphQLNamedType {
   return 'ofType' in type ? unwrapType(type.ofType) : type;

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

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, useEffect } from 'react';
 import { fireEvent, render } from '@testing-library/react';
 import { GraphQLNamedType } from 'graphql';
 import {
@@ -7,31 +7,26 @@ import {
   ExampleUnion,
   ExampleQuery,
 } from './fixtures';
-import { DocExplorerContext } from '../../context';
+import { docExplorerStore } from '../../context';
 import { TypeDocumentation } from '../type-documentation';
-import { useMockDocExplorerContextValue, unwrapType } from './test-utils';
+import { unwrapType } from './test-utils';
+import { schemaStore } from '../../../../graphiql-react/dist/schema';
 
-vi.mock('@graphiql/react', async () => {
-  const actual = await vi.importActual('@graphiql/react');
-  return {
-    ...actual,
-    useSchemaStore: () => ({
-      schema: ExampleSchema,
-    }),
-  };
-});
-
-const TypeDocumentationWithContext: FC<{ type: GraphQLNamedType }> = props => {
-  return (
-    <DocExplorerContext.Provider
-      value={useMockDocExplorerContextValue({
-        name: unwrapType(props.type).name,
-        def: props.type,
-      })}
-    >
-      <TypeDocumentation type={props.type} />
-    </DocExplorerContext.Provider>
-  );
+const TypeDocumentationWithContext: FC<{ type: GraphQLNamedType }> = ({
+  type,
+}) => {
+  useEffect(() => {
+    schemaStore.setState({ schema: ExampleSchema });
+    docExplorerStore.setState({
+      explorerNavStack: [
+        {
+          name: unwrapType(type).name,
+          def: type,
+        },
+      ],
+    });
+  }, [type]);
+  return <TypeDocumentation type={type} />;
 };
 
 describe('TypeDocumentation', () => {

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

@@ -1,9 +1,9 @@
-import { FC } from 'react';
+import { FC, useEffect } from 'react';
 import { fireEvent, render } from '@testing-library/react';
 import { GraphQLNonNull, GraphQLList, GraphQLString } from 'graphql';
-import { DocExplorerContext, useDocExplorer } from '../../context';
+import { docExplorerStore, useDocExplorer } from '../../context';
 import { TypeLink } from '../type-link';
-import { useMockDocExplorerContextValue, unwrapType } from './test-utils';
+import { unwrapType } from './test-utils';
 
 const nonNullType = new GraphQLNonNull(GraphQLString);
 const listType = new GraphQLList(GraphQLString);
@@ -17,18 +17,24 @@ const TypeLinkConsumer: FC = () => {
   );
 };
 
-const TypeLinkWithContext: typeof TypeLink = props => {
+const TypeLinkWithContext: typeof TypeLink = ({ type }) => {
+  useEffect(() => {
+    docExplorerStore.setState({
+      explorerNavStack: [
+        {
+          name: unwrapType(type).name,
+          def: unwrapType(type),
+        },
+      ],
+    });
+  }, [type]);
+
   return (
-    <DocExplorerContext.Provider
-      value={useMockDocExplorerContextValue({
-        name: unwrapType(props.type).name,
-        def: unwrapType(props.type),
-      })}
-    >
-      <TypeLink {...props} />
+    <>
+      <TypeLink type={type} />
       {/* Print the top of the current nav stack for test assertions */}
       <TypeLinkConsumer />
-    </DocExplorerContext.Provider>
+    </>
   );
 };
 

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

@@ -200,16 +200,16 @@ const EnumValue: FC<{ value: GraphQLEnumValue }> = ({ value }) => {
   return (
     <div className="graphiql-doc-explorer-item">
       <div className="graphiql-doc-explorer-enum-value">{value.name}</div>
-      {value.description ? (
+      {value.description && (
         <MarkdownContent type="description">
           {value.description}
         </MarkdownContent>
-      ) : null}
-      {value.deprecationReason ? (
+      )}
+      {value.deprecationReason && (
         <MarkdownContent type="deprecation">
           {value.deprecationReason}
         </MarkdownContent>
-      ) : null}
+      )}
     </div>
   );
 };

packages/graphiql-plugin-doc-explorer/src/context.tsx renamed to packages/graphiql-plugin-doc-explorer/src/context.ts

@@ -14,17 +14,9 @@ import {
   isScalarType,
   isUnionType,
 } from 'graphql';
-import {
-  createContext,
-  FC,
-  ReactNode,
-  RefObject,
-  useContext,
-  useEffect,
-  useRef,
-} from 'react';
+import { FC, ReactElement, ReactNode, useEffect } from 'react';
 import { SchemaContextType, useSchemaStore } from '@graphiql/react';
-import { createStore, StoreApi, useStore } from 'zustand';
+import { createStore, useStore } from 'zustand';
 
 export type DocExplorerFieldDef =
   | GraphQLField<unknown, unknown>
@@ -80,11 +72,11 @@ export type DocExplorerContextType = {
   };
 };
 
-export function createDocExplorerStore(
-  initialNavStackItem: DocExplorerNavStackItem = { name: 'Docs' },
-) {
-  return createStore<DocExplorerContextType>((set, get) => ({
-    explorerNavStack: [initialNavStackItem],
+const INITIAL_NAV_STACK: DocExplorerNavStack = [{ name: 'Docs' }];
+
+export const docExplorerStore = createStore<DocExplorerContextType>(
+  (set, get) => ({
+    explorerNavStack: INITIAL_NAV_STACK,
     actions: {
       push(item) {
         set(state => {
@@ -110,8 +102,7 @@ export function createDocExplorerStore(
       reset() {
         set(state => {
           const curr = state.explorerNavStack;
-          const explorerNavStack: DocExplorerNavStack =
-            curr.length === 1 ? curr : [initialNavStackItem];
+          const explorerNavStack = curr.length === 1 ? curr : INITIAL_NAV_STACK;
           return { explorerNavStack };
         });
       },
@@ -161,13 +152,14 @@ export function createDocExplorerStore(
           if (oldNavStack.length === 1) {
             return oldNavStack;
           }
-          const newNavStack: DocExplorerNavStack = [initialNavStackItem];
+          // Spread is needed
+          const newNavStack: DocExplorerNavStack = [...INITIAL_NAV_STACK];
           let lastEntity:
             | GraphQLNamedType
             | GraphQLField<unknown, unknown>
             | null = null;
           for (const item of oldNavStack) {
-            if (item === initialNavStackItem) {
+            if (item === INITIAL_NAV_STACK[0]) {
               // No need to copy the initial item
               continue;
             }
@@ -236,32 +228,23 @@ export function createDocExplorerStore(
         });
       },
     },
-  }));
-}
-
-export const DocExplorerContext = createContext<RefObject<
-  StoreApi<DocExplorerContextType>
-> | null>(null);
+  }),
+);
 
 export const DocExplorerContextProvider: FC<{
   children: ReactNode;
-}> = props => {
+}> = ({ children }) => {
   const { schema, validationErrors, schemaReference } = useSchemaStore();
-  const storeRef = useRef<StoreApi<DocExplorerContextType>>(null!);
-
-  if (storeRef.current === null) {
-    storeRef.current = createDocExplorerStore();
-  }
 
   useEffect(() => {
     const { resolveSchemaReferenceToNavItem } =
-      storeRef.current.getState().actions;
+      docExplorerStore.getState().actions;
     resolveSchemaReferenceToNavItem(schemaReference);
   }, [schemaReference]);
 
   useEffect(() => {
     const { reset, rebuildNavStackWithSchema } =
-      storeRef.current.getState().actions;
+      docExplorerStore.getState().actions;
 
     // Whenever the schema changes, we must revalidate/replace the nav stack.
     if (schema == null || validationErrors.length > 0) {
@@ -271,21 +254,13 @@ export const DocExplorerContextProvider: FC<{
     }
   }, [schema, validationErrors]);
 
-  return (
-    <DocExplorerContext.Provider value={storeRef}>
-      {props.children}
-    </DocExplorerContext.Provider>
-  );
+  return children as ReactElement;
 };
 
 function useDocExplorerStore<T>(
   selector: (state: DocExplorerContextType) => T,
 ): T {
-  const store = useContext(DocExplorerContext);
-  if (!store) {
-    throw new Error('Missing `DocExplorerContextProvider` in the tree');
-  }
-  return useStore(store.current, selector);
+  return useStore(docExplorerStore, selector);
 }
 
 export const useDocExplorer = () =>

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

@@ -9,7 +9,6 @@ import { DocExplorer } from './components';
 export * from './components';
 
 export {
-  DocExplorerContext,
   DocExplorerContextProvider,
   useDocExplorer,
   useDocExplorerActions,

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

@@ -3,7 +3,11 @@ import { fireEvent, render } from '@testing-library/react';
 import type { ComponentProps } from 'react';
 import { formatQuery, HistoryItem } from '../components';
 import { HistoryContextProvider } from '../context';
-import { useEditorContext, Tooltip } from '@graphiql/react';
+import {
+  useEditorContext,
+  Tooltip,
+  StorageContextProvider,
+} from '@graphiql/react';
 
 vi.mock('@graphiql/react', async () => {
   const originalModule = await vi.importActual('@graphiql/react');
@@ -45,9 +49,11 @@ type QueryHistoryItemProps = ComponentProps<typeof HistoryItem>;
 const QueryHistoryItemWithContext: typeof HistoryItem = props => {
   return (
     <Tooltip.Provider>
-      <HistoryContextProvider>
-        <HistoryItem {...props} />
-      </HistoryContextProvider>
+      <StorageContextProvider>
+        <HistoryContextProvider>
+          <HistoryItem {...props} />
+        </HistoryContextProvider>
+      </StorageContextProvider>
     </Tooltip.Provider>
   );
 };