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

Question

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

如果我不必单击每个请求并检查标头或响应来确定该请求对应于哪个查询或突变，那么调试会更容易。

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

网络选项卡截图

多谢！

Answer 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 {
    ...
  }
`;

希望它会有所帮助。