为啥 apollo-client 的 GraphQL 查询不出现在 Chrome 的 XHR 网络过滤器中？

Posted 2023-02-27

【中文标题】为啥 apollo-client 的 GraphQL 查询不出现在 Chrome 的 XHR 网络过滤器中？

【英文标题】：Why don't apollo-client's GraphQL queries appear in Chrome's XHR Network filter?为什么 apollo-client 的 GraphQL 查询不出现在 Chrome 的 XHR 网络过滤器中？

【发布时间】：2018-11-28 18:36:50

【问题描述】：

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

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

在下面的第一张图片中，您会看到我过滤了带有“gra”的请求；出现两个：OPTIONS 调用，然后是 POST（这是真正的肉）。在第二张图片中，我另外过滤了 XHR； POST 不见了。

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

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

【问题讨论】：

我也想知道。

【参考方案1】：

我认为造成这种情况的原因是 Chrome 的 fetch 功能不仅仅是古老的 XMLHttpRequest 功能之上的糖，而且 DevTools 中的过滤器选项（上面写着“XHR”）要么没有构建或未设计为伞式“异步请求”过滤器。我希望他们能改变这一点，尤其是因为“网络”面板中的“类型”列仍可用于区分两者。

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

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