add execution context to @graphiql/react

.changeset/big-forks-deny.md

@@ -0,0 +1,6 @@
+---
+'@graphiql/react': minor
+'graphiql': patch
+---
+
+Add execution context to `@graphiql/react` and move over the logic from `graphiql`

package.json

@@ -100,7 +100,6 @@
     "@types/node": "^14.14.22",
     "@types/prettier": "^2.0.0",
     "@types/react": "^17.0.37",
-    "@types/set-value": "^4.0.1",
     "@types/theme-ui": "^0.3.1",
     "@types/ws": "^7.4.0",
     "@typescript-eslint/eslint-plugin": "^4.14.0",

packages/graphiql-react/package.json

@@ -36,11 +36,13 @@
     "copy-to-clipboard": "^3.2.0",
     "escape-html": "^1.0.3",
     "graphql-language-service": "^5.0.4",
-    "markdown-it": "^12.2.0"
+    "markdown-it": "^12.2.0",
+    "set-value": "^4.1.0"
   },
   "devDependencies": {
     "@types/codemirror": "^5.60.5",
     "@types/escape-html": "^1.0.1",
+    "@types/set-value": "^4.0.1",
     "@vitejs/plugin-react": "^1.3.0",
     "graphql": "^16.4.0",
     "react": "^17.0.2",

packages/graphiql-react/src/editor/header-editor.tsx

@@ -1,10 +1,10 @@
 import { useEffect, useRef } from 'react';
 
+import { useExecutionContext } from '../execution';
 import { commonKeys, importCodeMirror } from './common';
 import { useEditorContext } from './context';
 import {
   EditCallback,
-  EmptyCallback,
   useChangeHandler,
   useCompletion,
   useKeyMap,
@@ -16,22 +16,21 @@ import {
 export type UseHeaderEditorArgs = {
   editorTheme?: string;
   onEdit?: EditCallback;
-  onRunQuery?: EmptyCallback;
   readOnly?: boolean;
   shouldPersistHeaders?: boolean;
 };
 
 export function useHeaderEditor({
   editorTheme = 'graphiql',
   onEdit,
-  onRunQuery,
   readOnly = false,
   shouldPersistHeaders = false,
 }: UseHeaderEditorArgs = {}) {
   const { initialHeaders, headerEditor, setHeaderEditor } = useEditorContext({
     nonNull: true,
     caller: useHeaderEditor,
   });
+  const executionContext = useExecutionContext();
   const merge = useMergeQuery({ caller: useHeaderEditor });
   const prettify = usePrettifyEditors({ caller: useHeaderEditor });
   const ref = useRef<HTMLDivElement>(null);
@@ -114,7 +113,7 @@ export function useHeaderEditor({
 
   useCompletion(headerEditor);
 
-  useKeyMap(headerEditor, ['Cmd-Enter', 'Ctrl-Enter'], onRunQuery);
+  useKeyMap(headerEditor, ['Cmd-Enter', 'Ctrl-Enter'], executionContext?.run);
   useKeyMap(headerEditor, ['Shift-Ctrl-P'], prettify);
   useKeyMap(headerEditor, ['Shift-Ctrl-M'], merge);
 

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

@@ -97,7 +97,7 @@ export function useCompletion(editor: CodeMirrorEditor | null) {
   }, [editor, explorer, schema]);
 }
 
-export type EmptyCallback = () => void;
+type EmptyCallback = () => void;
 
 export function useKeyMap(
   editor: CodeMirrorEditor | null,

packages/graphiql-react/src/editor/query-editor.tsx

@@ -8,6 +8,7 @@ import type {
 import { getOperationFacts } from 'graphql-language-service';
 import { MutableRefObject, useEffect, useRef } from 'react';
 
+import { useExecutionContext } from '../execution';
 import { useExplorerContext } from '../explorer';
 import { markdown } from '../markdown';
 import { useSchemaContext } from '../schema';
@@ -21,7 +22,6 @@ import {
 import {
   CopyQueryCallback,
   EditCallback,
-  EmptyCallback,
   useCompletion,
   useCopyQuery,
   useKeyMap,
@@ -40,7 +40,6 @@ export type UseQueryEditorArgs = {
   onEdit?: EditCallback;
   onEditOperationName?: EditCallback;
   onCopyQuery?: CopyQueryCallback;
-  onRunQuery?: EmptyCallback;
   readOnly?: boolean;
   validationRules?: ValidationRule[];
 };
@@ -51,7 +50,6 @@ export function useQueryEditor({
   onEdit,
   onEditOperationName,
   onCopyQuery,
-  onRunQuery,
   readOnly = false,
   validationRules,
 }: UseQueryEditorArgs = {}) {
@@ -69,6 +67,7 @@ export function useQueryEditor({
     nonNull: true,
     caller: useQueryEditor,
   });
+  const executionContext = useExecutionContext();
   const storage = useStorageContext();
   const explorer = useExplorerContext();
   const copy = useCopyQuery({ caller: useQueryEditor, onCopyQuery });
@@ -322,7 +321,7 @@ export function useQueryEditor({
 
   useCompletion(queryEditor);
 
-  useKeyMap(queryEditor, ['Cmd-Enter', 'Ctrl-Enter'], onRunQuery);
+  useKeyMap(queryEditor, ['Cmd-Enter', 'Ctrl-Enter'], executionContext?.run);
   useKeyMap(queryEditor, ['Shift-Ctrl-C'], copy);
   useKeyMap(
     queryEditor,

packages/graphiql-react/src/editor/variable-editor.tsx

@@ -1,10 +1,10 @@
 import { useEffect, useRef } from 'react';
 
+import { useExecutionContext } from '../execution';
 import { commonKeys, importCodeMirror } from './common';
 import { useEditorContext } from './context';
 import {
   EditCallback,
-  EmptyCallback,
   useChangeHandler,
   useCompletion,
   useKeyMap,
@@ -17,14 +17,12 @@ import { CodeMirrorType } from './types';
 export type UseVariableEditorArgs = {
   editorTheme?: string;
   onEdit?: EditCallback;
-  onRunQuery?: EmptyCallback;
   readOnly?: boolean;
 };
 
 export function useVariableEditor({
   editorTheme = 'graphiql',
   onEdit,
-  onRunQuery,
   readOnly = false,
 }: UseVariableEditorArgs = {}) {
   const {
@@ -35,6 +33,7 @@ export function useVariableEditor({
     nonNull: true,
     caller: useVariableEditor,
   });
+  const executionContext = useExecutionContext();
   const merge = useMergeQuery({ caller: useVariableEditor });
   const prettify = usePrettifyEditors({ caller: useVariableEditor });
   const ref = useRef<HTMLDivElement>(null);
@@ -132,7 +131,7 @@ export function useVariableEditor({
 
   useCompletion(variableEditor);
 
-  useKeyMap(variableEditor, ['Cmd-Enter', 'Ctrl-Enter'], onRunQuery);
+  useKeyMap(variableEditor, ['Cmd-Enter', 'Ctrl-Enter'], executionContext?.run);
   useKeyMap(variableEditor, ['Shift-Ctrl-P'], prettify);
   useKeyMap(variableEditor, ['Shift-Ctrl-M'], merge);