有没有办法在 devtool 网络选项卡中命名 graphql 请求？

【问题标题】：Is there a way to name graphql requests in the devtool network tab?有没有办法在 devtool 网络选项卡中命名 graphql 请求？
【发布时间】：2021-02-14 22:57:23
【问题描述】：

我使用 apollo 作为我的客户端，我在我的应用程序上运行了大量的查询和突变。我想知道是否有办法让我的每个查询/突变都按其名称（例如 getProduct）显示，而不是在我的网络选项卡中全部显示为“图表”？我在 Brave (Chromium) 上。

如果我不必单击每一个并检查标题或响应来确定此请求对应于哪个查询或突变，这将使调试更容易。

这是它目前在我的开发工具中的显示方式：

network tab screenshot

非常感谢！

【问题讨论】：

标签： graphql apollo apollo-client devtools

【解决方案1】：

也许有更好的方法，但这里是我可以做的最少代码。

import {
  ApolloClient,
  ApolloLink,
  HttpLink,
  InMemoryCache,
} from '@apollo/client';

const httpLink = new HttpLink({ uri: MY_BASE_URL });

const namedLink = new ApolloLink((operation, forward) => {
  operation.setContext(() => ({
      uri: `${MY_BASE_URL}?${operation.operationName}`,
    })
  );
  return forward ? forward(operation) : null;
});

export const client = new ApolloClient({
  link: ApolloLink.from([namedLink, httpLink]),
  cache: new InMemoryCache(),
});

您必须为您的查询命名：

import { gql } from "@apollo/client";

const QUERY = gql`
  query QueryName {
    ...
  }
`;

希望对你有所帮助。

【讨论】：