buggood first issuegraphiql
Repository metrics
- Stars
- (15,473 stars)
- PR merge metrics
- (Avg merge 3d 23h) (50 merged PRs in 30d)
Description
In the following code, according to the documentation, request headers should be persisted, but they are cleaned after page is refreshed.
<!DOCTYPE html>
<html>
<head>
<link href="https://unpkg.com/graphiql/graphiql.min.css" rel="stylesheet"/>
</head>
<body style="margin: 0;">
<div id="graphiql" style="height: 100vh;"></div>
<script crossorigin src="https://unpkg.com/react/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
<script crossorigin src="https://unpkg.com/graphiql/graphiql.min.js"></script>
<script>
function graphQLFetcher(graphQLParams, opts = {headers: {}}) {
return fetch(
'/api',
{
method: 'post',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
...opts.headers
},
body: JSON.stringify(graphQLParams),
credentials: 'omit',
},
).then(function (response) {
return response.json().catch(function () {
return response.text();
});
});
}
ReactDOM.render(
React.createElement(GraphiQL, {
fetcher: graphQLFetcher,
headerEditorEnabled: true,
}),
document.getElementById('graphiql'),
);
</script>
</body>
</html>
headers: an optional GraphQL string to use as the initial displayed request headers, if undefined is provided, the stored headers will be used.