move merge query functionality to editor context

graphql · May 25, 2022 · d677b60 · d677b60
1 parent 6ec3acd
commit d677b60
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 37 deletions.
diff --git a/.changeset/slimy-swans-travel.md b/.changeset/slimy-swans-travel.md
@@ -0,0 +1,6 @@
+---
+'graphiql': patch
+'@graphiql/react': patch
+---
+
+Move merge query functionality to editor context in `@graphiql/react`
diff --git a/packages/graphiql-react/src/editor/context.tsx b/packages/graphiql-react/src/editor/context.tsx
@@ -1,6 +1,6 @@
-import { fillLeafs, GetDefaultFieldNamesFn } from '@graphiql/toolkit';
+import { fillLeafs, GetDefaultFieldNamesFn, mergeAst } from '@graphiql/toolkit';
 import copyToClipboard from 'copy-to-clipboard';
-import { DocumentNode, OperationDefinitionNode } from 'graphql';
+import { DocumentNode, OperationDefinitionNode, print } from 'graphql';
 import { VariableToType } from 'graphql-language-service';
 import {
   createContext,
@@ -23,6 +23,7 @@ export type CodeMirrorEditorWithOperationFacts = CodeMirrorEditor & {
 export type EditorContextType = {
   autoCompleteLeafs(): string | undefined;
   copy(): void;
+  merge(): void;
   headerEditor: CodeMirrorEditor | null;
   queryEditor: CodeMirrorEditorWithOperationFacts | null;
   responseEditor: CodeMirrorEditor | null;
@@ -38,6 +39,7 @@ export const EditorContext = createContext<EditorContextType>({
     return undefined;
   },
   copy() {},
+  merge() {},
   headerEditor: null,
   queryEditor: null,
   responseEditor: null,
@@ -126,10 +128,21 @@ export function EditorContextProvider(props: EditorContextProviderProps) {
     onCopyQuery?.(query);
   }, [onCopyQuery, queryEditor]);
 
+  const merge = useCallback(() => {
+    const documentAST = queryEditor?.documentAST;
+    const query = queryEditor?.getValue();
+    if (!documentAST || !query) {
+      return;
+    }
+
+    queryEditor.setValue(print(mergeAst(documentAST, schema)));
+  }, [queryEditor, schema]);
+
   const value = useMemo<EditorContextType>(
     () => ({
       autoCompleteLeafs,
       copy,
+      merge,
       headerEditor,
       queryEditor,
       responseEditor,
@@ -142,6 +155,7 @@ export function EditorContextProvider(props: EditorContextProviderProps) {
     [
       autoCompleteLeafs,
       copy,
+      merge,
       headerEditor,
       queryEditor,
       responseEditor,

diff --git a/packages/graphiql-react/src/editor/header-editor.tsx b/packages/graphiql-react/src/editor/header-editor.tsx
@@ -17,7 +17,6 @@ export type UseHeaderEditorArgs = {
   editorTheme?: string;
   onEdit?: EditCallback;
   onPrettifyQuery?: EmptyCallback;
-  onMergeQuery?: EmptyCallback;
   onRunQuery?: EmptyCallback;
   readOnly?: boolean;
   shouldPersistHeaders?: boolean;
@@ -27,7 +26,6 @@ export type UseHeaderEditorArgs = {
 export function useHeaderEditor({
   editorTheme = 'graphiql',
   onEdit,
-  onMergeQuery,
   onPrettifyQuery,
   onRunQuery,
   readOnly = false,
@@ -128,7 +126,7 @@ export function useHeaderEditor({
 
   useKeyMap(headerEditor, ['Cmd-Enter', 'Ctrl-Enter'], onRunQuery);
   useKeyMap(headerEditor, ['Shift-Ctrl-P'], onPrettifyQuery);
-  useKeyMap(headerEditor, ['Shift-Ctrl-M'], onMergeQuery);
+  useKeyMap(headerEditor, ['Shift-Ctrl-M'], context.merge);
 
   useResizeEditor(headerEditor, ref);
 

diff --git a/packages/graphiql-react/src/editor/query-editor.tsx b/packages/graphiql-react/src/editor/query-editor.tsx
@@ -35,7 +35,6 @@ export type UseQueryEditorArgs = {
   onEdit?: EditCallback;
   onEditOperationName?: EditCallback;
   onPrettifyQuery?: EmptyCallback;
-  onMergeQuery?: EmptyCallback;
   onRunQuery?: EmptyCallback;
   readOnly?: boolean;
   validationRules?: ValidationRule[];
@@ -48,7 +47,6 @@ export function useQueryEditor({
   externalFragments,
   onEdit,
   onEditOperationName,
-  onMergeQuery,
   onPrettifyQuery,
   onRunQuery,
   readOnly = false,
@@ -329,7 +327,7 @@ export function useQueryEditor({
     ],
     onPrettifyQuery,
   );
-  useKeyMap(queryEditor, ['Shift-Ctrl-M'], onMergeQuery);
+  useKeyMap(queryEditor, ['Shift-Ctrl-M'], editorContext.merge);
 
   useResizeEditor(queryEditor, ref);
 

diff --git a/packages/graphiql-react/src/editor/variable-editor.tsx b/packages/graphiql-react/src/editor/variable-editor.tsx
@@ -18,7 +18,6 @@ export type UseVariableEditorArgs = {
   editorTheme?: string;
   onEdit?: EditCallback;
   onPrettifyQuery?: EmptyCallback;
-  onMergeQuery?: EmptyCallback;
   onRunQuery?: EmptyCallback;
   readOnly?: boolean;
   value?: string;
@@ -27,7 +26,6 @@ export type UseVariableEditorArgs = {
 export function useVariableEditor({
   editorTheme = 'graphiql',
   onEdit,
-  onMergeQuery,
   onPrettifyQuery,
   onRunQuery,
   readOnly = false,
@@ -138,7 +136,7 @@ export function useVariableEditor({
 
   useKeyMap(variableEditor, ['Cmd-Enter', 'Ctrl-Enter'], onRunQuery);
   useKeyMap(variableEditor, ['Shift-Ctrl-P'], onPrettifyQuery);
-  useKeyMap(variableEditor, ['Shift-Ctrl-M'], onMergeQuery);
+  useKeyMap(variableEditor, ['Shift-Ctrl-M'], context.merge);
 
   useResizeEditor(variableEditor, ref);
 

diff --git a/packages/graphiql/src/components/GraphiQL.tsx b/packages/graphiql/src/components/GraphiQL.tsx
@@ -63,7 +63,6 @@ import {
   formatResult,
   isAsyncIterable,
   isObservable,
-  mergeAst,
 } from '@graphiql/toolkit';
 import type {
   Fetcher,
@@ -719,7 +718,9 @@ class GraphiQLWithContext extends React.Component<
           label="Prettify"
         />
         <ToolbarButton
-          onClick={this.handleMergeQuery}
+          onClick={() => {
+            this.props.editorContext.merge();
+          }}
           title="Merge Query (Shift-Ctrl-M)"
           label="Merge"
         />
@@ -847,7 +848,6 @@ class GraphiQLWithContext extends React.Component<
                 externalFragments={this.props.externalFragments}
                 onEdit={this.handleEditQuery}
                 onEditOperationName={this.props.onEditOperationName}
-                onMergeQuery={this.handleMergeQuery}
                 onPrettifyQuery={this.handlePrettifyQuery}
                 onRunQuery={this.handleEditorRunQuery}
                 readOnly={this.props.readOnly}
@@ -895,7 +895,6 @@ class GraphiQLWithContext extends React.Component<
                   value={this.props.variables}
                   onEdit={this.handleEditVariables}
                   onPrettifyQuery={this.handlePrettifyQuery}
-                  onMergeQuery={this.handleMergeQuery}
                   onRunQuery={this.handleEditorRunQuery}
                   editorTheme={this.props.editorTheme}
                   readOnly={this.props.readOnly}
@@ -906,7 +905,6 @@ class GraphiQLWithContext extends React.Component<
                     active={this.state.headerEditorActive}
                     editorTheme={this.props.editorTheme}
                     onEdit={this.handleEditHeaders}
-                    onMergeQuery={this.handleMergeQuery}
                     onPrettifyQuery={this.handlePrettifyQuery}
                     onRunQuery={this.handleEditorRunQuery}
                     readOnly={this.props.readOnly}
@@ -1352,27 +1350,6 @@ class GraphiQLWithContext extends React.Component<
     }
   };
 
-  handleMergeQuery = () => {
-    const documentAST = this.props.editorContext.queryEditor?.documentAST;
-    if (!documentAST) {
-      return;
-    }
-
-    const editor = this.getQueryEditor();
-    if (!editor) {
-      return;
-    }
-
-    const query = editor.getValue();
-    if (!query) {
-      return;
-    }
-
-    editor.setValue(
-      print(mergeAst(documentAST, this.props.schemaContext.schema)),
-    );
-  };
-
   handleEditQuery = (value: string) => {
     this.setState(
       state => ({