There is a pagination example on the https://www.apollographql.com/docs/react/pagination/offset-based/.
Given there is a peace of code:
const { loading, data, fetchMore } = useQuery(FEED_QUERY, {
variables: {
offset: 0,
limit: 10,
},
});
...
const loadNextPage = useCallback(() => {
return fetchMore({
variables: {
offset: data.feed.length,
},
});
}, []);
...
<button onClick={loadNextPage}>Load more</button>;
- When the component renders first time, the client makes the first page call as expected and 1 network call to the GraphQL endpoing is performed.
- When I click the "Load more" button, the client makes 2 network calls: 1 for the first page data; 2 for the next 10 feeds.
- If I click the "Load more" next time, I'll get the same situation as before — 2 network calls are performed (1 for the first page - 10 feeds, and 2 for the next 10 feeds).
I cannot get what is wrong with my configuration and why it calls the first page every time. It is unnecesarry.
There is some picularity there. The fetchPolicy
is set to 'network-only'
in the defaultOptions
configuration of the ApolloClient
:
query: {
fetchPolicy: 'network-only'
}