<!DOCTYPE html>
<html lang=en>
<head>
    <meta charset=utf-8>
    <title>GraphiQL</title>
    <link rel=stylesheet href="https://unpkg.com/graphiql@3/graphiql.min.css">
    <style>
        body {
            height: 100%;
            margin: 0;
            width: 100%;
            overflow: hidden;
        }

        #graphiql {
            height: 100vh;
        }
    </style>
    <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/graphiql@3/graphiql.min.js"></script>
</head>
<body>
<div id=graphiql></div>
<script>
    ReactDOM.createRoot(document.getElementById("graphiql")).render(
        React.createElement(GraphiQL, {
            fetcher: params => fetch("{{ url_for(".graphql") }}", {
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                    Accept: "application/json",
                },
                body: JSON.stringify(params),
                mode: "same-origin",
                credentials: "same-origin",
            }).then(response => response.json())
        })
    )
</script>
</body>
</html>
