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.
Apollo lets you do pagination with a function called
fetchMore, which provided on the
data prop by the
graphql HOC. 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.
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.
Here is an example with numbered pages taken from GitHunt:
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
updateQuery 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.
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.
const moreComments = gql`