graphql · dimaMachina · May 4, 2025 · May 3, 2025 · May 3, 2025 · May 3, 2025
diff --git a/.changeset/grumpy-knives-smile.md b/.changeset/grumpy-knives-smile.md
@@ -0,0 +1,25 @@
+---
+'@graphiql/plugin-history': patch
+'@graphiql/react': minor
+'graphiql': patch
+---
+
+- export `cn` from `@graphiql/react`
+
+- remove following exports from `@graphiql/react` and move them in `@graphiql/plugin-history` package:
+  - `History`
+  - `HistoryContext`
+  - `HistoryContextType`
+  - `HistoryContextProvider`
+  - `useHistoryContext`
+  - `HISTORY_PLUGIN`
+
+- remove types from `@graphiql/react` (use `ComponentProps<typeof MyContextProviderProps>` instead):
+  - `HistoryContextProviderProps`
+  - `ExecutionContextProviderProps`
+  - `EditorContextProviderProps`
+  - `ExplorerContextProviderProps`
+  - `PluginContextProviderProps`
+  - `SchemaContextProviderProps`
+  - `StorageContextProviderProps`
+  - `GraphiQLProviderProps`
diff --git a/README.md b/README.md
@@ -190,8 +190,8 @@ This repository is managed by EasyCLA. Project participants must sign the free
 [GraphQL Specification Membership agreement](https://preview-spec-membership.graphql.org)
 before making a contribution. You only need to do this one time, and it can be
 signed by
-[individual contributors](http://individual-spec-membership.graphql.org/) or
-their [employers](http://corporate-spec-membership.graphql.org/).
+[individual contributors](http://individual-spec-membership.graphql.org) or
+their [employers](http://corporate-spec-membership.graphql.org).
 
 To initiate the signature process please open a PR against this repo. The
 EasyCLA bot will block the merge if we still need a membership agreement from

diff --git a/examples/monaco-graphql-react-vite/index.html b/examples/monaco-graphql-react-vite/index.html
@@ -5,9 +5,21 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="/src/style.css" />
     <title>Monaco React Vite Example</title>
+    <style>
+      .loading {
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 4rem;
+        width: 100%;
+      }
+    </style>
   </head>
   <body>
-    <div id="__next">Loading...</div>
+    <div id="__next">
+      <div class="loading">Loading…</div>
+    </div>
     <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>
diff --git a/examples/monaco-graphql-react-vite/package.json b/examples/monaco-graphql-react-vite/package.json
@@ -4,18 +4,18 @@
   "version": "0.0.0",
   "dependencies": {
     "@graphiql/toolkit": "^0.11.2",
-    "graphql": "^16.9.0",
+    "graphql": "^16.11.0",
     "graphql-language-service": "^5.3.1",
     "jsonc-parser": "^3.2.0",
-    "monaco-editor": "^0.39.0",
+    "monaco-editor": "^0.52.2",
     "monaco-graphql": "^1.6.1",
     "prettier": "3.3.2",
     "react": "^19.1.0",
     "react-dom": "^19.1.0"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^4.4.1",
-    "vite": "^5.4.18",
+    "vite": "^6.3.4",
     "vite-plugin-monaco-editor": "^1.1.0"
   },
   "scripts": {

diff --git a/examples/monaco-graphql-react-vite/vite.config.ts b/examples/monaco-graphql-react-vite/vite.config.ts
@@ -28,7 +28,6 @@ function watchPackages(packageNames: string[]) {
 
   return {
     name: 'vite-plugin-watch-packages',
-
     buildStart() {
       if (!isWatching) {
         for (const packageName of packageNames) {

diff --git a/package.json b/package.json
@@ -145,6 +145,7 @@
     "vscode-languageserver-types": "3.17.3",
     "markdown-it": "14.1.0",
     "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "react-dom": "18.3.1",
+    "vite": "6.3.4"
   }
 }
diff --git a/packages/codemirror-graphql/README.md b/packages/codemirror-graphql/README.md
@@ -121,5 +121,5 @@ CodeMirror.fromTextArea(myTextarea, {
 });
 ```
 
-Build for the web with [webpack](http://webpack.github.io/) or
-[browserify](http://browserify.org/).
+Build for the web with [webpack](http://webpack.github.io) or
+[browserify](http://browserify.org).
diff --git a/packages/codemirror-graphql/package.json b/packages/codemirror-graphql/package.json
@@ -4,13 +4,13 @@
   "description": "GraphQL mode and helpers for CodeMirror.",
   "contributors": [
     "Hyohyeon Jeong <[email protected]>",
-    "Lee Byron <[email protected]> (http://leebyron.com/)",
+    "Lee Byron <[email protected]> (https://leebyron.com)",
     "Angel Gomez Salazar <[email protected]>"
   ],
   "homepage": "https://github.com/graphql/graphiql/tree/main/packages/codemirror-graphql#readme",
   "repository": {
     "type": "git",
-    "url": "http://github.com/graphql/graphiql",
+    "url": "https://github.com/graphql/graphiql",
     "directory": "packages/codemirror-graphql"
   },
   "bugs": {

diff --git a/packages/graphiql-plugin-history/README.md b/packages/graphiql-plugin-history/README.md
@@ -0,0 +1 @@
+# `@graphiql/plugin-history`
diff --git a/packages/graphiql-plugin-history/package.json b/packages/graphiql-plugin-history/package.json
@@ -0,0 +1,55 @@
+{
+  "name": "@graphiql/plugin-history",
+  "version": "0.0.0",
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/graphql/graphiql",
+    "directory": "packages/graphiql-plugin-history"
+  },
+  "homepage": "https://github.com/graphql/graphiql/tree/master/packages/graphiql-plugin-history#readme",
+  "bugs": {
+    "url": "https://github.com/graphql/graphiql/issues?q=issue+label:@graphiql/plugin-history"
+  },
+  "license": "MIT",
+  "exports": {
+    "./package.json": "./package.json",
+    "./style.css": "./dist/style.css",
+    ".": "./dist/index.js"
+  },
+  "types": "dist/index.d.ts",
+  "keywords": [
+    "react",
+    "graphql",
+    "graphiql",
+    "plugin",
+    "history"
+  ],
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "vite build",
+    "test": "vitest",
+    "types:check": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
+  },
+  "dependencies": {
+    "react-compiler-runtime": "19.1.0-rc.1",
+    "@graphiql/toolkit": "^0.11.2",
+    "@graphiql/react": "^0.30.0"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^16.1.0",
+    "@vitejs/plugin-react": "^4.4.1",
+    "vite-plugin-dts": "^4.5.3",
+    "babel-plugin-react-compiler": "19.1.0-rc.1",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "vite": "^6.3.4"
+  }
+}
diff --git a/...src/history/__tests__/components.spec.tsx → ...history/src/__tests__/components.spec.tsx b/...src/history/__tests__/components.spec.tsx → ...history/src/__tests__/components.spec.tsx
@@ -1,23 +1,28 @@
-import { Mock } from 'vitest';
+import type { Mock } from 'vitest';
 import { fireEvent, render } from '@testing-library/react';
-import { ComponentProps } from 'react';
+import type { ComponentProps } from 'react';
 import { formatQuery, HistoryItem } from '../components';
 import { HistoryContextProvider } from '../context';
-import { useEditorContext } from '../../editor';
-import { Tooltip } from '../../ui';
+import { useEditorContext, Tooltip } from '@graphiql/react';
 
-vi.mock('../../editor', () => {
+vi.mock('@graphiql/react', async () => {
+  const originalModule = await vi.importActual('@graphiql/react');
   const mockedSetQueryEditor = vi.fn();
   const mockedSetVariableEditor = vi.fn();
   const mockedSetHeaderEditor = vi.fn();
   return {
+    ...originalModule,
     useEditorContext() {
       return {
         queryEditor: { setValue: mockedSetQueryEditor },
         variableEditor: { setValue: mockedSetVariableEditor },
         headerEditor: { setValue: mockedSetHeaderEditor },
+        tabs: [],
       };
     },
+    useExecutionContext() {
+      return {};
+    },
   };
 });
 
@@ -37,15 +42,15 @@ const mockOperationName = 'Test';
 
 type QueryHistoryItemProps = ComponentProps<typeof HistoryItem>;
 
-function QueryHistoryItemWithContext(props: QueryHistoryItemProps) {
+const QueryHistoryItemWithContext: typeof HistoryItem = props => {
   return (
     <Tooltip.Provider>
       <HistoryContextProvider>
         <HistoryItem {...props} />
       </HistoryContextProvider>
     </Tooltip.Provider>
   );
-}
+};
 
 const baseMockProps: QueryHistoryItemProps = {
   item: {

diff --git a/...graphiql-react/src/history/components.tsx → ...raphiql-plugin-history/src/components.tsx b/...graphiql-react/src/history/components.tsx → ...raphiql-plugin-history/src/components.tsx
@@ -1,20 +1,19 @@
 import type { QueryStoreItem } from '@graphiql/toolkit';
 import { MouseEventHandler, useEffect, useRef, useState } from 'react';
-import { clsx } from 'clsx';
-
-import { useEditorContext } from '../editor';
 import {
+  cn,
   CloseIcon,
   PenIcon,
   StarFilledIcon,
   StarIcon,
   TrashIcon,
-} from '../icons';
-import { Button, Tooltip, UnStyledButton } from '../ui';
+  useEditorContext,
+  Button,
+  Tooltip,
+  UnStyledButton,
+} from '@graphiql/react';
 import { HistoryContextType, useHistoryContext } from './context';
 
-import './style.css';
-
 // Fix error from react-compiler
 // Support value blocks (conditional, logical, optional chaining, etc) within a try/catch statement
 function handleDelete(
@@ -62,12 +61,14 @@ export function History() {
       setClearStatus('error');
     }
   };
+  const hasFavorites = Boolean(favorites.length);
+  const hasItems = Boolean(items.length);
 
   return (
     <section aria-label="History" className="graphiql-history">
       <div className="graphiql-history-header">
         History
-        {(clearStatus || items.length > 0) && (
+        {(clearStatus || hasItems) && (
           <Button
             type="button"
             state={clearStatus || undefined}
@@ -82,19 +83,19 @@ export function History() {
         )}
       </div>
 
-      {Boolean(favorites.length) && (
+      {hasFavorites && (
         <ul className="graphiql-history-items">
           {favorites.map(item => (
             <HistoryItem item={item} key={item.index} />
           ))}
         </ul>
       )}
 
-      {Boolean(favorites.length) && Boolean(items.length) && (
+      {hasFavorites && hasItems && (
         <div className="graphiql-history-item-spacer" />
       )}
 
-      {Boolean(items.length) && (
+      {hasItems && (
         <ul className="graphiql-history-items">
           {items.map(item => (
             <HistoryItem item={item} key={item.index} />
@@ -170,7 +171,7 @@ export function HistoryItem(props: QueryHistoryItemProps) {
   };
 
   return (
-    <li className={clsx('graphiql-history-item', isEditable && 'editable')}>
+    <li className={cn('graphiql-history-item', isEditable && 'editable')}>
       {isEditable ? (
         <>
           <input

diff --git a/...es/graphiql-react/src/history/context.tsx → ...s/graphiql-plugin-history/src/context.tsx b/...es/graphiql-react/src/history/context.tsx → ...s/graphiql-plugin-history/src/context.tsx
@@ -1,8 +1,12 @@
 import { HistoryStore, QueryStoreItem, StorageAPI } from '@graphiql/toolkit';
-import { ReactNode, useState } from 'react';
-
-import { useStorageContext } from '../storage';
-import { createContextHook, createNullableContext } from '../utility/context';
+import { ReactNode, useEffect, useState } from 'react';
+import {
+  useStorageContext,
+  createNullableContext,
+  createContextHook,
+  useExecutionContext,
+  useEditorContext,
+} from '@graphiql/react';
 
 export type HistoryContextType = {
   /**
@@ -72,7 +76,7 @@ export type HistoryContextType = {
 export const HistoryContext =
   createNullableContext<HistoryContextType>('HistoryContext');
 
-export type HistoryContextProviderProps = {
+type HistoryContextProviderProps = {
   children: ReactNode;
   /**
    * The maximum number of executed operations to store.
@@ -92,6 +96,7 @@ export function HistoryContextProvider({
   children,
 }: HistoryContextProviderProps) {
   const storage = useStorageContext();
+  const { isFetching } = useExecutionContext({ nonNull: true });
   const [historyStore] = useState(
     () =>
       // Fall back to a noop storage when the StorageContext is empty
@@ -119,6 +124,21 @@ export function HistoryContextProvider({
       setItems(historyStore.queries);
     },
   };
+  const { tabs, activeTabIndex } = useEditorContext({ nonNull: true });
+  const activeTab = tabs[activeTabIndex];
+  const { addToHistory } = value;
+
+  useEffect(() => {
+    if (!isFetching) {
+      return;
+    }
+    addToHistory({
+      query: activeTab.query ?? undefined,
+      variables: activeTab.variables ?? undefined,
+      headers: activeTab.headers ?? undefined,
+      operationName: activeTab.operationName ?? undefined,
+    });
+  }, [isFetching, activeTab, addToHistory]);
 
   return (
     <HistoryContext.Provider value={value}>{children}</HistoryContext.Provider>

diff --git a/packages/graphiql-plugin-history/src/index.ts b/packages/graphiql-plugin-history/src/index.ts
@@ -0,0 +1,19 @@
+import { GraphiQLPlugin, HistoryIcon } from '@graphiql/react';
+import './style.css';
+
+import { History } from './components';
+
+export const HISTORY_PLUGIN: GraphiQLPlugin = {
+  title: 'History',
+  icon: HistoryIcon,
+  content: History,
+};
+
+export { History };
+
+export {
+  HistoryContext,
+  HistoryContextProvider,
+  useHistoryContext,
+  type HistoryContextType,
+} from './context';
diff --git a/...ages/graphiql-react/src/history/style.css → ...ges/graphiql-plugin-history/src/style.css b/...ages/graphiql-react/src/history/style.css → ...ges/graphiql-plugin-history/src/style.css
diff --git a/packages/graphiql-plugin-history/tsconfig.json b/packages/graphiql-plugin-history/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../graphiql-react/tsconfig.json"
+}