在 Apollo Client 中使用變量作為 graphQL 操作名稱

Question

我正在連接到一個 graphQL 端點，以獲取頁面上各種內容項的反應（例如喜歡、喜歡等）的數量。 內容項由 GUID 標識。 端點不支持獲取 GUID 數組的反應，因此我改用批處理查詢，批量大小為 20。在這種情況下，端點要求批處理中的每個查詢都具有唯一的操作名稱。 如何將 GUID 傳遞到 GQL 查詢中？

這是我的 function 電話：

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'）。

阿波羅客戶端錯誤

批處理在 forEach 循環中運行良好，請求按預期顯示在瀏覽器的 Developer Tools Network 選項卡中。

幫助初級人員在第二天傳遞一些好消息。 提前致謝！

Answer 1

如果你在這里結束：問題是在查詢中我的變量周圍有一組額外的引號： "${contentId}"應該是${contentId} ..