Using headers prop creates new tab on every reload
See original GitHub issueI’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.
Issue Analytics
- State:
- Created a year ago
- Comments:9 (1 by maintainers)
Top Results From Across the Web
ContextAPI loses state on page reload and when opened in ...
The issue is that when I reload/open a component (these are dependent on the state that is passed from the context Provider) in...
Read more >How to Build a Tabs Component with React - DigitalOcean
In this step, you will create a new folder and the Tabs component that will render each Tab . First, create a folder...
Read more >Working with the Tabs API - Mozilla - MDN Web Docs
Discovering more about tabs and their properties using tabs.query . Creating, duplicating, moving, updating, reloading, and removing tabs.
Read more >How to Make a Modal Popup Refresh Items on the Page
The above reload() method forcefully reloads the page by invoking the built-in reload method on the browser's global object (the window object) ...
Read more >How to Open URL in New Tab using JavaScript
Do not add a third parameter to it as it will result in the opening of a new window rather than a tab....
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Thanks @spawnia for surfacing this, can confirm that this appears again, reopening the issue and looking into it 👀
Hey @sdcoffey 👋 let me elaborate a bit on the behavior of the props that set the editor values (
query
,variables
andheaders
).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 fromlocalStorage
. If one of them is set, there are two cases:localStorage
. GraphiQL will choose this tab to be the active one.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
orheaders
, 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?