Docs
Launch GraphOS Studio

Pagination in Apollo Client

Overview


enables you to fetch exactly the you need from your graph, with no unnecessary overhead. This helps keep network responses small and fast.

However, doesn't automatically guarantee small responses. This is especially apparent when you a that contains a list. A list can contain infinitely many elements, which can result in an enormous response from a seemingly small like this one:

query GetBookTitles {
books {
title
}
}

If your includes thousands or millions of books, this probably returns much more data than you need. To resolve this issue, can paginate their list .

When a client queries a paginated list , the server returns only a portion (or "page") of the list's elements. The client's includes that indicate which page the server should return:

GraphQL serverClient appGraphQL serverClient appquery GetBookTitles(offset=0 limit=20)Returns the first 20 list elementsquery GetBookTitles(offset=20 limit=10)Returns the next 10 list elements

This diagram shows offset-based pagination, in which a client requests a page based on an absolute index in the list (offset) and the maximum number of elements to return (limit).

There are many different pagination strategies a server can use for a particular list : offset-based, cursor-based, page-number-based, forwards, backwards, and so on. Each strategy requires a slightly different set of . Because these strategies can each be useful in different situations, neither Apollo nor the specification prescribes a canonical pagination strategy.

The Apollo Client approach

Instead of recommending a particular pagination strategy, provides flexible cache APIs that help you merge results from a paginated list , regardless of which pagination strategy your uses. And because you can represent these custom pagination strategies with stateless functions, you can reuse a single function for every list field that uses the same strategy.

Ready to start paginating? Start by learning about the Core pagination API.

Previous
Advanced topics
Next
Core API
Edit on GitHubEditForumsDiscord

© 2024 Apollo Graph Inc.

Privacy Policy

Company