fix operation name props (#2642)

* refactor `onEditOperationName` * use the operation name from props for all requests * add changesets
graphql · Aug 8, 2022 · 100af92 · 100af92
1 parent 4cb148d
commit 100af92
Show file tree

Hide file tree

Showing 9 changed files with 324 additions and 272 deletions.
diff --git a/.changeset/eight-poems-call.md b/.changeset/eight-poems-call.md
@@ -0,0 +1,5 @@
+---
+'graphiql': patch
+---
+
+Fix controlling the operation name sent with the request using the `operationName` prop
diff --git a/.changeset/five-carrots-learn.md b/.changeset/five-carrots-learn.md
@@ -0,0 +1,5 @@
+---
+'@graphiql/react': minor
+---
+
+Add a new prop `operationName` to the `ExecutionContextProvider` component that controls the operation sent with the request
diff --git a/.changeset/mean-peas-rush.md b/.changeset/mean-peas-rush.md
@@ -0,0 +1,5 @@
+---
+'@graphiql/react': minor
+---
+
+BREAKING: The `ExecutionContextProvider` and `QueryEditor` components no longer accepts the `onEditOperationName` prop. Instead you can now pass this prop to the `EditorContextProvider` component.
diff --git a/packages/graphiql-react/src/editor/context.tsx b/packages/graphiql-react/src/editor/context.tsx
@@ -53,6 +53,8 @@ export type EditorContextType = {
   setResponseEditor(newEditor: CodeMirrorEditor): void;
   setVariableEditor(newEditor: CodeMirrorEditor): void;
 
+  setOperationName(operationName: string): void;
+
   initialHeaders: string;
   initialQuery: string;
   initialVariables: string;
@@ -72,6 +74,7 @@ type EditorContextProviderProps = {
   defaultQuery?: string;
   externalFragments?: string | FragmentDefinitionNode[];
   headers?: string;
+  onEditOperationName?(operationName: string): void;
   onTabChange?(tabs: TabsState): void;
   query?: string;
   shouldPersistHeaders?: boolean;
@@ -190,6 +193,20 @@ export function EditorContextProvider(props: EditorContextProviderProps) {
     [onTabChange, storeTabs],
   );
 
+  const { onEditOperationName } = props;
+  const setOperationName = useCallback<EditorContextType['setOperationName']>(
+    operationName => {
+      if (!queryEditor) {
+        return;
+      }
+
+      queryEditor.operationName = operationName;
+      updateActiveTabValues({ operationName });
+      onEditOperationName?.(operationName);
+    },
+    [onEditOperationName, queryEditor, updateActiveTabValues],
+  );
+
   const defaultQuery =
     tabState.activeTabIndex > 0 ? '' : props.defaultQuery ?? DEFAULT_QUERY;
   const initialValues = useRef({
@@ -239,6 +256,8 @@ export function EditorContextProvider(props: EditorContextProviderProps) {
       setResponseEditor,
       setVariableEditor,
 
+      setOperationName,
+
       ...initialValues.current,
 
       externalFragments,
@@ -258,6 +277,8 @@ export function EditorContextProvider(props: EditorContextProviderProps) {
       responseEditor,
       variableEditor,
 
+      setOperationName,
+
       externalFragments,
       validationRules,
 

diff --git a/packages/graphiql-react/src/editor/query-editor.tsx b/packages/graphiql-react/src/editor/query-editor.tsx
@@ -7,7 +7,13 @@ import type {
   ValidationRule,
 } from 'graphql';
 import { getOperationFacts } from 'graphql-language-service';
-import { MutableRefObject, useEffect, useMemo, useRef } from 'react';
+import {
+  MutableRefObject,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+} from 'react';
 
 import { useExecutionContext } from '../execution';
 import { useExplorerContext } from '../explorer';
@@ -27,7 +33,6 @@ import {
 } from './context';
 import {
   CopyQueryCallback,
-  EditCallback,
   useCompletion,
   useCopyQuery,
   useKeyMap,
@@ -45,7 +50,6 @@ export type UseQueryEditorArgs = {
   onClickReference?: OnClickReference;
   onCopyQuery?: CopyQueryCallback;
   onEdit?(value: string, documentAST?: DocumentNode): void;
-  onEditOperationName?: EditCallback;
   readOnly?: boolean;
   keyMap?: KeyMap;
 };
@@ -56,7 +60,6 @@ export function useQueryEditor({
   onClickReference,
   onCopyQuery,
   onEdit,
-  onEditOperationName,
   readOnly = false,
 }: UseQueryEditorArgs = {}) {
   const { schema } = useSchemaContext({
@@ -67,6 +70,7 @@ export function useQueryEditor({
     externalFragments,
     initialQuery,
     queryEditor,
+    setOperationName,
     setQueryEditor,
     validationRules,
     variableEditor,
@@ -255,7 +259,6 @@ export function useQueryEditor({
       editorInstance.documentAST = operationFacts?.documentAST ?? null;
       editorInstance.operationName = operationName ?? null;
       editorInstance.operations = operationFacts?.operations ?? null;
-      editorInstance.variableToType = operationFacts?.variableToType ?? null;
 
       // Update variable types for the variable editor
       if (variableEditor) {
@@ -277,6 +280,7 @@ export function useQueryEditor({
         const query = editorInstance.getValue();
         storage?.set(STORAGE_KEY_QUERY, query);
 
+        const currentOperationName = editorInstance.operationName;
         const operationFacts = getAndUpdateOperationFacts(editorInstance);
         if (operationFacts?.operationName !== undefined) {
           storage?.set(
@@ -288,11 +292,10 @@ export function useQueryEditor({
         // Invoke callback props only after the operation facts have been updated
         onEdit?.(query, operationFacts?.documentAST);
         if (
-          onEditOperationName &&
-          operationFacts?.operationName !== undefined &&
-          editorInstance.operationName !== operationFacts.operationName
+          operationFacts?.operationName &&
+          currentOperationName !== operationFacts.operationName
         ) {
-          onEditOperationName(operationFacts.operationName);
+          setOperationName(operationFacts.operationName);
         }
 
         updateActiveTabValues({
@@ -309,9 +312,9 @@ export function useQueryEditor({
     return () => queryEditor.off('change', handleChange);
   }, [
     onEdit,
-    onEditOperationName,
     queryEditor,
     schema,
+    setOperationName,
     storage,
     variableEditor,
     updateActiveTabValues,
@@ -331,7 +334,40 @@ export function useQueryEditor({
 
   useCompletion(queryEditor, useQueryEditor);
 
-  useKeyMap(queryEditor, ['Cmd-Enter', 'Ctrl-Enter'], executionContext?.run);
+  const run = executionContext?.run;
+  const runAtCursor = useCallback(() => {
+    if (
+      !run ||
+      !queryEditor ||
+      !queryEditor.operations ||
+      !queryEditor.hasFocus()
+    ) {
+      run?.();
+      return;
+    }
+
+    const cursorIndex = queryEditor.indexFromPos(queryEditor.getCursor());
+
+    // Loop through all operations to see if one contains the cursor.
+    let operationName: string | undefined;
+    for (const operation of queryEditor.operations) {
+      if (
+        operation.loc &&
+        operation.loc.start <= cursorIndex &&
+        operation.loc.end >= cursorIndex
+      ) {
+        operationName = operation.name?.value;
+      }
+    }
+
+    if (operationName && operationName !== queryEditor.operationName) {
+      setOperationName(operationName);
+    }
+
+    run();
+  }, [queryEditor, run, setOperationName]);
+
+  useKeyMap(queryEditor, ['Cmd-Enter', 'Ctrl-Enter'], runAtCursor);
   useKeyMap(queryEditor, ['Shift-Ctrl-C'], copy);
   useKeyMap(
     queryEditor,