问题描述:
当使用Apollo Client的fetchMore
方法从服务器获取更多数据时,缓存是正确更新的,但是从useQuery
返回的数据却没有更新。
解决方法:
在使用fetchMore
方法时,可以使用updateQuery
选项来手动更新缓存,并确保从useQuery
返回的数据也能正确更新。
下面是一个示例代码,演示了如何使用fetchMore
方法并手动更新缓存,以确保从useQuery
返回的数据也能正确更新:
import { useQuery } from '@apollo/client';
import { gql } from 'apollo-boost';
const GET_POSTS = gql`
query GetPosts($start: Int, $limit: Int) {
posts(start: $start, limit: $limit) {
id
title
content
}
}
`;
const PostList = () => {
const { loading, error, data, fetchMore } = useQuery(GET_POSTS, {
variables: { start: 0, limit: 10 },
});
const handleLoadMore = () => {
fetchMore({
variables: { start: data.posts.length, limit: 10 },
updateQuery: (prev, { fetchMoreResult }) => {
if (!fetchMoreResult) return prev;
return Object.assign({}, prev, {
posts: [...prev.posts, ...fetchMoreResult.posts],
});
},
});
};
if (loading) return Loading...
;
if (error) return Error: {error.message}
;
return (
{data.posts.map((post) => (
{post.title}
{post.content}
))}
);
};
export default PostList;
在上面的代码中,我们在fetchMore
方法的updateQuery
选项中手动更新了缓存。在updateQuery
回调函数中,我们将旧的prev
查询结果与新的fetchMoreResult
查询结果合并,以更新缓存数据。
这样做可以确保缓存和从useQuery
返回的数据都能正确更新,并且可以加载更多数据。