使用 useLazyQuery 挂钩调用查询时如何重新获取查询?

Posted

技术标签:

【中文标题】使用 useLazyQuery 挂钩调用查询时如何重新获取查询?【英文标题】:How do I refetchQueries when query is called using useLazyQuery hook? 【发布时间】:2020-08-25 05:29:02 【问题描述】:

我有一个提要列表组件,并且我在它上面有一个搜索输入组件。两个组件都使用 useLazyQuery 挂钩。 const [getFeedPosts, data, loading, error ] = useLazyQuery(GET_ALL_POSTS) 在提要列表中,我在装载时手动触发 getFeedPosts 并呈现项目列表。 在搜索输入组件中,我在点击时触发 getFeedPosts。

在收到搜索结果后,有没有办法覆盖缓存? 理想情况下,列表组件会自动重新渲染。

问题是 useLazyQuery 不提供“refetchQueries”功能,所以我在获得搜索结果后无法“refetch”。

否则,我需要一些全局状态(redux、上下文 API...),但从那时起,如果我喜欢/更新/删除帖子,我必须手动管理状态。

【问题讨论】:

【参考方案1】:

通过发现 useLazyQuery 提供了可用于手动更新缓存的 client 来解决此问题。

const [getPosts,  data, loading, error, fetchMore, client ] = useLazyQuery(GET_ALL_POSTS, 
    onCompleted: (data) => updateCache( client, data ),
);

function updateCache( client, data : any) 
  client.writeQuery(
    query: GET_ALL_POSTS,
    data: 
      ...data,
      post: 
        ...data.post,
        getFeedPosts: 
          ...data.getFeedPosts,
          edges: [...data.post.getFeedPosts.edges],
          totalCount: data.post.getFeedPosts.totalCount,
          __typename: data.post.getFeedPosts.__typename,
        ,
        __typename: data.post.__typename,
      ,
    ,
  );

【讨论】:

以上是关于使用 useLazyQuery 挂钩调用查询时如何重新获取查询?的主要内容,如果未能解决你的问题,请参考以下文章

Apollo useLazyQuery 反复调用

apollo useLazyQuery 绕过缓存

如何使用 Apollo 更改道具上的查询?

Apollo 是不是可以在调用 useLazyQuery 后清除数据 obj

将 fetchPolicy 设置为“standby”时无法调用 client.watchQuery - 从 useLazyQuery 加载页面时引发错误

如何在 react-apollo 中等待多个 useLazyQuery