Question

在探索与@ apollo / client的反应时，我使用useQuery进行首次加载，使用useLazyQuery进行按需加载（经过一些操作，刷新，创建等），如下所示：

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

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

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

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

Answer 1

经过更多研究，我知道可以利用useQuery返回的refetch函数来执行此类操作！

所以我得到的是，在这种情况下，我可以完全避免使用useLazyQuery，而只需使用refetch。

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

合并useQuery和useLazyQuery的结果-React Apollo

1 个答案: