Using headers prop creates new tab on every reload

I’ve created a repro here: https://stackblitz.com/edit/react-ts-9dagjc?file=GraphiQL.tsx

Try hitting the refresh button on the preview on the right. It seems when i remove the headers prop the problem disappears.

[thomasheyenbrock]

Thanks @spawnia for surfacing this, can confirm that this appears again, reopening the issue and looking into it 👀

[thomasheyenbrock]

Hey @sdcoffey 👋 let me elaborate a bit on the behavior of the props that set the editor values (query, variables and headers).

When initially rendering GraphiQL, there are two sources where we could read the editor values from: The props I just mentioned and the latest state of all the tabs persisted in localStorage. When these props are not set, GraphiQL just restores the state from localStorage. If one of them is set, there are two cases:

• The values provided via props match some of the tabs in localStorage. GraphiQL will choose this tab to be the active one.
• The values provided via props match none of the tabs in localStorage. GraphiQL will then create a new tab with the values provided via props and choose this to be the active one.

To summarize: If you set at least one of the props query, variables or headers, then GraphiQL will open up a new tab when reloading if the value of the props during the initial render don’t match the latest persisted state before reloading.

---

All the above was a general explanation about the behavior when GraphiQL creates new tabs on reload. I’m necessarily sure that this resolves your issue, but I think this is valuable information related to the behavior of GraphiQL with tabs (also for others that might find this issue in the future).

So, given this context, does that explain the behavior you’re seeing? If not, can you provide a reproduction so that we can debug this?