Pagination and Cache

In this lesson, we will first learn how caching interacts with pagination and how we can fix our frontend. Then we will see what other options do we have when implementing pagination with GraphQL, as well as the pros and cons of different solutions.

Merging pagination requests

The issue that we had before is that our frontend was performing multiple requests fetching products bit by bit, but Apollo Client does not know how to merge these results together.

To specify how to merge products from multiple requests, we need to go back to the InMemoryCache configuration and configure a so-called typePolicies. It allows to provide additional configuration for how Apollo Client should treat certain fields, and among other things, it allows to specify how to merge objects from multiple requests.

To specify how to merge multiple requests, we need to provide the merge method in the cache configuration. This method receives three parameters:

• Existing products in the cache merged into a single list.
• Incoming products fetched with the latest request that should be merged into the existing list.
• Arguments that were passed to fetch the incoming objects.