时间戳

首页 > 解决方案 > 如何在 Apollo Client React 中获取多个条件查询？

javascript - 如何在 Apollo Client React 中获取多个条件查询？

问题描述

我正在使用 Apollo Client，并useQuery从包中获取我正在使用的查询@apollo/react-hooks。

我想完成以下任务：

步骤清单：

第 1 步：获取查询stage

const GetStage = useQuery(confirmStageQuery, {
  variables: {
    input: {
      id: getId.id
    }
  }
});

第 2 步：根据我们从 获得的响应，GetStage我们希望在 2 个单独的查询之间切换

if (!GetStage.loading && GetStage.data.getGame.stage === "Created") {
  Details = useQuery(Query1, {
    variables: {
      input: {
        id: getId.id
      }
    }
  });
} else if (!GetStage.loading && GetStage.data.getGame.stage === "Confirmed") {
  Details = useQuery(Query2, {
    variables: {
      input: {
        id: getId.id
      }
    }
  });
}

第 3 步：此外，当页面每次加载时，我都会重新获取数据。

useEffect(() => {
  //Fetch for Change in the Stage
  GetStage.refetch();

  //Fetch for Change in the Object
  if (Details) {
    Details.refetch();
    if (Details.data) {
      setDetails(Details.data.getGame);
    }
  }
});

问题？

比上一次渲染时渲染了更多的钩子。

Details.data 未定义

那么我们如何在 Apollo Client 中调用多个异步查询呢？

标签： javascriptasynchronousreact-hooksreact-apolloapollo-client

解决方案

正如菲利普所说，你不能有条件地调用钩子。然而，有条件地调用查询是很常见的，所以 Apollo 允许您使用以下skip选项跳过它：

const { loading, error, data: { forum } = {}, subscribeToMore } = useQuery(GET_FORUM, {
  skip: !forumId,
  fetchPolicy: 'cache-and-network',
  variables: { id: forumId },
});

钩子被调用，但查询不是。在我看来，这比对您的用例使用惰性查询更简单、更清晰。

推荐阅读