fix multiple GraphiQL instances, append an incremented number for operation, request headers, variables and reponse URI. (#4052)

* upd

* upd

* upd

* upd

* upd

* upd

* upd

* upd

* upd

* upd

* upd

* upd

* upd

* upd

* upd

* fix react 19

* try this

* upd

* Update packages/graphiql/cypress/support/commands.ts

Author: dimaMachina

.changeset/five-ghosts-bathe.md

@@ -0,0 +1,21 @@
+---
+'@graphiql/react': patch
+'graphiql': patch
+---
+
+fix multiple GraphiQL instances, suffix a unique id for operation, request headers, variables and response URI.
+
+E.g., the first GraphiQL instance will have:
+- `1-operation.graphql`
+- `1-request-headers.json`
+- `1-variables.json`
+- `1-response.json`
+
+The 2nd instance will have:
+
+- `2-operation.graphql`
+- `2-request-headers.json`
+- `2-variables.json`
+- `2-response.json`
+
+etc.

.changeset/proud-bottles-punch.md

@@ -5,4 +5,4 @@
 
 - use `allowTrailingComma` option in jsonc parser to make `tryParseJsonObject` sync
 - parse introspection headers with jsonc parser
-- use prettier format for query editor since we already use prettier for jsonc editors
+- use prettier format for operation editor since we already use prettier for jsonc editors

docs/migration/graphiql-2.0.0.md

@@ -229,10 +229,10 @@ override certain parts of the UI:
 
 - `GraphiQL.Logo`: Overrides the "logo" at the top right of the screen. By
   default, it contains the text "Graph*i*QL".
-- `GraphiQL.Toolbar`: Overrides the toolbar next to the query editor. By
+- `GraphiQL.Toolbar`: Overrides the toolbar next to the operation editor. By
   default, if contains buttons for prettifying the current editor contents,
   merging fragment definitions into the operation definition and copying the
-  contents of the query editor to the clipboard. Note that the default buttons
+  contents of the operation editor to the clipboard. Note that the default buttons
   will not be shown when passing this component as child to `GraphiQL`, instead
   it will show the children you pass to `GraphiQL.Toolbar`. The execute button
   will always be shown. If you want to keep the default buttons and add

docs/migration/graphiql-5.0.0.md

@@ -132,7 +132,7 @@ function App() {
 
 - Migration from Codemirror to [Monaco Editor](https://github.com/microsoft/monaco-editor)
   - Replacing `codemirror-graphql` with [`monaco-graphql`](../../packages/monaco-graphql)
-  - Clicking on a reference in the query editor now works by holding `Cmd` on macOS or `Ctrl` on Windows/Linux
+  - Clicking on a reference in the operation editor now works by holding `Cmd` on macOS or `Ctrl` on Windows/Linux
 - Support for comments in **Variables** and **Headers** editors
 - Added new examples: [**GraphiQL x Vite**](../../examples/graphiql-vite) and [**GraphiQL x Next.js**](../../examples/graphiql-nextjs)
 - Removed examples: **GraphiQL x Parcel** and **GraphiQL x Create React App**
@@ -149,7 +149,7 @@ function App() {
 >
 > If you used `query`, `variables` and `headers` in integration tests, you can use the new `initialQuery`,
 > `initialVariables` and `initialHeaders` props instead. These props will only be used for the first tab.
-> When opening more tabs, the query editor will start out empty.
+> When opening more tabs, the operation editor will start out empty.
 
 - Added new props
   - `initialQuery`
@@ -163,14 +163,14 @@ function App() {
 
 > [!IMPORTANT]
 >
-> Clicking on a reference in the Query editor now works by holding `Cmd` on macOS or `Ctrl` on Windows/Linux.
+> Clicking on a reference in the operation editor now works by holding `Cmd` on macOS or `Ctrl` on Windows/Linux.
 
 - `usePrettifyEditors`, `useCopyQuery`, `useMergeQuery`, `useExecutionContext`, `usePluginContext`, `useSchemaContext`, `useStorageContext` hooks are deprecated.
 - Add new `useGraphiQL` and `useGraphiQLActions` hooks instead. See updated [README](../../packages/graphiql-react/README.md#available-stores) for more details about them.
 - remove `useSynchronizeValue` hook
 - fix `defaultQuery` with empty string does not result in an empty default query
-- fix `defaultQuery`, when is set will only be used for the first tab. When opening more tabs, the query editor will start out empty
-- fix execute query shortcut in query editor, run it even there are no operations in query editor
+- fix `defaultQuery`, when is set will only be used for the first tab. When opening more tabs, the operation editor will start out empty
+- fix execute query shortcut in operation editor, run it even there are no operations in the operation editor
 - fix plugin store, save last opened plugin in storage
 - remove `onClickReference` from variable editor
 - fix shortcut text per OS for default query and in run query in execute query button's tooltip

packages/graphiql-react/README.md

@@ -44,7 +44,7 @@ function MyGraphQLIDE() {
 ```
 
 Inside the provider you can now use any UI component provided by
-`@graphiql/react`. For example, you can render a query editor like this:
+`@graphiql/react`. For example, you can render an operation editor like this:
 
 ```jsx
 import { QueryEditor } from '@graphiql/react';

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

@@ -2,12 +2,12 @@ export { ExecuteButton } from './execute-button';
 export { ToolbarButton } from './toolbar-button';
 export { ToolbarMenu } from './toolbar-menu';
 
-export { HeaderEditor } from './header-editor';
+export { RequestHeadersEditor as HeaderEditor } from './request-headers-editor';
 export { ImagePreview } from './image-preview';
 export { GraphiQLProvider, useGraphiQL, useGraphiQLActions } from './provider';
-export { QueryEditor } from './query-editor';
+export { OperationEditor as QueryEditor } from './operation-editor';
 export { ResponseEditor } from './response-editor';
-export { VariableEditor } from './variable-editor';
+export { VariablesEditor as VariableEditor } from './variables-editor';
 
 export { Button, UnStyledButton } from './button';
 export { ButtonGroup } from './button-group';

packages/graphiql-react/src/components/markdown-content/index.css

@@ -1,8 +1,8 @@
 /**
  * We render markdown in the following places:
- * - In the hint tooltip when typing in the query editor (field description
+ * - In the hint tooltip when typing in the operation editor (field description
  *   and, optionally, deprecation reason).
- * - In the info tooltip when hovering over a field in the query editor
+ * - In the info tooltip when hovering over a field in the operation editor
  *   (field description and, optionally, deprecation reason).
  */
 
@@ -123,8 +123,8 @@
 
 /**
  * We show deprecations in the following places:
- * - In the hint tooltip when typing in the query editor.
- * - In the info tooltip when hovering over a field in the query editor.
+ * - In the hint tooltip when typing in the operation editor.
+ * - In the info tooltip when hovering over a field in the operation editor.
  */
 
 .CodeMirror-hint-information-deprecation,

packages/graphiql-react/src/components/query-editor.tsx renamed to packages/graphiql-react/src/components/operation-editor.tsx

@@ -16,20 +16,22 @@ import {
 import type { MonacoEditor, EditorProps, SchemaReference } from '../types';
 import {
   KEY_BINDINGS,
-  MONACO_GRAPHQL_API,
-  QUERY_URI,
+  URI_NAME,
   STORAGE_KEY,
+  MONACO_GRAPHQL_DIAGNOSTIC_SETTINGS,
+  MONACO_GRAPHQL_API,
 } from '../constants';
 import {
   type editor as monacoEditor,
   languages,
   Range,
+  Uri,
 } from '../monaco-editor';
 import * as monaco from '../monaco-editor';
 import { getContextAtPosition } from 'graphql-language-service/esm/parser';
 import { toGraphQLPosition } from 'monaco-graphql/esm/utils';
 
-interface QueryEditorProps extends EditorProps {
+interface OperationEditorProps extends EditorProps {
   /**
    * Invoked when a reference to the GraphQL schema (type or field) is clicked
    * as part of the editor or one of its tooltips.
@@ -38,14 +40,14 @@ interface QueryEditorProps extends EditorProps {
   onClickReference?(reference: SchemaReference): void;
 
   /**
-   * Invoked when the contents of the query editor change.
+   * Invoked when the contents of the operation editor change.
    * @param value - The new contents of the editor.
    * @param documentAST - The editor contents parsed into a GraphQL document.
    */
   onEdit?(value: string, documentAST?: DocumentNode): void;
 }
 
-export const QueryEditor: FC<QueryEditorProps> = ({
+export const OperationEditor: FC<OperationEditorProps> = ({
   onClickReference,
   onEdit,
   ...props
@@ -69,6 +71,7 @@ export const QueryEditor: FC<QueryEditorProps> = ({
     operations,
     operationName,
     externalFragments,
+    uriInstanceId,
   } = useGraphiQL(
     pick(
       'initialQuery',
@@ -77,11 +80,12 @@ export const QueryEditor: FC<QueryEditorProps> = ({
       'operations',
       'operationName',
       'externalFragments',
+      'uriInstanceId',
     ),
   );
   const storage = useStorage();
   const ref = useRef<HTMLDivElement>(null!);
-  const onClickReferenceRef = useRef<QueryEditorProps['onClickReference']>(
+  const onClickReferenceRef = useRef<OperationEditorProps['onClickReference']>(
     null!,
   );
   useEffect(() => {
@@ -97,7 +101,7 @@ export const QueryEditor: FC<QueryEditorProps> = ({
           closeOnUnfocus: false,
           completeSingle: false,
           autocompleteOptions: {
-            // for the query editor, restrict to executable type definitions
+            // for the operation editor, restrict to executable type definitions
             mode: GraphQLDocumentMode.EXECUTABLE,
           },
         },
@@ -206,8 +210,22 @@ export const QueryEditor: FC<QueryEditorProps> = ({
   }, [operationName, operations, run, setOperationName]);
 
   useEffect(() => {
+    const operationUri = Uri.file(`${uriInstanceId}${URI_NAME.operation}`);
+    const variablesUri = Uri.file(`${uriInstanceId}${URI_NAME.variables}`);
+    /**
+     * Mutate the global `validateVariablesJSON` object to setup which operation editor is validated
+     * by which variables editor. Since we can have multiple GraphiQL instances on the same page.
+     */
+    const { validateVariablesJSON } = MONACO_GRAPHQL_DIAGNOSTIC_SETTINGS;
+    validateVariablesJSON![operationUri.toString()] = [variablesUri.toString()];
+    MONACO_GRAPHQL_API.setDiagnosticSettings(
+      MONACO_GRAPHQL_DIAGNOSTIC_SETTINGS,
+    );
     globalThis.__MONACO = monaco;
-    const model = getOrCreateModel({ uri: QUERY_URI, value: initialQuery });
+    const model = getOrCreateModel({
+      uri: operationUri.path.replace('/', ''),
+      value: initialQuery,
+    });
     const editor = createEditor(ref, { model });
     setEditor({ queryEditor: editor });
 
@@ -254,7 +272,9 @@ export const QueryEditor: FC<QueryEditorProps> = ({
     if (!schema) {
       return;
     }
-    MONACO_GRAPHQL_API.setSchemaConfig([{ uri: 'schema.graphql', schema }]);
+    MONACO_GRAPHQL_API.setSchemaConfig([
+      { uri: `${uriInstanceId}${URI_NAME.schema}`, schema },
+    ]);
     MONACO_GRAPHQL_API.setExternalFragmentDefinitions([
       ...externalFragments.values(),
     ]);
@@ -322,6 +342,7 @@ export const QueryEditor: FC<QueryEditorProps> = ({
     setSchemaReference,
     setVisiblePlugin,
     externalFragments,
+    uriInstanceId,
   ]);
 
   return (

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

@@ -1,6 +1,6 @@
 /* eslint sort-keys: "error" */
 import type { ComponentPropsWithoutRef, FC, ReactNode, RefObject } from 'react';
-import { createContext, useContext, useRef, useEffect } from 'react';
+import { createContext, useContext, useRef, useEffect, useId } from 'react';
 import { create, useStore, UseBoundStore, StoreApi } from 'zustand';
 import { useShallow } from 'zustand/shallow';
 import {
@@ -156,7 +156,7 @@ const InnerGraphiQLProvider: FC<InnerGraphiQLProviderProps> = ({
 }) => {
   const storage = useStorage();
   const storeRef = useRef<GraphiQLStore>(null!);
-
+  const uriInstanceId = useId();
   // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- false positive
   if (storeRef.current === null) {
     function getInitialVisiblePlugin() {
@@ -213,6 +213,11 @@ const InnerGraphiQLProvider: FC<InnerGraphiQLProviderProps> = ({
           onTabChange,
           shouldPersistHeaders: $shouldPersistHeaders,
           tabs,
+          /**
+           * Strip colons (React 18) and arrows (React 19) because it breaks monaco-editor
+           * variables autocomplete
+           */
+          uriInstanceId: uriInstanceId.replaceAll(/[:«»]/g, '') + '-',
         })(...args);
         const executionSlice = createExecutionSlice({
           fetcher,

packages/graphiql-react/src/components/header-editor.tsx renamed to packages/graphiql-react/src/components/request-headers-editor.tsx

@@ -1,7 +1,7 @@
 import { FC, useEffect, useRef } from 'react';
 import { useGraphiQL, useGraphiQLActions } from './provider';
 import type { EditorProps } from '../types';
-import { HEADER_URI, KEY_BINDINGS, STORAGE_KEY } from '../constants';
+import { URI_NAME, KEY_BINDINGS, STORAGE_KEY } from '../constants';
 import {
   getOrCreateModel,
   createEditor,
@@ -12,18 +12,21 @@ import {
   cn,
 } from '../utility';
 
-interface HeaderEditorProps extends EditorProps {
+interface RequestHeadersEditorProps extends EditorProps {
   /**
-   * Invoked when the contents of the headers editor change.
+   * Invoked when the contents of the request headers editor change.
    * @param value - The new contents of the editor.
    */
   onEdit?(value: string): void;
 }
 
-export const HeaderEditor: FC<HeaderEditorProps> = ({ onEdit, ...props }) => {
+export const RequestHeadersEditor: FC<RequestHeadersEditorProps> = ({
+  onEdit,
+  ...props
+}) => {
   const { setEditor, run, prettifyEditors, mergeQuery } = useGraphiQLActions();
-  const { initialHeaders, shouldPersistHeaders } = useGraphiQL(
-    pick('initialHeaders', 'shouldPersistHeaders'),
+  const { initialHeaders, shouldPersistHeaders, uriInstanceId } = useGraphiQL(
+    pick('initialHeaders', 'shouldPersistHeaders', 'uriInstanceId'),
   );
   const ref = useRef<HTMLDivElement>(null!);
   useChangeHandler(
@@ -32,7 +35,10 @@ export const HeaderEditor: FC<HeaderEditorProps> = ({ onEdit, ...props }) => {
     'headers',
   );
   useEffect(() => {
-    const model = getOrCreateModel({ uri: HEADER_URI, value: initialHeaders });
+    const model = getOrCreateModel({
+      uri: `${uriInstanceId}${URI_NAME.requestHeaders}`,
+      value: initialHeaders,
+    });
     const editor = createEditor(ref, { model });
     setEditor({ headerEditor: editor });
     const disposables = [