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

Question

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

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

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

network tab screenshot

非常感谢！

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

希望对您有所帮助。

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

Is there a way to name graphql requests in the devtool network tab?

devtools

apollo

graphql

apollo-client