improve the state editor hooks, allow initialState

.changeset/dirty-planes-count.md

@@ -0,0 +1,5 @@
+---
+'@graphiql/react': minor
+---
+
+Add useHeadersEditorState and generic useEditorState hooks

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

@@ -333,46 +333,61 @@ export function useAutoCompleteLeafs({
   }, [getDefaultFieldNames, queryEditor, schema]);
 }
 
+export type InitialState = string | (() => string);
+
 // https://react.dev/learn/you-might-not-need-an-effect
 
-/**
- * useState-like hook for current tab operations editor state
- */
-export function useOperationsEditorState(): [
-  opString: string,
-  handleEditOperations: (content: string) => void,
-] {
-  const { queryEditor } = useEditorContext({
+export const useEditorState = (
+  editor: 'query' | 'variable' | 'header',
+  initialState?: InitialState,
+) => {
+  const context = useEditorContext({
     nonNull: true,
   });
-  const opString = queryEditor?.getValue() ?? '';
-  const handleEditOperations = useCallback(
-    (value: string) => queryEditor?.setValue(value),
-    [queryEditor],
+  const initialValue =
+    typeof initialState === 'function' ? initialState() : initialState;
+  const editorInstance = context[`${editor}Editor` as const];
+  let valueString = '';
+  const editorValue = editorInstance?.getValue();
+  if (editorValue) {
+    valueString = editorValue;
+  } else {
+    valueString = initialValue || '';
+  }
+
+  const handleEditorValue = useCallback(
+    (value: string) => editorInstance?.setValue(value),
+    [editorInstance],
   );
-  return useMemo(
-    () => [opString, handleEditOperations],
-    [opString, handleEditOperations],
+  return useMemo<[string, (val: string) => void]>(
+    () => [valueString, handleEditorValue],
+    [valueString, handleEditorValue],
   );
+};
+
+/**
+ * useState-like hook for current tab operations editor state
+ */
+export function useOperationsEditorState(
+  initialState?: InitialState,
+): [operations: string, setOperations: (content: string) => void] {
+  return useEditorState('query', initialState);
 }
 
 /**
- * useState-like hook for variables tab operations editor state
+ * useState-like hook for current tab variables editor state
  */
-export function useVariablesEditorState(): [
-  varsString: string,
-  handleEditVariables: (content: string) => void,
-] {
-  const { variableEditor } = useEditorContext({
-    nonNull: true,
-  });
-  const varsString = variableEditor?.getValue() ?? '';
-  const handleEditVariables = useCallback(
-    (value: string) => variableEditor?.setValue(value),
-    [variableEditor],
-  );
-  return useMemo(
-    () => [varsString, handleEditVariables],
-    [varsString, handleEditVariables],
-  );
+export function useVariablesEditorState(
+  initialState?: InitialState,
+): [variables: string, setVariables: (content: string) => void] {
+  return useEditorState('variable', initialState);
+}
+
+/**
+ * useState-like hook for current tab variables editor state
+ */
+export function useHeadersEditorState(
+  initialState?: InitialState,
+): [headers: string, setHeaders: (content: string) => void] {
+  return useEditorState('header', initialState);
 }