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

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

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

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

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

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

【问题讨论】：

标签： reactjs apollo apollo-client

【解决方案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,
      },
    },
  });
}

【讨论】：