move logic for deriving operation facts to @graphiql/react (#2435)

* refactor execute button to functional component

* derive default editor values from storage

* derive operation facts as part of `useQueryEditor` hook

* use operation facts from editor in `ExecuteButton`

* stop deriving query facts in `GraphiQL` component

* fix mocks for tests

* remove unused dependencies and mocks

* add changeset

.changeset/brave-ways-enjoy.md

@@ -0,0 +1,5 @@
+---
+'@graphiql/react': patch
+---
+
+Fix deriving default values for editors from storage

.changeset/hungry-lions-rescue.md

@@ -0,0 +1,6 @@
+---
+'graphiql': patch
+'@graphiql/react': patch
+---
+
+Move the logic for deriving operation facts from the current query to `@graphiql/react` and store these facts as properties on the query editor instance

packages/graphiql-react/package.json

@@ -34,6 +34,7 @@
     "codemirror": "^5.65.3",
     "codemirror-graphql": "^1.3.0",
     "escape-html": "^1.0.3",
+    "graphql-language-service": "^5.0.4",
     "markdown-it": "^12.2.0"
   },
   "devDependencies": {

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

@@ -1,23 +1,32 @@
 import { fillLeafs, GetDefaultFieldNamesFn } from '@graphiql/toolkit';
+import { DocumentNode, OperationDefinitionNode } from 'graphql';
+import { VariableToType } from 'graphql-language-service';
 import {
   createContext,
   ReactNode,
   useCallback,
   useMemo,
   useState,
 } from 'react';
-import { useSchemaWithError } from '../schema';
 
+import { useSchemaWithError } from '../schema';
 import { CodeMirrorEditor } from './types';
 
+export type CodeMirrorEditorWithOperationFacts = CodeMirrorEditor & {
+  documentAST: DocumentNode | null;
+  operationName: string | null;
+  operations: OperationDefinitionNode[] | null;
+  variableToType: VariableToType | null;
+};
+
 export type EditorContextType = {
   autoCompleteLeafs(): string | undefined;
   headerEditor: CodeMirrorEditor | null;
-  queryEditor: CodeMirrorEditor | null;
+  queryEditor: CodeMirrorEditorWithOperationFacts | null;
   responseEditor: CodeMirrorEditor | null;
   variableEditor: CodeMirrorEditor | null;
   setHeaderEditor(newEditor: CodeMirrorEditor): void;
-  setQueryEditor(newEditor: CodeMirrorEditor): void;
+  setQueryEditor(newEditor: CodeMirrorEditorWithOperationFacts): void;
   setResponseEditor(newEditor: CodeMirrorEditor): void;
   setVariableEditor(newEditor: CodeMirrorEditor): void;
 };
@@ -46,7 +55,10 @@ export function EditorContextProvider(props: EditorContextProviderProps) {
   const [headerEditor, setHeaderEditor] = useState<CodeMirrorEditor | null>(
     null,
   );
-  const [queryEditor, setQueryEditor] = useState<CodeMirrorEditor | null>(null);
+  const [
+    queryEditor,
+    setQueryEditor,
+  ] = useState<CodeMirrorEditorWithOperationFacts | null>(null);
   const [responseEditor, setResponseEditor] = useState<CodeMirrorEditor | null>(
     null,
   );

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

@@ -1,5 +1,6 @@
 import { useContext, useEffect, useRef } from 'react';
 
+import { StorageContext } from '../storage';
 import { commonKeys, importCodeMirror } from './common';
 import { EditorContext } from './context';
 import {
@@ -21,6 +22,7 @@ export type UseHeaderEditorArgs = {
   onMergeQuery?: EmptyCallback;
   onRunQuery?: EmptyCallback;
   readOnly?: boolean;
+  shouldPersistHeaders?: boolean;
   value?: string;
 };
 
@@ -32,9 +34,11 @@ export function useHeaderEditor({
   onPrettifyQuery,
   onRunQuery,
   readOnly = false,
+  shouldPersistHeaders = false,
   value,
 }: UseHeaderEditorArgs = {}) {
   const context = useContext(EditorContext);
+  const storage = useContext(StorageContext);
   const ref = useRef<HTMLDivElement>(null);
 
   if (!context) {
@@ -45,7 +49,7 @@ export function useHeaderEditor({
 
   const { headerEditor, setHeaderEditor } = context;
 
-  const initialValue = useRef(value);
+  const initialValue = useRef(value ?? storage?.get(STORAGE_KEY) ?? '');
 
   useEffect(() => {
     let isActive = true;
@@ -117,7 +121,11 @@ export function useHeaderEditor({
 
   useSynchronizeValue(headerEditor, value);
 
-  useChangeHandler(headerEditor, onEdit);
+  useChangeHandler(
+    headerEditor,
+    onEdit,
+    shouldPersistHeaders ? STORAGE_KEY : null,
+  );
 
   useCompletion(headerEditor, onHintInformationRender);
 
@@ -129,3 +137,5 @@ export function useHeaderEditor({
 
   return ref;
 }
+
+const STORAGE_KEY = 'headers';

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

@@ -1,5 +1,8 @@
 import { EditorChange } from 'codemirror';
-import { RefObject, useEffect, useRef } from 'react';
+import { RefObject, useContext, useEffect, useRef } from 'react';
+
+import { StorageContext } from '../storage';
+import debounce from '../utility/debounce';
 
 import { onHasCompletion } from './completion';
 import { CodeMirrorEditor } from './types';
@@ -20,19 +23,29 @@ export type EditCallback = (value: string) => void;
 export function useChangeHandler(
   editor: CodeMirrorEditor | null,
   callback: EditCallback | undefined,
+  storageKey: string | null,
 ) {
+  const storage = useContext(StorageContext);
   useEffect(() => {
     if (!editor) {
       return;
     }
 
+    const store = debounce(500, (value: string) => {
+      if (!storage || storageKey === null) {
+        return;
+      }
+      storage.set(storageKey, value);
+    });
+
     const handleChange = (editorInstance: CodeMirrorEditor) => {
       const newValue = editorInstance.getValue();
       callback?.(newValue);
+      store(newValue);
     };
     editor.on('change', handleChange);
     return () => editor.off('change', handleChange);
-  }, [editor, callback]);
+  }, [callback, editor, storage, storageKey]);
 }
 
 export type CompletionCallback = (value: HTMLDivElement) => void;