fix code exporter on early init, new hooks: useOperationsEditorState() (#3341)

this abstracts away some editor specific details
until we can leverage `<Suspense />`

- add useOperationsEditorState()
- add useVariablesEditorState()
- match up @graphiql/react globals
- simplify plugin implementations

Author: acao

.changeset/six-bears-smile.md

@@ -0,0 +1,7 @@
+---
+'@graphiql/plugin-code-exporter': patch
+'@graphiql/plugin-explorer': patch
+'@graphiql/react': patch
+---
+
+Fix code exporter plugin on early init, add hooks

packages/graphiql-plugin-code-exporter/src/index.tsx

@@ -1,4 +1,4 @@
-import { useEditorContext, type GraphiQLPlugin } from '@graphiql/react';
+import { useOperationsEditorState, type GraphiQLPlugin } from '@graphiql/react';
 import React from 'react';
 import GraphiQLCodeExporter, {
   GraphiQLCodeExporterProps,
@@ -10,13 +10,12 @@ import './index.css';
 type GraphiQLCodeExporterPluginProps = Omit<GraphiQLCodeExporterProps, 'query'>;
 
 function GraphiQLCodeExporterPlugin(props: GraphiQLCodeExporterPluginProps) {
-  const { queryEditor } = useEditorContext({ nonNull: true });
-
+  const [operationsString] = useOperationsEditorState();
   return (
     <GraphiQLCodeExporter
       codeMirrorTheme="graphiql"
       {...props}
-      query={queryEditor!.getValue()}
+      query={operationsString}
     />
   );
 }

packages/graphiql-plugin-code-exporter/vite.config.ts

@@ -24,6 +24,7 @@ export default defineConfig({
       output: {
         chunkFileNames: '[name].[format].js',
         globals: {
+          '@graphiql/react': 'GraphiQL.React',
           graphql: 'GraphiQL.GraphQL',
           react: 'React',
           'react-dom': 'ReactDOM',

packages/graphiql-plugin-explorer/src/index.tsx

@@ -3,6 +3,7 @@ import {
   useEditorContext,
   useExecutionContext,
   useSchemaContext,
+  useOperationsEditorState,
 } from '@graphiql/react';
 import {
   Explorer as GraphiQLExplorer,
@@ -116,30 +117,29 @@ const styles = {
 };
 
 export type GraphiQLExplorerPluginProps = Omit<
-  Omit<GraphiQLExplorerProps, 'query'>,
-  'onEdit'
+  GraphiQLExplorerProps,
+  'onEdit' | 'query'
 >;
 
 function ExplorerPlugin(props: GraphiQLExplorerPluginProps) {
-  const { setOperationName, queryEditor } = useEditorContext({ nonNull: true });
+  const { setOperationName } = useEditorContext({ nonNull: true });
   const { schema } = useSchemaContext({ nonNull: true });
   const { run } = useExecutionContext({ nonNull: true });
+
+  // handle running the current operation from the plugin
   const handleRunOperation = useCallback(
     (operationName: string | null) => {
       if (operationName) {
+        // set the plugin-defined operation name before executing
         setOperationName(operationName);
       }
       run();
     },
     [run, setOperationName],
   );
-  // todo: document how to do this!
-  const handleEditOperation = useCallback(
-    (value: string) => queryEditor?.setValue(value),
-    [queryEditor],
-  );
 
-  const operationDocument = queryEditor?.getValue() ?? '';
+  // load the current editor tab state into the explorer
+  const [operationsString, handleEditOperations] = useOperationsEditorState();
 
   return (
     <GraphiQLExplorer
@@ -152,14 +152,16 @@ function ExplorerPlugin(props: GraphiQLExplorerPluginProps) {
       checkboxUnchecked={checkboxUnchecked}
       checkboxChecked={checkboxChecked}
       styles={styles}
-      query={operationDocument}
-      onEdit={handleEditOperation}
+      query={operationsString}
+      onEdit={handleEditOperations}
       {...props}
     />
   );
 }
 
-export function explorerPlugin(props: GraphiQLExplorerPluginProps) {
+export function explorerPlugin(
+  props: GraphiQLExplorerPluginProps,
+): GraphiQLPlugin {
   return {
     title: 'GraphiQL Explorer',
     icon: () => (
@@ -185,5 +187,5 @@ export function explorerPlugin(props: GraphiQLExplorerPluginProps) {
       </svg>
     ),
     content: () => <ExplorerPlugin {...props} />,
-  } as GraphiQLPlugin;
+  };
 }

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

@@ -3,7 +3,7 @@ import type { EditorChange, EditorConfiguration } from 'codemirror';
 import type { SchemaReference } from 'codemirror-graphql/utils/SchemaReference';
 import copyToClipboard from 'copy-to-clipboard';
 import { parse, print } from 'graphql';
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
 
 import { useExplorerContext } from '../explorer';
 import { usePluginContext } from '../plugin';
@@ -332,3 +332,47 @@ export function useAutoCompleteLeafs({
     return result;
   }, [getDefaultFieldNames, queryEditor, schema]);
 }
+
+// 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({
+    nonNull: true,
+  });
+  const opString = queryEditor?.getValue() ?? '';
+  const handleEditOperations = useCallback(
+    (value: string) => queryEditor?.setValue(value),
+    [queryEditor],
+  );
+  return useMemo(
+    () => [opString, handleEditOperations],
+    [opString, handleEditOperations],
+  );
+}
+
+/**
+ * useState-like hook for variables tab operations 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],
+  );
+}

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

@@ -16,6 +16,8 @@ export {
   useCopyQuery,
   useMergeQuery,
   usePrettifyEditors,
+  useOperationsEditorState,
+  useVariablesEditorState,
 } from './hooks';
 export { useQueryEditor } from './query-editor';
 export { useResponseEditor } from './response-editor';

packages/graphiql-react/src/index.ts

@@ -16,6 +16,8 @@ export {
   useQueryEditor,
   useResponseEditor,
   useVariableEditor,
+  useOperationsEditorState,
+  useVariablesEditorState,
   VariableEditor,
 } from './editor';
 export {