在开发者工具的网络选项卡中，是否有一种方法可以为GraphQL请求命名？

Question

我正在使用Apollo作为客户端，并在我的应用程序上运行大量查询和变异。我想知道是否有一种方法可以通过其名称（例如 getProduct）显示每个查询/变异，而不是在我的网络选项卡中全部显示为“图形”？我使用的是Brave浏览器（Chromium）。如果我不必点击每个请求并检查标题或响应以确定此请求对应的查询或变异，那么调试将更加容易。

以下是我的开发工具中目前的显示方式：网络选项卡截图。

非常感谢！

- Milan

---

我的公司不知何故实现了一个requestAlias，使路径看起来像v1（requestAlias），仍在努力弄清如何通过默认的operationName来默认执行此操作... - Nathan Tregillus

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

希望能对您有所帮助。

- bossno

Answer 2

< p > HttpLink 的 uri 属性可以接受一个函数作为参数，该函数的参数为 operation ，因此也可以这样使用：

const httpLink = new HttpLink({ uri: (operation) => `${MY_BASE_URL}?${operation.operationName}` });

- Artem Pelenev