在使用fetchMore获取更多数据时,Apollo客户端默认不会更新组件中的变量。为了更新变量,需要在fetchMore中使用updateQuery方法。下面是一个示例:
const { data, fetchMore } = useQuery(GET_POSTS, {
variables: { limit: 10, offset: 0 }
})
const loadMore = () => {
fetchMore({
variables: { offset: data.posts.length },
updateQuery: (prev, { fetchMoreResult }) => {
if (!fetchMoreResult) return prev
return {
posts: [...prev.posts, ...fetchMoreResult.posts]
}
}
})
}
在上面的示例中,我们从数据库中获取了10个帖子并将它们存储在变量“ data”中。当用户点击“加载更多”按钮时,我们会使用fetchMore从数据库中获取更多的帖子并将它们与前面的帖子组合在一起。我们已经定义了updateQuery函数,用于将新的帖子添加到已有的帖子列表中。这样,我们就可以通过更新变量来在组件中呈现更多的帖子。