Sometimes, you will have one or more views in your application where you need to display a list that contains too much data to be either fetched or displayed at once. Pagination is the most common solution to this problem, and Apollo Client has built-in functionality that makes it quite easy to do.
There are basically two ways of fetching paginated data: numbered pages, and cursors. There are also two ways for displaying paginated data: discrete pages, and infinite scrolling. For a more in-depth explanation of the difference and when you might want to use one vs. the other, we recommend that you read our blog post on the subject: Understanding Pagination.
In this article, we'll cover the technical details of using Apollo to implement both approaches.
Offset based pagination - also called numbered pages - is a very common pattern, found on many websites, because it is usually the easiest to implement on the backend. In SQL for example, numbered pages can easily be generated by using OFFSET and LIMIT.
Apollo Client provides an
offsetLimitPagination helper function that you can use to generate a field policy for every relevant list field.
This example uses
offsetLimitPagination to generate a field policy for
Apollo lets you do pagination with a method called
fetchMore. You need to specify what query and variables to use for the update, and how to merge the new query result with the existing data on the client. How exactly you do that will determine what kind of pagination you are implementing.
Here is an example with numbered pages taken from here:
As you can see,
fetchMore is accessible through the
In the example above,
fetchMore is a function which calls
fetchMore with the length of the current feed as a variable. Whenever you don't pass a query argument to
fetchMore, fetch more will use the original
query again with new variables. Once the new data is returned from the server, the
merge function is used to merge it with the existing data, which will cause a re-render of your UI component.
In the example above, the
fetchMore function is called from the UI component:
One downside of pagination with numbered pages or offsets is that an item can be skipped or returned twice when items are inserted into or removed from the list at the same time. That can be avoided with cursor-based pagination.
If a paginated field accepts arguments besides
limit, you might need to specify the key arguments that indicate whether two result sets belong to the same list or different lists.
keyArgs for the field policy generated by
offsetLimitPagination, provide an array of argument names to the function as a parameter:
In cursor-based pagination a cursor is used to keep track of where in the data set the next items should be fetched from. Sometimes the cursor can be quite simple and just refer to the ID of the last object fetched, but in some cases - for example lists sorted according to some criteria - the cursor needs to encode the sorting criteria in addition to the ID of the last object fetched. Cursor-based pagination isn't all that different from offset-based pagination, but instead of using an absolute offset, it points to the last object fetched and contains information about the sort order used. Because it doesn't use an absolute offset, it is more suitable for frequently changing datasets than offset-based pagination.
In the example below, we use a
fetchMore query to continuously load new comments, which then appear at the top. The cursor to be used in the
fetchMore query is provided in the initial server response, and has to be updated whenever more data is fetched.
InMemoryCache field policy API allows for any conceivable style of pagination, even though some of the simpler approaches have known drawbacks. Apollo Client comes with a support for Cursor Connections Specification.
You can check an example on Stackblitz.
Whenever you need to consume a Relay pagination API using Apollo Client,
relayStylePagination is a great tool to try first, even if you end up copy/pasting its code and making changes to suit your specific needs.