/
Pagination with GraphQL

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:

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: