[2] remove useQueryEditor, useVariableEditor, useHeaderEditor, useResponseEditor hooks

.changeset/warm-shoes-boil.md

@@ -0,0 +1,16 @@
+---
+'@graphiql/react': minor
+'@graphiql/plugin-history': minor
+'@graphiql/plugin-doc-explorer': minor
+'graphiql': patch
+---
+
+- remove `useQueryEditor`, `useVariableEditor`, `useHeaderEditor`, `useResponseEditor` hooks
+- remove `UseHeaderEditorArgs`, `UseQueryEditorArgs`, `UseResponseEditorArgs`, `UseVariableEditorArgs` exports
+- rename components
+  - `StorageContextProvider` => `StorageStore`
+  - `EditorContextProvider` => `EditorStore`
+  - `SchemaContextProvider` => `SchemaStore`
+  - `ExecutionContextProvider` => `ExecutionStore`
+  - `HistoryContextProvider` => `HistoryStore`
+  - `ExplorerContextProvider` => `ExplorerStore`

packages/graphiql-plugin-doc-explorer/README.md

@@ -1 +1,6 @@
 # `@graphiql/plugin-doc-explorer`
+
+## API
+
+- `useDocExplorer`: Handles the state for the doc explorer
+- `useDocExplorerActions`: Actions related to the doc explorer

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

@@ -2,12 +2,12 @@ import { act, render } from '@testing-library/react';
 import { GraphQLInt, GraphQLObjectType, GraphQLSchema } from 'graphql';
 import { FC, useEffect } from 'react';
 import {
-  DocExplorerContextProvider,
+  DocExplorerStore,
   useDocExplorer,
   useDocExplorerActions,
 } from '../../context';
 import { DocExplorer } from '../doc-explorer';
-import { schemaStore } from '../../../../graphiql-react/dist/schema';
+import { schemaStore } from '../../../../graphiql-react/dist/stores/schema';
 
 function makeSchema(fieldName = 'field') {
   return new GraphQLSchema({
@@ -43,9 +43,9 @@ const withErrorSchemaContext = {
 
 const DocExplorerWithContext: FC = () => {
   return (
-    <DocExplorerContextProvider>
+    <DocExplorerStore>
       <DocExplorer />
-    </DocExplorerContextProvider>
+    </DocExplorerStore>
   );
 };
 
@@ -109,9 +109,9 @@ describe('DocExplorer', () => {
       schema: initialSchema,
     });
     const { container, rerender } = render(
-      <DocExplorerContextProvider>
+      <DocExplorerStore>
         <SetInitialStack />
-      </DocExplorerContextProvider>,
+      </DocExplorerStore>,
     );
 
     // First proper render of doc explorer
@@ -122,9 +122,9 @@ describe('DocExplorer', () => {
       });
     });
     rerender(
-      <DocExplorerContextProvider>
+      <DocExplorerStore>
         <DocExplorer />
-      </DocExplorerContextProvider>,
+      </DocExplorerStore>,
     );
 
     const [title] = container.querySelectorAll('.graphiql-doc-explorer-title');
@@ -138,9 +138,9 @@ describe('DocExplorer', () => {
       });
     });
     rerender(
-      <DocExplorerContextProvider>
+      <DocExplorerStore>
         <DocExplorer />
-      </DocExplorerContextProvider>,
+      </DocExplorerStore>,
     );
     const [title2] = container.querySelectorAll('.graphiql-doc-explorer-title');
     // Because `Query.field` still exists in the new schema, we can still render it
@@ -171,9 +171,9 @@ describe('DocExplorer', () => {
       schema: initialSchema,
     });
     const { container, rerender } = render(
-      <DocExplorerContextProvider>
+      <DocExplorerStore>
         <SetInitialStack />
-      </DocExplorerContextProvider>,
+      </DocExplorerStore>,
     );
 
     // First proper render of doc explorer
@@ -184,9 +184,9 @@ describe('DocExplorer', () => {
       });
     });
     rerender(
-      <DocExplorerContextProvider>
+      <DocExplorerStore>
         <DocExplorer />
-      </DocExplorerContextProvider>,
+      </DocExplorerStore>,
     );
 
     const title = container.querySelector('.graphiql-doc-explorer-title')!;
@@ -200,9 +200,9 @@ describe('DocExplorer', () => {
       });
     });
     rerender(
-      <DocExplorerContextProvider>
+      <DocExplorerStore>
         <DocExplorer />
-      </DocExplorerContextProvider>,
+      </DocExplorerStore>,
     );
     const title2 = container.querySelector('.graphiql-doc-explorer-title')!;
     // Because `Query.field` doesn't exist anymore, the top-most item we can render is `Query`

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

