在Apollo-react中,默认的pagination策略是提取更多数据,而不是仅网络,这可能会导致一些问题。下面是一个包含代码示例的解决方法:
import { ApolloClient, ApolloLink, InMemoryCache } from '@apollo/client';
import { concatPagination } from '@apollo/client/utilities';
const customPagination = concatPagination();
const client = new ApolloClient({
link: ApolloLink.from([
// your other links
customPagination,
]),
cache: new InMemoryCache(),
});
import { useQuery } from '@apollo/react-hooks';
import { gql } from '@apollo/client';
const GET_PAGINATED_DATA = gql`
query GetPaginatedData($cursor: String) {
paginatedData(cursor: $cursor) {
edges
pageInfo {
endCursor
hasNextPage
}
}
}
`;
function MyComponent() {
const { data, fetchMore } = useQuery(GET_PAGINATED_DATA, {
fetchPolicy: 'network-only',
});
// 获取下一页数据
const loadMoreData = () => {
fetchMore({
variables: {
cursor: data.paginatedData.pageInfo.endCursor,
},
updateQuery: (prev, { fetchMoreResult }) => {
if (!fetchMoreResult) return prev;
return {
paginatedData: {
__typename: prev.paginatedData.__typename,
edges: [...prev.paginatedData.edges, ...fetchMoreResult.paginatedData.edges],
pageInfo: fetchMoreResult.paginatedData.pageInfo,
},
};
},
});
};
return (
{data && data.paginatedData.edges.map((item) => (
{item.name}
))}
{data && data.paginatedData.pageInfo.hasNextPage && (
)}
);
}
在代码示例中,我们使用concatPagination
函数创建了一个自定义pagination策略,并将其添加到apollo client实例中。然后,在需要使用自定义pagination策略的组件中,我们使用useQuery
hook来获取数据,并将fetchPolicy设置为'network-only',以确保每次都从网络获取最新数据。
在加载更多数据时,我们使用fetchMore
方法来获取下一页数据,并在updateQuery
函数中更新缓存。这样,我们就可以使用自定义的pagination策略来控制数据的加载行为。