google-chromefirefoxgraphqlgraphiqlabsinthe

Graphiql (GraphQL UI) not loading in Chrome but works in Firefox and Safari

I'm not sure what changed in Chrome but the Graphiql GUI tool is not loading.

enter image description here

In Firefox and Safari it works just fine. I have disabled all Chrome extensions, restarted Chrome, and restarted my Mac. The error persists. How do I debug this?

In graphql-workspace.min.js it errors on:

this.state.config.state.proxy || this.state.config.state.headers.forEach(function(e) {

Error:

graphiql-workspace.min.js:1 Uncaught TypeError: Cannot read property 'forEach' of undefined
    at t.value (graphiql-workspace.min.js:1)
    at t.value (graphiql-workspace.min.js:1)
    at t.value (graphiql-workspace.min.js:1)
    at t.value (graphiql-workspace.min.js:1)
    at performInitialMount (react-dom.min.js:13)
    at p.mountComponent (react-dom.min.js:13)
    at Object.mountComponent (react-dom.min.js:14)
    at mountChildren (react-dom.min.js:14)
    at m._createInitialChildren (react-dom.min.js:13)
    at mountComponent (react-dom.min.js:13)

Here is a picture of it working in Firefox: enter image description here

Not sure why headers is undefined.

I am using: Elixir, Phoenix, Absinthe, Absinth-Plug, Vue, Vue-Apollo, apollo-boost, graphql,

Since the GUI appears to be loading from a CDN I'm wondering if that's a direction I should explore. However the network tab in chrome shows no failures.

enter image description here

Solution

  • It seems that much of the activity/history of using Graphiql is saved to localStorage. I'm not sure what broke the history but I inspected the broken config in the console with a few breakpoints. This lead me to discover that localStorage was being used. I then cleared a lot of key/values in there and my Graphiql rendered successfully.