sync persist header prop if it changes

graphql · Nov 29, 2022 · 30984df · 30984df
1 parent fe0fa20
commit 30984df
Showing 1 changed file with 16 additions and 1 deletion.
diff --git a/packages/graphiql-react/src/editor/context.tsx b/packages/graphiql-react/src/editor/context.tsx
@@ -7,7 +7,14 @@ import {
   visit,
 } from 'graphql';
 import { VariableToType } from 'graphql-language-service';
-import { ReactNode, useCallback, useMemo, useState } from 'react';
+import {
+  ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 
 import { useStorageContext } from '../storage';
 import { createContextHook, createNullableContext } from '../utility/context';
@@ -336,6 +343,14 @@ export function EditorContextProvider(props: EditorContextProviderProps) {
     [storage, tabState, headerEditor],
   );
 
+  const lastShouldPersistHeadersProp = useRef<boolean | undefined>(undefined);
+  useEffect(() => {
+    const propValue = Boolean(props.shouldPersistHeaders);
+    if (lastShouldPersistHeadersProp.current !== propValue) {
+      setShouldPersistHeaders(propValue);
+    }
+  }, [props.shouldPersistHeaders, setShouldPersistHeaders]);
+
   const synchronizeActiveTabValues = useSynchronizeActiveTabValues({
     queryEditor,
     variableEditor,