当所有请求都具有相同的 URL 时，如何在开发工具网络选项卡中区分 GraphQL 请求？

Question

当所有请求都具有相同的 URL 时，如何在开发工具网络选项卡中区分 GraphQL 请求？

我的所有请求的目标都是/api/graphql为了区分它们，我需要单击每个请求，切换到“标头”选项卡，向下滚动到“请求有效负载”部分并阅读查询。这意味着我几乎无法对请求进行概览，因此我必须单击多个请求才能找到我想要检查的请求。

人们如何解决这个问题？

Answer 1

基本上，如果你厌倦了这个：

使用此GraphQL 网络检查器来获取：

如果将来链接中断，只需搜索“chrome 扩展 GraphQL Network Inspector”即可。

我知道有人在问题的评论中提出了这个建议，但该 URL 已损坏。

另外，我知道操作员特别澄清他们正在为评论中的所有浏览器寻找代码内解决方案，但他们最初的问题是我在寻找什么&这是我的解决方案。这个答案对于寻找这个的人来说很有用，因为这个扩展确实帮助了我！

它对我有用，因为虽然我在多个浏览器中进行测试，但我的大部分开发都是在 chromium 中进行的。该解决方案适用于以相同方式开发并使用基于 chromium 的浏览器（chrome、brave、edge 等）的任何人。

Answer 2

我正在使用 Apollo，我在这里找到了一些相关信息： https: //github.com/apollographql/apollo-link/issues/264

我采用的解决方案是这个查询参数（服务器端未使用）：

const customFetch = (uri, options) => {
  const { operationName } = JSON.parse(options.body);
  return fetch(`${uri}/graphql?op=${operationName}`, options);
};

const link = createHttpLink({ fetch: customFetch });

该解决方案可以轻松适应其他 gql 客户端库。

Answer 3

将 uri 与函数一起使用来附加操作名称

const httpLink = createHttpLink({ uri: ({ operationName }) => {
    return `/graphql/${operationName}`;
} });

来自： https: //github.com/apollographql/apollo-link/issues/264#issuecomment-461953427