Apollo-client: How to use together: cache-and-network fetchPolicy + pagination

[alamothe]

Hello,
In my app I have a use case for both fetchPolicy="cache-and-network" and pagination at the same time.

What I discovered is that out-of-the-box it doesn't mix. Pagination works, but once the query is refetched (e.g. user navigates to the same screen again), the whole result is overwritten by the newest page alone.

I'm wondering:

• Your thoughts about the possible approach to make this work.
• Is it even possible, in terms of which knobs would one need to press, to do this with Apollo? For
  example, does Query component with "cache-and-network"support passing a function to merge query results (existing from cache + new).

Thank you

[pl12133]

See https://github.com/apollographql/apollo-client/issues/1680 which is stale but has no resolution.

Demonstration with refetch: https://codesandbox.io/s/yw5qrm5o8z

~So far I have solved using refetch but not solved refetching caused by the component re-mounting with fetchPolicy: 'cache-and-network'.~

[danilobuerger]

Issues here are reserved for bugs, but one of the following resources should help:

• Apollo's Slack: https://www.apollographql.com/slack
• StackOverflow (apollo-client tag): https://stackoverflow.com/questions/tagged/apollo-client
• Apollo Feature Request repo: https://github.com/apollographql/apollo-feature-requests

[pl12133]

I believe this goes beyond a usage question. I'm asserting that refetching all items of a paginated list is not currently possible for apollo-client to do in a sane way without adding a lot of additional plumbing. Please see the above reproduction.

This question was asked again on Slack this morning in the react-apollo room.

There is an unanswered StackOverflow How to fetch an entire paginated list / refetch the entire paginated list?

There are no answers on duplicate #1680.

To add to the confusion, if you try to use refetch with a different limit, you encounter https://github.com/apollographql/apollo-client/issues/2285.

I appreciate that the Apollo bug tracker gets a lot of usage questions, but I consider this a genuine issue for Apollo that should be addressed in core or in the docs.

[pl12133]

The best approach I could come up with is to track the limit manually: https://codesandbox.io/s/o5k2pl52xy

I'm not sure if that is something that should be recommended or if the updated limit should be considered automatically by cache-and-network and refetch. Maybe as part of fetchMore the query can update it's own limit using a property like updateLimit?