src/Resources/views/GraphiQL/index.html.twig

<!DOCTYPE html>
<html>
<head>
  {% block head %}
  {% block style %}
    <style>
      html, body {
        width: 100%;
        height: 100%;
        margin: 0;
        overflow: hidden;
      }
    </style>
  <link href="https://unpkg.com/graphiql@{{ versions.graphiql }}/graphiql.css" rel="stylesheet">
  {% endblock style %}
    {% if versions.fetch matches '/^[~^]?2/' %}
      <script src="https://unpkg.com/whatwg-fetch@{{ versions.fetch }}/fetch.js"></script>
    {% else %}
      <script src="https://unpkg.com/whatwg-fetch@{{ versions.fetch }}/dist/fetch.umd.js"></script>
    {% endif %}
    {% if versions.react matches '/^[~^]?15/' %}
      <script src="https://unpkg.com/react@{{ versions.react }}/dist/react.min.js"></script>
      <script src="https://unpkg.com/react-dom@{{ versions.react }}/dist/react-dom.min.js"></script>
    {% else %}
      <script src="https://unpkg.com/react@{{ versions.react }}/umd/react.production.min.js"></script>
      <script src="https://unpkg.com/react-dom@{{ versions.react }}/umd/react-dom.production.min.js"></script>
    {% endif %}
    <script src="https://unpkg.com/graphiql@{{ versions.graphiql }}/graphiql.min.js"></script>
    <title>{% block title %}GraphiQL{% endblock title %}</title>
  {% endblock head %}
</head>
<body>
{% block body %}
  {% block body_loading %}Loading...{% endblock body_loading %}
  {% block body_script %}
    <script>
      var endpoint = {{ endpoint | json_encode | raw }};

        function graphQLFetcher(params) {
          {% block fetcher_function_body %}
          var headers

          {% block graphql_fetcher_headers %}
          headers = {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
          }
          {% endblock graphql_fetcher_headers %}

          return fetch(endpoint, {
              method: 'post',
              headers: headers,
              body: JSON.stringify(params),
              credentials: 'include',
            }).then((res) => {
              {% block post_fetch %}{% endblock post_fetch %}
              return res.text()
            }).then((body) => {
            try {
              return JSON.parse(body)
            } catch (err) {
              return body
            }
          })
          {% endblock fetcher_function_body %}
        }

      {% block graphiql_render %}
      ReactDOM.render(
        React.createElement(GraphiQL, {
          {% block graphiql_params %}
          fetcher: graphQLFetcher
          {% endblock graphiql_params %}
        }),
        document.body
      )
      {% endblock graphiql_render %}
    </script>
  {% endblock body_script %}
{% endblock body %}
</body>
</html>