如何在 Apollo Client React 中获取多个条件查询?
Posted
技术标签:
【中文标题】如何在 Apollo Client React 中获取多个条件查询?【英文标题】:How to fetch multiple conditional queries in Apollo Client React? 【发布时间】:2020-03-14 10:42:25 【问题描述】:我正在使用 Apollo 客户端,为了获取查询,我正在使用来自包 @apollo/react-hooks
的 useQuery
。
我想完成以下工作:
步骤列表:
第 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 中调用多个异步查询呢?
【问题讨论】:
【参考方案1】:正如菲利普所说,你不能有条件地调用钩子。然而,有条件地调用查询非常常见,因此 Apollo 允许您使用 skip
选项跳过它:
const loading, error, data: forum = , subscribeToMore = useQuery(GET_FORUM,
skip: !forumId,
fetchPolicy: 'cache-and-network',
variables: id: forumId ,
);
调用了钩子,但没有调用查询。在我看来,这比在你的用例中使用惰性查询更简单、更清晰。
【讨论】:
这是一个好方法,但是当你想获取第一个或第二个查询时,延迟钩子是解决这个问题的最佳方法,在我看来。【参考方案2】:The rules of hooks 说你不能有条件地调用钩子,每当你发现自己处于想在钩子周围使用 if/else 的情况下,你可能走错了路。
您在此处要做的是将lazyQuery 用于“可选”或稍后将被提取的所有内容 - 或用于依赖于另一个查询结果的查询。
这是一个简单的示例(可能还不够完整,无法让您的整个代码正常工作):
// This query is always called, use useQuery
const GetStage = useQuery(confirmStageQuery,
variables:
input:
id: getId.id
);
const [fetchQuery1, loading1, data1 ] = useLazyQuery(Query1);
const [fetchQuery2, loading2, data2 ] = useLazyQuery(Query2);
// Use an effect to execute the second query when the data of the first one comes in
useEffect(() =>
if (!GetStage.loading && GetStage.data.getGame.stage === "Created")
fetchQuery1(variables:
input:
id: getId.id
)
else if (!GetStage.loading && GetStage.data.getGame.stage === "Confirmed")
fetchQuery2(variables:
input:
id: getId.id
)
, [GetState.data, GetStage.loading])
【讨论】:
以上是关于如何在 Apollo Client React 中获取多个条件查询?的主要内容,如果未能解决你的问题,请参考以下文章
react native apollo client useQuery invalid hook call error
如何使用 React-Hooks 和 Apollo Client 在 React-GraphQL 中实现搜索功能?
如何让 Apollo Client 告诉我错误发生在代码的哪个位置?
前端的用户角色/权限 - React / GraphQL / Apollo Client