Graphiql (GraphQL UI) 无法在 Chrome 中加载，但在 Firefox 和 Safari 中有效

Posted 2023-03-10

【中文标题】Graphiql (GraphQL UI) 无法在 Chrome 中加载，但在 Firefox 和 Safari 中有效

【英文标题】：Graphiql (GraphQL UI) not loading in Chrome but works in Firefox and Safari

【发布时间】：2020-09-24 08:59:08

【问题描述】：

我不确定 Chrome 中发生了什么变化，但 Graphiql GUI 工具未加载。

在 Firefox 和 Safari 中它工作得很好。我已禁用所有 Chrome 扩展程序，重新启动 Chrome，并重新启动我的 Mac。错误仍然存​​在。我该如何调试？

在 graphql-workspace.min.js 中出现错误：

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

错误：

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)

这是它在 Firefox 中工作的图片：

不确定为什么 headers 未定义。

我正在使用： Elixir、Phoenix、Absinthe、Absinth-Plug、Vue、Vue-Apollo、apollo-boost、graphql、

由于 GUI 似乎是从 CDN 加载的，我想知道这是否是我应该探索的方向。但是 chrome 中的网络选项卡没有显示失败。

【参考方案1】：

似乎大部分使用 Graphiql 的活动/历史都保存到 localStorage。我不确定是什么破坏了历史记录，但我用几个断点检查了控制台中损坏的配置。这使我发现正在使用 localStorage。然后我清除了那里的很多键/值，我的 Graphiql 渲染成功。