使用 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 后清除数据 obj
将 fetchPolicy 设置为“standby”时无法调用 client.watchQuery - 从 useLazyQuery 加载页面时引发错误