在 Apollo Client 中使用变量作为 graphQL 操作名称

Question

我正在连接到一个 graphQL 端点，以获取对页面上各种内容项的反应（例如喜欢、喜欢等）的数量。内容项由 GUID 标识。端点不支持获取 GUID 数组的反应，因此我改用批量查询，批量大小为 20。在这种情况下，端点要求批处理中的每个查询都具有唯一的操作名称。如何将 GUID 传递到 GQL 查询中？

这是我的函数调用：

export const getReactionsByObjectIdsEngagement = async (
  objectIds: string[],
  apolloClient: ApolloClient<NormalizedCacheObject>
): Promise<IReaction[]> => {
  const results: IReaction[] = [];
  objectIds.forEach(async (contentId) => {
    await apolloClient
      .query({
        query: GET_REACTIONS_QUERY_IP(contentId),
        variables: { contentId: contentId },
        context: {
          clientName: EngagementClientName,
          headers: {
            'content-type': 'application/json',
          },
        },
        errorPolicy: 'ignore',
      })
      .then((data) => {
        console.log(data);
        const result: IReaction = {
          Id: contentId,
          Reactions: {
            Cool: data.data.getReactionsQuery.cool,
            Like: data.data.getReactionsQuery.like,
            LOL: data.data.getReactionsQuery.lol,
            Love: data.data.getReactionsQuery.love,
            Magic: data.data.getReactionsQuery.magic,
            Party: data.data.getReactionsQuery.party,
            Wow: data.data.getReactionsQuery.wow,
            YouRock: data.data.getReactionsQuery.youRock,
          },
        };
        results.push(result);
      })
      .catch((error) => {
        console.error(error);
      });
  });

  return results;
};

以及相关查询：

export const GET_REACTIONS_QUERY_IP = (contentId: string) => {
  return gql`
    query getReactionsQuery($contentId: ID!) {
      "${contentId}": reactionsCount(contentId: $contentId) {
        like
        love
        wow
        cool
        party
        youRock
        magic
        lol
      }
    }
  `;
};

我已经让插值本身工作了，但是请求没有成功触发，因为 Apollo 客户端在名称中遇到了意外的数字或字符串。最初我以为是因为我在 GUID 中转义失败，所以我尝试在 Typescript 中生成一个随机数并将其传递到查询中。同样，传递有效，但我在 Apollo 中遇到了同样的错误（'Expected Name, got myQuery_99"）。

Apollo client error

批处理在 forEach 循环中运行良好，请求在浏览器的 Developer Tools Network 选项卡中按预期显示。

帮助一名初级人员在第二天传递一些好消息。提前致谢！

Answer 1

如果你在这里结束：问题是在查询中我的变量周围有一组额外的引号："${contentId}" 应该是 ${contentId}..

在 Apollo Client 中使用变量作为 graphQL 操作名称

Using a variable as an graphQL operation name in Apollo Client

typescript

graphql

apollo-client