@@ -10,7 +10,7 @@ import {
 import { docExplorerStore } from '../../context';
 import { TypeDocumentation } from '../type-documentation';
 import { unwrapType } from './test-utils';
-import { schemaStore } from '../../../../graphiql-react/dist/schema';
+import { schemaStore } from '../../../../graphiql-react/dist/stores/schema';
 
 const TypeDocumentationWithContext: FC<{ type: GraphQLNamedType }> = ({
   type,

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

@@ -16,7 +16,7 @@ import {
 } from 'graphql';
 import { FC, ReactElement, ReactNode, useEffect } from 'react';
 import {
-  SchemaContextType,
+  SchemaReference,
   useSchemaStore,
   createBoundedUseStore,
 } from '@graphiql/react';
@@ -45,7 +45,7 @@ export type DocExplorerNavStack = [
   ...DocExplorerNavStackItem[],
 ];
 
-export type DocExplorerContextType = {
+export type DocExplorerStoreType = {
   /**
    * A stack of navigation items. The last item in the list is the current one.
    * This list always contains at least one item.
@@ -67,7 +67,7 @@ export type DocExplorerContextType = {
      */
     reset(): void;
     resolveSchemaReferenceToNavItem(
-      schemaReference: SchemaContextType['schemaReference'],
+      schemaReference: SchemaReference | null,
     ): void;
     /**
      * Replace the nav stack with an updated version using the new schema.
@@ -78,7 +78,7 @@ export type DocExplorerContextType = {
 
 const INITIAL_NAV_STACK: DocExplorerNavStack = [{ name: 'Docs' }];
 
-export const docExplorerStore = createStore<DocExplorerContextType>(
+export const docExplorerStore = createStore<DocExplorerStoreType>(
   (set, get) => ({
     explorerNavStack: INITIAL_NAV_STACK,
     actions: {
@@ -235,7 +235,7 @@ export const docExplorerStore = createStore<DocExplorerContextType>(
   }),
 );
 
-export const DocExplorerContextProvider: FC<{
+export const DocExplorerStore: FC<{
   children: ReactNode;
 }> = ({ children }) => {
   const { schema, validationErrors, schemaReference } = useSchemaStore();

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

@@ -9,13 +9,12 @@ import { DocExplorer } from './components';
 export * from './components';
 
 export {
-  DocExplorerContextProvider,
+  DocExplorerStore,
   useDocExplorer,
   useDocExplorerActions,
 } from './context';
 
 export type {
-  DocExplorerContextType,
   DocExplorerFieldDef,
   DocExplorerNavStack,
   DocExplorerNavStackItem,

packages/graphiql-plugin-history/README.md

@@ -1 +1,6 @@
 # `@graphiql/plugin-history`
+
+## API
+
+- `useHistory`: Persists executed requests in storage
+- `useHistoryActions`: Actions related to the history

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

@@ -1,9 +1,9 @@
 import { fireEvent, render } from '@testing-library/react';
 import type { ComponentProps } from 'react';
 import { formatQuery, HistoryItem } from '../components';
-import { HistoryContextProvider } from '../context';
+import { HistoryStore } from '../context';
 import { Tooltip, GraphiQLProvider } from '@graphiql/react';
-import { editorStore } from '../../../graphiql-react/dist/editor/context';
+import { editorStore } from '../../../graphiql-react/dist/stores/editor';
 
 const mockQuery = /* GraphQL */ `
   query Test($string: String) {
@@ -25,9 +25,9 @@ const QueryHistoryItemWithContext: typeof HistoryItem = props => {
   return (
     <Tooltip.Provider>
       <GraphiQLProvider fetcher={vi.fn()}>
-        <HistoryContextProvider>
+        <HistoryStore>
           <HistoryItem {...props} />
-        </HistoryContextProvider>
+        </HistoryStore>
       </GraphiQLProvider>
     </Tooltip.Provider>
   );

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

@@ -1,15 +1,18 @@
 // eslint-disable-next-line react/jsx-filename-extension -- TODO
 import { FC, ReactElement, ReactNode, useEffect } from 'react';
 import { createStore } from 'zustand';
-import { HistoryStore, QueryStoreItem } from '@graphiql/toolkit';
+import {
+  HistoryStore as ToolkitHistoryStore,
+  QueryStoreItem,
+} from '@graphiql/toolkit';
 import {
   useExecutionStore,
   useEditorStore,
   useStorage,
   createBoundedUseStore,
 } from '@graphiql/react';
 
-const historyStore = createStore<HistoryContextType>((set, get) => ({
+const historyStore = createStore<HistoryStoreType>((set, get) => ({
   historyStorage: null!,
   actions: {
     addToHistory(operation) {
@@ -36,8 +39,8 @@ const historyStore = createStore<HistoryContextType>((set, get) => ({
   },
 }));
 
-type HistoryContextType = {
-  historyStorage: HistoryStore;
+type HistoryStoreType = {
+  historyStorage: ToolkitHistoryStore;
   actions: {
     /**
      * Add an operation to the history.
@@ -100,7 +103,7 @@ type HistoryContextType = {
   };
 };
 
-type HistoryContextProviderProps = {
+type HistoryStoreProps = {
   children: ReactNode;
   /**
    * The maximum number of executed operations to store.
@@ -110,12 +113,12 @@ type HistoryContextProviderProps = {
 };
 
 /**
- * The functions send the entire operation so users can customize their own application with
- * <HistoryContext.Provider value={customizedFunctions} /> and get access to the operation plus
- * any additional props they added for their needs (i.e., build their own functions that may save
- * to a backend instead of localStorage and might need an id property added to the QueryStoreItem)
+ * The functions send the entire operation so users can customize their own application and get
+ * access to the operation plus any additional props they added for their needs (i.e., build their
+ * own functions that may save to a backend instead of localStorage and might need an id property
+ * added to the `QueryStoreItem`)
  */
-export const HistoryContextProvider: FC<HistoryContextProviderProps> = ({
+export const HistoryStore: FC<HistoryStoreProps> = ({
   maxHistoryLength = 20,
   children,
 }) => {
@@ -125,7 +128,7 @@ export const HistoryContextProvider: FC<HistoryContextProviderProps> = ({
   const storage = useStorage();
 
   const historyStorage = // eslint-disable-line react-hooks/exhaustive-deps -- false positive, code is optimized by React Compiler
-    new HistoryStore(storage, maxHistoryLength);
+    new ToolkitHistoryStore(storage, maxHistoryLength);
 
   useEffect(() => {
     historyStore.setState({ historyStorage });

packages/graphiql-plugin-history/src/index.ts

@@ -11,8 +11,4 @@ export const HISTORY_PLUGIN: GraphiQLPlugin = {
 
 export { History };
 
-export {
-  HistoryContextProvider,
-  useHistory,
-  useHistoryActions,
-} from './context';
+export { HistoryStore, useHistory, useHistoryActions } from './context';

packages/graphiql-react/README.md

@@ -81,24 +81,21 @@ Further details on how to use `@graphiql/react` can be found in the reference
 implementation of a GraphQL IDE - Graph*i*QL - in the
 [`graphiql` package](https://github.com/graphql/graphiql/blob/main/packages/graphiql/src/components/GraphiQL.tsx).
 
-## Available contexts
+## Available stores
 
-There are multiple contexts that own different parts of the state that make up a
-complete GraphQL IDE. For each context there is a provider component
-(`<name>ContextProvider`) that makes sure the context is initialized and managed
+There are multiple stores that own different parts of the state that make up a
+complete GraphQL IDE. For each store there is a component
+(`<name>Store`) that makes sure the store is initialized and managed
 properly. These components contains all the logic related to state management.
-In addition, for each context there is also a hook (`use<name>Context`) that
-allows you to consume its current value.
 
-Here is a list of all contexts that come with `@graphiql/react`
+In addition, for each store, there is also a hook that
+allows you to consume its current value:
 
-- `StorageContext`: Provides a storage API that can be used to persist state in
+- `useStorage`: Provides a storage API that can be used to persist state in
   the browser (by default using `localStorage`)
-- `EditorContext`: Manages all the editors and tabs
-- `SchemaContext`: Fetches, validates and stores the GraphQL schema
-- `ExecutionContext`: Executes GraphQL requests
-- `HistoryContext`: Persists executed requests in storage
-- `ExplorerContext`: Handles the state for the docs explorer
+- `useEditorStore`: Manages all the editors and tabs
+- `useSchemaStore`: Fetches, validates and stores the GraphQL schema
+- `useExecutionStore`: Executes GraphQL requests
 
 All context properties are documented using JSDoc comments. If you're using an
 IDE like VSCode for development these descriptions will show up in auto-complete

packages/graphiql-react/src/editor/__tests__/tabs.spec.ts

@@ -7,7 +7,7 @@ import {
   clearHeadersFromTabs,
   STORAGE_KEY,
 } from '../tabs';
-import { storageStore } from '../../storage';
+import { storageStore } from '../../stores/storage';
 
 describe('createTab', () => {
   it('creates with default title', () => {

packages/graphiql-react/src/editor/completion.ts

@@ -8,9 +8,8 @@ import {
   isNonNullType,
 } from 'graphql';
 import { markdown } from '../utility';
-import { pluginStore } from '../plugin';
+import { pluginStore, schemaStore } from '../stores';
 import { importCodeMirror } from './common';
-import { schemaStore } from '../schema';
 
 /**
  * Render a custom UI for CodeMirror's hint which includes additional info