时间戳

首页 > 解决方案 > 合并 useQuery 和 useLazyQuery 的结果 - React Apollo

reactjs - 合并 useQuery 和 useLazyQuery 的结果 - React Apollo

问题描述

在探索与@apollo/client 的反应时，我使用useQuery的是第一次加载和useLazyQuery按需加载（在某些操作、刷新、创建等之后），如下所示：

 const { data} = useQuery(GET_POSTS_QUERY);
 const [fetchPosts, { data: fetchedposts}] = useLazyQuery(GET_POSTS_QUERY);

我data在我的 JSX 标记中渲染，但由于名称冲突，我需要按需获取数据到其他 const named fetchedposts。

在这种情况下，我将如何更新我的 UI 上的数据？我的用户界面正在使用data而不是fetchedposts！

有什么办法可以合并这两个州。或者我应该useState使用这些单独的状态并更新相同的状态？

标签： reactjsreact-hooksreact-apolloapollo-client

解决方案

经过一番研究，我知道我可以利用refetchuseQuery 返回的函数来执行这些操作！

所以我在这里得到的是，在这种情况下，我可以完全避免 useLazyQuery 并且只需重新获取即可。

const { data, loading, error, refetch} = useQuery(GET_POSTS_QUERY);
.
.
.
<button className="btn btn-raised btn-primary" onClick={() => refetch()}>
  Fetch Posts on Demand
</button>

推荐阅读