xmlhttprequest - 为什么 apollo-client 的 GraphQL 查询没有出现在 Chrome 的 XHR 网络过滤器中？

Question

我正在使用 apollo-client，我刚刚注意到当 XHR 过滤器处于事件状态时，我的 GraphQL 查询没有出现在网络调用列表中。

这怎么可能？ GQL 只是常规旧 HTTP 之上的一组语义，对吧？它不像 JS 库可以引入全新的网络功能。

在下面的第一张图片中，您看到我过滤了其中包含“gra”的请求；出现两个:OPTIONS 调用，然后是 POST(真正的内容)。在第二张图片中，我额外过滤了 XHR； POST 不见了。

“XHR”过滤器表示它捕获“XHR and Fetch”。我能想到的唯一选择是动态添加 <script>标记到文档，我非常怀疑 apollo-client 是如何管理事情的。

我不知道“json”类型是什么。 docs for the DevTools不要提那种类型。

Answer 1

我认为这是因为 Chrome 的 fetch 功能不仅仅是古老的 XMLHttpRequest 功能之上的糖分，而且 DevTools 中的过滤器选项 (上面写着“XHR”)要么没有构建，要么没有设计成一个伞式“异步请求”过滤器。我希望他们改变这一点，特别是因为网络面板中的类型列仍然可以用来区分两者。

如果非要我推测的话，我会说我们观察到的行为源自“网络”选项卡 Hook 到底层网络代码的方式，并且 fetch 调用不会经过相关部分XHR 的代码路径。作为支持证据，我提供 this SO answer ，它突出显示了 XHR 和 fetch 之间的功能差异，这很容易通过它们是完全独立的代码来解释。 (这些差异中的一些也可能是 fetch 规范明确调用不同于 XHR 的行为的结果。)

最后，我要补充一点，我们可能只在 Apollo 的 GQL 工具中注意到了这一点，因为 apollo-client 是在后 XHR 世界中创建的，并且可能是我们使用的第一个喜欢 fetch 通过 XHR 而不是使用 XHR polyfill。