Pagination with GraphQL
Pagination is a very important part of modern user interfaces. It's important to consider pagination for performance reasons if working with larger data sets.
There are multiple ways of implementing pagination, and this documentation highlights some approaches and how they can be implemented in GraphQL.
Pagination basics
This approach is based on the following resources:
- https://graphql.org/learn/pagination/
- https://slack.engineering/evolving-api-pagination-at-slack-1c1f644f8e12
- https://api.slack.com/docs/pagination
- https://simonkollross.de/posts/implementing-cursor-based-pagination-in-laravel
- https://www.sitepoint.com/paginating-real-time-data-cursor-based-pagination/
However, it more closely follows the approach taken by Slack. The official GraphQL documentation shows a very sophisticated example using edges and nodes, which we have deliberately not implemented. In most of our scenarios this complexity is not needed.
In web development, two main types of pagination are common:
- Offset-based pagination
- Cursor-based pagination
Offset-based pagination
This type is well known and the most widely used. One example in Totara is the pagination of reports: