[graphiql] variables and headers do not load on first default tab
- Dominant language
- TypeScript
- Stars
- 16.9k
- Forks
- 1.9k
- Avg merge
- 22h 45m
- Merged PRs (30d)
- 70
Description
### Is there an existing issue for this?
- [X] I have searched the existing issues
### Current Behavior
If you define `defaultTabs` with `variables` and/or `headers` set on the first tab it still won't get rendered (at least not on first load).
### Expected Behavior
Variables and headers render on initial page load like normal.
### Steps To Reproduce
demo.html
Based on [graphiql/examples/graphiql-cdn/index.html at main · graphql/graphiql](https://github.com/graphql/graphiql/blob/85edb9e0505db8ff963c9ad4674bc8fa2e02a35a/examples/graphiql-cdn/index.html):
```html
GraphiQL
body {
height: 100%;
margin: 0;
width: 100%;
overflow: hidden;
}
#graphiql {
height: 100vh;
}
const root = ReactDOM.createRoot(document.getElementById("graphiql"));
const fetcher = GraphiQL.createFetcher({
url: "https://swapi-graphql.netlify.app/.netlify/functions/index",
headers: { "X-Example-Header": "foo" },
});
const explorerPlugin = GraphiQLPluginExplorer.explorerPlugin();
root.render(
React.createElement(GraphiQL, {
fetcher,
defaultEditorToolsVisibility: true,
plugins: [explorerPlugin],
defaultTabs: [
{
query: `\
query FirstStarships($first: Int) {
allStarships(first: $first) {
starships {
name
model
}
}
}`,
variables: JSON.stringify(
{
first: 10,
},
null,
" "
),
headers: JSON.stringify(
{
"X-Special": "42",
},
null,
" "
),
},
{
query: `\
query FirstStarships2($first: Int) {
allStarships(first: $first) {
starships {
name
model
}
}
}`,
variables: JSON.stringify(
{
first: 10,
},
null,
" "
),
headers: JSON.stringify(
{
"X-Special": "42",
},
null,
" "
),
}
],
})
);
```
Initial load
After moving to second tab
After returning to first tab



### Environment
* GraphiQL Version: latest
* OS: macOS 13.5
* Browser: Microsoft Edge Version 115.0.1901.188 (Official build) (arm64)
* Bundler: unpkg.com
* `react` Version: 18
* `graphql` Version: transitive
### Anything else?
I first noticed this when loading multiple default tabs but the scenario is worse with a single default tab: the variables and headers don't display and there's no tab to move to and then return from to get the variables and headers to display
Contributor guide
Assessment
This issue has not been assessed yet.