buggood first issuegraphiql
説明
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.