该问题通常是由于在使用useQuery时未正确配置分页选项而导致的。可以使用Apollo Client提供的paginationField选项来解决此问题。
例如,假设我们有一个查询名为GET_POSTS,它返回一些帖子及其相应的分页信息。我们可以使用以下示例代码来解决此问题:
import { useQuery } from '@apollo/client';
const GET_POSTS = gql`
query GetPosts($cursor: String) {
posts(first: 10, after: $cursor) {
pageInfo {
endCursor
hasNextPage
}
nodes {
id
title
content
author
}
}
}
`;
const PostsList = () => {
const { data, fetchMore } = useQuery(GET_POSTS, {
variables: { cursor: null },
paginationField: 'posts',
});
const handleLoadMore = () => {
fetchMore({
variables: { cursor: data.posts.pageInfo.endCursor },
updateQuery: (prevResult, { fetchMoreResult }) => {
if (!fetchMoreResult) return prevResult;
return {
posts: {
...fetchMoreResult.posts,
nodes: [...prevResult.posts.nodes, ...fetchMoreResult.posts.nodes],
},
};
},
});
};
return (
{data.posts.nodes.map((post) => (
))}
{data.posts.pageInfo.hasNextPage && (
)}
);
};
在上述示例中,我们向useQuery提供paginationField选项,并设置为返回查询结果的分页字段名,即'posts'。然后,在fetchMore调用中,我们使用endCursor变量来获取下一页的内容。同时,在updateQuery函数中,我们将新的查询结果合并到原查询结果中。
这样,我们就可以解决Apollo客户端useQuery在每次fetchMore调