save showPersistHeadersSettings in storage

packages/graphiql-react/src/components/provider.tsx

@@ -258,6 +258,7 @@ useEffect(() => {
               );
               return {
                 activeTabIndex: state.activeTabIndex,
+                shouldPersistHeaders: state.shouldPersistHeaders,
                 tabs: state.shouldPersistHeaders
                   ? state.tabs
                   : state.tabs.map(tab => ({ ...tab, headers: null })),

packages/graphiql/src/GraphiQL.tsx

@@ -67,11 +67,13 @@ const GraphiQL_: FC<GraphiQLProps> = ({
   responseTooltip,
   defaultEditorToolsVisibility,
   isHeadersEditorEnabled,
-  showPersistHeadersSettings,
   forcedTheme,
   confirmCloseTab,
   className,
 
+  shouldPersistHeaders,
+  showPersistHeadersSettings = Boolean(shouldPersistHeaders),
+
   children,
   ...props
 }) => {
@@ -98,9 +100,7 @@ const GraphiQL_: FC<GraphiQLProps> = ({
     throw new TypeError('The `readOnly` prop has been removed.');
   }
   const interfaceProps: GraphiQLInterfaceProps = {
-    // TODO check if `showPersistHeadersSettings` prop is needed, or we can just use `shouldPersistHeaders` instead
-    showPersistHeadersSettings:
-      showPersistHeadersSettings ?? props.shouldPersistHeaders !== false,
+    showPersistHeadersSettings,
     onEditQuery,
     onEditVariables,
     onEditHeaders,
@@ -120,6 +120,7 @@ const GraphiQL_: FC<GraphiQLProps> = ({
     <GraphiQLProvider
       plugins={[...(referencePlugin ? [referencePlugin] : []), ...plugins]}
       referencePlugin={referencePlugin}
+      shouldPersistHeaders={shouldPersistHeaders}
       {...props}
     >
       <HistoryToUse {...(hasHistoryPlugin && { maxHistoryLength })}>

packages/graphiql/src/ui/sidebar.tsx

@@ -232,7 +232,7 @@ export const Sidebar: FC<SidebarProps> = ({
           </VisuallyHidden>
           <Dialog.Close />
         </div>
-        {showPersistHeadersSettings ? (
+        {showPersistHeadersSettings && (
           <div className="graphiql-dialog-section">
             <div>
               <div className="graphiql-dialog-section-title">
@@ -265,7 +265,7 @@ export const Sidebar: FC<SidebarProps> = ({
               </Button>
             </ButtonGroup>
           </div>
-        ) : null}
+        )}
         {!forcedTheme && (
           <div className="graphiql-dialog-section">
             <div>