SY webprofiler broken in graphiql

[akomm]

Q	A
Bug report?	yes
Feature request?	no
BC Break report?	no
RFC?	no
Version/Branch	0.8.0

Wen I open the graphiql provided by this bundle, I have the following issues:

• The WP toolbar is open on page load
• The WP toolbar can not be closed. It covers variables input in graphiql.
• The toolbar-info positions (mouseover detail-toolstips) are not correctly aligned. The right most is therefore out of client width boundaries.
• added XHR request info is updated for a moment and then cleared.

Researching I found the reason.

The graphQLFetcher updates the toolbar DOM here (GraphQLBundle)

The WP toolbar inject an initializer script here (WebProfilerBundle)

The initialization includes:

• Positioning toolbar-info
• Registering click handlers queriend DOM by id including initial token

Problem:

• [Issue cause] When the toolbar DOM is replaced in graphQLFetcher the events are not attached on the new DOM
• [Additional] Old events are not unregistered.

[mcg-web]

Thanks for bringing up this bug.

[akomm]

Since the XHR info is broken anyway, removing the .load call in graphQLFetcher actually improves the situation. At least you can close the toolbar and you can see the XHR request history this way.

There is sadly no API from Sfjs side to reload it (or I missed it somewhere) and the initializer is an IIFE. One possible way to fix it I see is store the template in a JS (twig include) variable as string with token and evtl. nounce placeholder to replace and inject new script tags with the IIEF string content... Not sure how to get to the correct nounce value at this moment though.

Workaround to make variables in graphiql accessible and XHR info more useable until fix:

# app/config/config_dev.yml
parameters:
  overblog_graphql.graphiql_template: 'graphiql.html.twig'

{# app/Resources/views/graphiql.html.twig #}
{% extends 'OverblogGraphQLBundle:GraphiQL:index.html.twig' %}

{% block body_script %}
  <script>
    var endpoint = {{ endpoint | json_encode | raw }}

      function graphQLFetcher(params) {
        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) => {
          return res.text()
        }).then((body) => {
          try {
            return JSON.parse(body)
          } catch (err) {
            return body
          }
        })
      }

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

[mcg-web]

The best solution is to remove the reload, i think right now.

[mcg-web]

Removed in 0.8.2. I also added a twig block to leave possibility to implement this in overridden template. Thanks again for reporting.