reactjs - 使用 useLazyQuery Hook 调用查询时如何重新获取查询？

Question

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

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

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

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

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,
      },
    },
  });
}