Question

我有一个供稿列表组件，并且在它上方有一个搜索输入。这两个组件都使用useLazyQuery挂钩。 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,
      },
    },
  });
}

使用useLazyQuery挂钩调用查询时，如何refetchQueries？

1 个答案: