@foal/graphiql
Version:
GraphiQL integration for FoalTS
56 lines (51 loc) • 1.36 kB
HTML
<!--
This page is greatly inspired from https://github.com/graphql/graphiql/blob/main/examples/graphiql-cdn/index.html.
-->
<html>
<head>
<style>
body {
height: 100%;
margin: 0;
width: 100%;
overflow: hidden;
}
#graphiql {
height: 100vh;
}
</style>
<script src="./react.production.min.js" ></script>
<script src="./react-dom.production.min.js" ></script>
<link rel="stylesheet" href="./graphiql.min.css" />{{ cssTheme }}
</head>
<body>
<div id="graphiql">Loading...</div>
<script src="./graphiql.min.js" ></script>
<script>
function graphQLFetcher(graphQLParams) {
return fetch(
'{{ endpoint }}',
{
method: 'post',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify(graphQLParams),
},
).then(function (response) {
return response.json().catch(function () {
return response.text();
});
});
}
ReactDOM.render(
React.createElement(GraphiQL, Object.assign({
fetcher: graphQLFetcher,
}, {{ options }})),
document.getElementById('graphiql'),
);
</script>
</body>
</html>