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

【问题标题】：How to tell GraphQL requests apart in dev tools network tab when all have identical URL?当所有 URL 都相同时，如何在开发工具网络选项卡中区分 GraphQL 请求？
【发布时间】：2020-09-05 06:21:03
【问题描述】：

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

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

人们如何解决这个问题？

【问题讨论】：

您是否研究过有助于解决此问题的工具？例如。 chrome.google.com/webstore/detail/graphql-network/… 立即出现。
我在想这可以在我的代码中以某种方式解决，这样它就可以在所有浏览器中运行，也许是一个向 URL 添加后缀的 util/library 或类似的东西。安装闭源 Chrome 扩展对我来说不是一个理想的解决方案。
对图书馆的建议将不在此处讨论。 GraphQL 规范本身对传输没有具体要求，POST /graphql -> 200 OK 是一个约定：graphql.org/learn/serving-over-http。一般来说，如果对什么将是“理想的解决方案”存在限制，则应将它们包含在问题中。
如果我不是向“/graphql”发出graphql请求，而是向“/graphql/InsertOperationNameHere”发出请求，那么我将能够很容易地区分请求。然后我必须编写我的服务器端，以便它侦听所有“/graphql/*” URL，而忽略 URL 的“/*”部分。但令我困惑的是，这似乎是一个基本问题。为什么不是每个使用 GraphQL 的人都有这个问题？

标签： graphql google-chrome-devtools apollo

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

基本上，如果您对此感到厌烦：

使用这个GraphQL Network Inspector 得到这个：

如果以后链接断开，只需搜索“chrome extensions GraphQL Network Inspector”。

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

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

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

【讨论】：

这绝对是完美的！

【解决方案3】：

我正在使用 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 客户端库。

【讨论】：