graphql / graphql/graphiql

[graphiql] variables and headers do not load on first default tab

Open
#3,392 0 comments 0 reactions 0 assignees View on GitHub
bug graphiql
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;
}









Loading...


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

![image](https://github.com/graphql/graphiql/assets/5588957/311d6d82-7171-428b-b33f-fbc65f7896a9)

![image](https://github.com/graphql/graphiql/assets/5588957/0d8f8628-e2fa-4496-aa0d-e579710284eb)

![image](https://github.com/graphql/graphiql/assets/5588957/ce1d149d-9f8f-43fd-b8eb-52ed5e64930d)

### 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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.