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

Question

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

有什么方法可以在我收到搜索结果后覆盖缓存？理想情况下，列表组件会自动重新呈现。

问题是 useLazyQuery 没有提供 "refetchQueries" 功能，所以我无法在获得搜索结果后 "refetch"。

否则，我将需要一些全局状态（redux、上下文 API...），但从那时起，如果我 like/update/delete post，我必须手动管理状态。

Answer 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 挂钩调用查询时如何重新获取查询？

How do I refetchQueries when query is called using useLazyQuery hook?

apollo

reactjs

apollo-client