additionalComponent prop?

graphql · Nov 2, 2023 · 588fbce · 588fbce
1 parent 4c5eb02
commit 588fbce
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 28 deletions.
diff --git a/packages/graphiql-react/src/editor/context.tsx b/packages/graphiql-react/src/editor/context.tsx
@@ -348,7 +348,7 @@ export function EditorContextProvider(props: EditorContextProviderProps) {
   const lastShouldPersistHeadersProp = useRef<boolean | undefined>();
   useEffect(() => {
     const propValue = Boolean(props.shouldPersistHeaders);
-    if (lastShouldPersistHeadersProp.current !== propValue) {
+    if (lastShouldPersistHeadersProp?.current !== propValue) {
       setShouldPersistHeaders(propValue);
       lastShouldPersistHeadersProp.current = propValue;
     }

diff --git a/packages/graphiql-react/src/editor/hooks.ts b/packages/graphiql-react/src/editor/hooks.ts
@@ -11,7 +11,7 @@ import { useSchemaContext } from '../schema';
 import { useStorageContext } from '../storage';
 import debounce from '../utility/debounce';
 import { onHasCompletion } from './completion';
-import { DEFAULT_QUERY, useEditorContext } from './context';
+import { useEditorContext } from './context';
 import { CodeMirrorEditor } from './types';
 
 export function useSynchronizeValue(
@@ -337,25 +337,16 @@ export type InitialState = string | (() => string);
 
 // https://react.dev/learn/you-might-not-need-an-effect
 
-export const useEditorState = (
-  editor: 'query' | 'variable' | 'header',
-  initialState?: InitialState,
-) => {
+export const useEditorState = (editor: 'query' | 'variable' | 'header') => {
   const context = useEditorContext({
     nonNull: true,
   });
-  const initialValue =
-    typeof initialState === 'function' ? initialState() : initialState;
+
   const editorInstance = context[`${editor}Editor` as const];
   let valueString = '';
-  const editorValue = editorInstance?.getValue();
-  if (editorValue && editorValue.length > 0 && editorValue !== DEFAULT_QUERY) {
+  const editorValue = editorInstance?.getValue() ?? false;
+  if (editorValue && editorValue.length > 0) {
     valueString = editorValue;
-  } else {
-    valueString = initialValue || '';
-    if (initialValue) {
-      editorInstance?.setValue(valueString);
-    }
   }
 
   const handleEditorValue = useCallback(
@@ -371,26 +362,29 @@ export const useEditorState = (
 /**
  * useState-like hook for current tab operations editor state
  */
-export const useOperationsEditorState = (
-  initialState?: InitialState,
-): [operations: string, setOperations: (content: string) => void] => {
-  return useEditorState('query', initialState);
+export const useOperationsEditorState = (): [
+  operations: string,
+  setOperations: (content: string) => void,
+] => {
+  return useEditorState('query');
 };
 
 /**
  * useState-like hook for current tab variables editor state
  */
-export const useVariablesEditorState = (
-  initialState?: InitialState,
-): [variables: string, setVariables: (content: string) => void] => {
-  return useEditorState('variable', initialState);
+export const useVariablesEditorState = (): [
+  variables: string,
+  setVariables: (content: string) => void,
+] => {
+  return useEditorState('variable');
 };
 
 /**
  * useState-like hook for current tab variables editor state
  */
-export const useHeadersEditorState = (
-  initialState?: InitialState,
-): [headers: string, setHeaders: (content: string) => void] => {
-  return useEditorState('header', initialState);
+export const useHeadersEditorState = (): [
+  headers: string,
+  setHeaders: (content: string) => void,
+] => {
+  return useEditorState('header');
 };
diff --git a/packages/graphiql/src/components/GraphiQL.tsx b/packages/graphiql/src/components/GraphiQL.tsx
@@ -78,6 +78,11 @@ export type GraphiQLToolbarConfig = {
    * (by passing `GraphiQL.Toolbar` as child to the `GraphiQL` component).
    */
   additionalContent?: React.ReactNode;
+
+  /**
+   * same as above, except a component with access to context
+   */
+  additionalComponent?: React.JSXElementConstructor<any>;
 };
 
 /**
@@ -310,7 +315,10 @@ export function GraphiQLInterface(props: GraphiQLInterfaceProps) {
       <ToolbarButton onClick={copy} label="Copy query (Shift-Ctrl-C)">
         <CopyIcon className="graphiql-toolbar-icon" aria-hidden="true" />
       </ToolbarButton>
-      {props.toolbar?.additionalContent}
+      {props.toolbar?.additionalContent && props.toolbar.additionalContent}
+      {props.toolbar?.additionalComponent && (
+        <props.toolbar.additionalComponent />
+      )}
     </>
   );