diff --git a/packages/graphiql-react/src/editor/context.tsx b/packages/graphiql-react/src/editor/context.tsx index 26f4d23245..b592dd680d 100644 --- a/packages/graphiql-react/src/editor/context.tsx +++ b/packages/graphiql-react/src/editor/context.tsx @@ -360,13 +360,14 @@ export function EditorContextProvider(props: EditorContextProviderProps) { headerEditor, responseEditor, }); + const { onTabChange, defaultHeaders, children } = props; const setEditorValues = useSetEditorValues({ queryEditor, variableEditor, headerEditor, responseEditor, + defaultHeaders, }); - const { onTabChange, defaultHeaders, children } = props; const addTab = useCallback(() => { setTabState(current => { diff --git a/packages/graphiql-react/src/editor/tabs.ts b/packages/graphiql-react/src/editor/tabs.ts index 6e13a39846..66bfcd51eb 100644 --- a/packages/graphiql-react/src/editor/tabs.ts +++ b/packages/graphiql-react/src/editor/tabs.ts @@ -258,11 +258,13 @@ export function useSetEditorValues({ variableEditor, headerEditor, responseEditor, + defaultHeaders, }: { queryEditor: CodeMirrorEditorWithOperationFacts | null; variableEditor: CodeMirrorEditor | null; headerEditor: CodeMirrorEditor | null; responseEditor: CodeMirrorEditor | null; + defaultHeaders?: string; }) { return useCallback( ({ @@ -278,12 +280,12 @@ export function useSetEditorValues({ }) => { queryEditor?.setValue(query ?? ''); variableEditor?.setValue(variables ?? ''); - if (headerEditor && headers?.length) { - headerEditor.setValue(headers); + if (headerEditor && (headers?.length || defaultHeaders?.length)) { + headerEditor.setValue(headers ?? defaultHeaders ?? ''); } responseEditor?.setValue(response ?? ''); }, - [headerEditor, queryEditor, responseEditor, variableEditor], + [headerEditor, queryEditor, responseEditor, variableEditor, defaultHeaders], ); }