在devtool网络选项卡中是否有命名graphql请求的方法?

在devtool网络选项卡中是否有命名graphql请求的方法?,graphql,apollo,apollo-client,devtools,Graphql,Apollo,Apollo Client,Devtools,我使用apollo作为我的客户机,在我的应用程序上运行大量的查询和变化。我想知道是否有一种方法可以让我的每一个查询/变异都以其名称显示(例如getProduct),而不是在我的网络选项卡中以“图形”的形式显示?我是勇敢的 如果我不必单击每一个并检查标题或响应以确定此请求对应的查询或变体,那么调试就会更容易 下面是它当前在我的devtools中的显示方式: 非常感谢 也许有更好的方法,但这里是我能做的最简单的代码 import { ApolloClient, ApolloLink,

我使用apollo作为我的客户机,在我的应用程序上运行大量的查询和变化。我想知道是否有一种方法可以让我的每一个查询/变异都以其名称显示(例如getProduct),而不是在我的网络选项卡中以“图形”的形式显示?我是勇敢的

如果我不必单击每一个并检查标题或响应以确定此请求对应的查询或变体,那么调试就会更容易

下面是它当前在我的devtools中的显示方式:


非常感谢

也许有更好的方法,但这里是我能做的最简单的代码

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 {
    ...
  }
`;
希望能有帮助