graphiql 5: allow multiple independant instances on the same page

.changeset/beige-months-care.md

@@ -0,0 +1,14 @@
+---
+'@graphiql/plugin-doc-explorer': minor
+'@graphiql/plugin-explorer': major
+'@graphiql/plugin-history': minor
+'@graphiql/react': minor
+'graphiql': major
+---
+
+- allow multiple independent instances of GraphiQL on the same page
+- store `onClickReference` in query editor in React `ref`
+- remove `onClickReference` from variable editor
+- fix shortcut text per OS for run query in execute query button's tooltip and in default query
+- allow override all default GraphiQL plugins
+- adjust operation argument color to be purple from GraphiQL v2 on dark/light theme

.eslintrc.js

@@ -32,8 +32,11 @@ module.exports = {
     'functions/*',
     'packages/vscode-graphql-syntax/tests/__fixtures__/*',
     // symlinks
+    'packages/graphiql-react/__mocks__/monaco-editor.ts',
     'packages/graphiql-plugin-doc-explorer/__mocks__/zustand.ts',
+    'packages/graphiql-plugin-doc-explorer/__mocks__/monaco-editor.ts',
     'packages/graphiql-plugin-history/__mocks__/zustand.ts',
+    'packages/graphiql-plugin-history/__mocks__/monaco-editor.ts',
   ],
   overrides: [
     {
@@ -147,6 +150,10 @@ module.exports = {
             property: 'getComputedStyle',
             message: 'Use `getComputedStyle` instead',
           },
+          {
+            object: 'self',
+            message: 'Use `globalThis` instead',
+          },
         ],
         'no-return-assign': 'error',
         'no-return-await': 'error',
@@ -367,6 +374,7 @@ module.exports = {
         'unicorn/no-length-as-slice-end': 'error',
         'unicorn/prefer-string-replace-all': 'error',
         'unicorn/prefer-array-some': 'error',
+        // '@typescript-eslint/prefer-for-of': 'error', TODO
         'unicorn/no-hex-escape': 'off', // TODO: enable
         // doesn't catch a lot of cases; we use ESLint builtin `no-restricted-syntax` to forbid `.keyCode`
         'unicorn/prefer-keyboard-event-key': 'off',
@@ -379,6 +387,13 @@ module.exports = {
         'import-x/no-named-as-default-member': 'off',
       },
     },
+    {
+      files: ['packages/{monaco-graphql,graphiql*}/**/*.{ts,tsx,mts,cts}'],
+      excludedFiles: ['packages/graphiql-toolkit/**/*.{ts,tsx}'],
+      rules: {
+        '@typescript-eslint/no-unnecessary-condition': 'error',
+      },
+    },
     {
       // Rules that requires type information
       files: ['**/*.{ts,tsx,mts,cts}'],
@@ -515,9 +530,7 @@ module.exports = {
       rules: {
         '@typescript-eslint/no-restricted-imports': [
           'error',
-          ...RESTRICTED_IMPORTS
-            // TODO: enable when monaco-editor will be migrated over codemirror
-            .filter(({ name }) => name !== 'monaco-editor'),
+          ...RESTRICTED_IMPORTS,
           {
             name: 'react',
             importNames: ['memo', 'useCallback', 'useMemo'],
@@ -572,6 +585,7 @@ module.exports = {
         'react-hooks/rules-of-hooks': 'off',
         'sonarjs/no-dead-store': 'off',
         '@typescript-eslint/no-restricted-imports': 'off',
+        '@typescript-eslint/no-unnecessary-condition': 'off',
       },
     },
   ],

examples/graphiql-nextjs/package.json

@@ -4,14 +4,14 @@
   "private": true,
   "scripts": {
     "types:check": "tsc --noEmit",
-    "dev": "next --turbopack",
-    "build": "next build --turbopack",
+    "dev": "next",
+    "build": "next build",
     "start": "next start",
     "lint": "next lint"
   },
   "dependencies": {
     "graphiql": "^5.0.0-rc.0",
-    "next": "15.3.3",
+    "next": "15.4.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0"
   },

examples/monaco-graphql-nextjs/package.json

@@ -5,17 +5,17 @@
   "type": "module",
   "scripts": {
     "types:check": "tsc --noEmit",
-    "dev": "next --turbopack",
-    "build": "next build --turbopack",
+    "dev": "next",
+    "build": "next build",
     "start": "next start"
   },
   "dependencies": {
     "@graphiql/toolkit": "^0.11.3",
     "graphql": "^16.9.0",
     "jsonc-parser": "^3.2.0",
-    "monaco-editor": "^0.39.0",
+    "monaco-editor": "^0.52.2",
     "monaco-graphql": "^1.7.0",
-    "next": "15.3.3",
+    "next": "15.4.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0"
   },

examples/monaco-graphql-webpack/package.json

@@ -14,7 +14,7 @@
     "graphql-language-service": "^5.4.0",
     "json-schema": "^0.4.0",
     "jsonc-parser": "^3.2.0",
-    "monaco-editor": "^0.47.0",
+    "monaco-editor": "^0.52.2",
     "monaco-graphql": "^1.7.0",
     "prettier": "3.3.2"
   },

package.json

@@ -12,7 +12,6 @@
       "examples/monaco-graphql-nextjs",
       "examples/monaco-graphql-react-vite",
       "examples/graphiql-vite",
-      "examples/graphiql-nextjs",
       "examples/graphiql-webpack"
     ]
   },
@@ -128,7 +127,6 @@
     "wsrun": "^5.2.4"
   },
   "resolutions": {
-    "monaco-editor": "0.47.0",
     "@babel/traverse": "^7.23.2",
     "vscode-languageserver-types": "3.17.3",
     "markdown-it": "14.1.0",

packages/graphiql-plugin-doc-explorer/__mocks__/monaco-editor.ts

@@ -0,0 +1 @@
+../../graphiql/__mocks__/monaco-editor.ts

packages/graphiql-plugin-doc-explorer/setup-files.ts

@@ -2,36 +2,6 @@
 
 import '@testing-library/jest-dom';
 
-vi.mock('zustand'); // to make it works like Jest (auto-mocking)
-
-/**
- * Fixes TypeError: document.queryCommandSupported is not a function
- */
-if (!navigator.clipboard) {
-  Object.defineProperty(navigator, 'clipboard', {
-    writable: false,
-    value: {
-      write: async () => null,
-    },
-  });
-}
-
-/**
- * Fixes TypeError: mainWindow.matchMedia is not a function
- * @see https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
- */
-if (!window.matchMedia) {
-  Object.defineProperty(window, 'matchMedia', {
-    writable: false,
-    value: vi.fn().mockImplementation(query => ({
-      matches: false,
-      media: query,
-      onchange: null,
-      addListener: vi.fn(), // deprecated
-      removeListener: vi.fn(), // deprecated
-      addEventListener: vi.fn(),
-      removeEventListener: vi.fn(),
-      dispatchEvent: vi.fn(),
-    })),
-  });
-}
+// to make it works like Jest (auto-mocking)
+vi.mock('zustand');
+vi.mock('monaco-editor');

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

@@ -1,4 +1,6 @@
-import { act, render } from '@testing-library/react';
+import { Mock } from 'vitest';
+import { useGraphiQL as $useGraphiQL } from '@graphiql/react';
+import { render } from '@testing-library/react';
 import { GraphQLInt, GraphQLObjectType, GraphQLSchema } from 'graphql';
 import { FC, useEffect } from 'react';
 import {
@@ -7,7 +9,17 @@ import {
   useDocExplorerActions,
 } from '../../context';
 import { DocExplorer } from '../doc-explorer';
-import { schemaStore } from '../../../../graphiql-react/dist/stores/schema';
+
+const useGraphiQL = $useGraphiQL as Mock;
+
+vi.mock('@graphiql/react', async () => {
+  const originalModule =
+    await vi.importActual<typeof import('@graphiql/react')>('@graphiql/react');
+  return {
+    ...originalModule,
+    useGraphiQL: vi.fn(),
+  };
+});
 
 function makeSchema(fieldName = 'field') {
   return new GraphQLSchema({
@@ -29,15 +41,16 @@ function makeSchema(fieldName = 'field') {
 }
 
 const defaultSchemaContext = {
-  ...schemaStore.getInitialState(),
-  async introspect() {},
+  fetchError: null,
+  introspect() {},
+  isFetching: false,
   schema: makeSchema(),
+  validationErrors: [],
 };
 
 const withErrorSchemaContext = {
-  ...schemaStore.getInitialState(),
+  ...defaultSchemaContext,
   fetchError: 'Error fetching schema',
-  async introspect() {},
   schema: new GraphQLSchema({ description: 'GraphQL Schema for testing' }),
 };
 
@@ -50,21 +63,29 @@ const DocExplorerWithContext: FC = () => {
 };
 
 describe('DocExplorer', () => {
+  beforeEach(() => {
+    vi.resetModules();
+  });
+
   it('renders spinner when the schema is loading', () => {
-    schemaStore.setState({ isFetching: true });
+    useGraphiQL.mockImplementation(cb =>
+      cb({ ...defaultSchemaContext, isFetching: true }),
+    );
     const { container } = render(<DocExplorerWithContext />);
     const spinner = container.querySelectorAll('.graphiql-spinner');
     expect(spinner).toHaveLength(1);
   });
   it('renders with null schema', () => {
-    schemaStore.setState({ ...defaultSchemaContext, schema: null });
+    useGraphiQL.mockImplementation(cb =>
+      cb({ ...defaultSchemaContext, schema: null }),
+    );
     const { container } = render(<DocExplorerWithContext />);
     const error = container.querySelectorAll('.graphiql-doc-explorer-error');
     expect(error).toHaveLength(1);
     expect(error[0]).toHaveTextContent('No GraphQL schema available');
   });
   it('renders with schema', () => {
-    schemaStore.setState(defaultSchemaContext);
+    useGraphiQL.mockImplementation(cb => cb(defaultSchemaContext));
     const { container } = render(<DocExplorerWithContext />);
     const error = container.querySelectorAll('.graphiql-doc-explorer-error');
     expect(error).toHaveLength(0);
@@ -73,14 +94,11 @@ describe('DocExplorer', () => {
     ).toHaveTextContent('GraphQL Schema for testing');
   });
   it('renders correctly with schema error', () => {
-    schemaStore.setState(withErrorSchemaContext);
+    useGraphiQL.mockImplementation(cb => cb(withErrorSchemaContext));
     const { rerender, container } = render(<DocExplorerWithContext />);
     const error = container.querySelector('.graphiql-doc-explorer-error');
     expect(error).toHaveTextContent('Error fetching schema');
-
-    act(() => {
-      schemaStore.setState(defaultSchemaContext);
-    });
+    useGraphiQL.mockImplementation(cb => cb(defaultSchemaContext));
     rerender(<DocExplorerWithContext />);
     const errors = container.querySelectorAll('.graphiql-doc-explorer-error');
     expect(errors).toHaveLength(0);
@@ -104,45 +122,38 @@ describe('DocExplorer', () => {
     };
 
     // Initial render, set initial state
-    schemaStore.setState({
-      ...defaultSchemaContext,
-      schema: initialSchema,
-    });
+    useGraphiQL.mockImplementation(cb =>
+      cb({ ...defaultSchemaContext, schema: initialSchema }),
+    );
     const { container, rerender } = render(
       <DocExplorerStore>
         <SetInitialStack />
       </DocExplorerStore>,
     );
 
     // First proper render of doc explorer
-    act(() => {
-      schemaStore.setState({
-        ...defaultSchemaContext,
-        schema: initialSchema,
-      });
-    });
     rerender(
       <DocExplorerStore>
         <DocExplorer />
       </DocExplorerStore>,
     );
 
-    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 _same_ field name
-    act(() => {
-      schemaStore.setState({
+    useGraphiQL.mockImplementation(cb =>
+      cb({
         ...defaultSchemaContext,
         schema: makeSchema(), // <<< New, but equivalent, schema
-      });
-    });
+      }),
+    );
     rerender(
       <DocExplorerStore>
         <DocExplorer />
       </DocExplorerStore>,
     );
-    const [title2] = container.querySelectorAll('.graphiql-doc-explorer-title');
+    const title2 = container.querySelector('.graphiql-doc-explorer-title')!;
     // Because `Query.field` still exists in the new schema, we can still render it
     expect(title2.textContent).toEqual('field');
   });
@@ -166,23 +177,16 @@ describe('DocExplorer', () => {
     };
 
     // Initial render, set initial state
-    schemaStore.setState({
-      ...defaultSchemaContext,
-      schema: initialSchema,
-    });
+    useGraphiQL.mockImplementation(cb =>
+      cb({ ...defaultSchemaContext, schema: initialSchema }),
+    );
     const { container, rerender } = render(
       <DocExplorerStore>
         <SetInitialStack />
       </DocExplorerStore>,
     );
 
     // First proper render of doc explorer
-    act(() => {
-      schemaStore.setState({
-        ...defaultSchemaContext,
-        schema: initialSchema,
-      });
-    });
     rerender(
       <DocExplorerStore>
         <DocExplorer />
@@ -193,12 +197,12 @@ describe('DocExplorer', () => {
     expect(title.textContent).toEqual('field');
 
     // Second render of doc explorer, this time with a new schema, with a different field name
-    act(() => {
-      schemaStore.setState({
+    useGraphiQL.mockImplementation(cb =>
+      cb({
         ...defaultSchemaContext,
         schema: makeSchema('field2'), // <<< New schema with a new field name
-      });
-    });
+      }),
+    );
     rerender(
       <DocExplorerStore>
         <DocExplorer />