How to Query Paginated Data in GraphQL

The Profile GraphQL API uses Relay-style cursor-based connections to support efficient and flexible querying of large lists like Transactions.

Relay-style connections are similar to basic cursor-based pagination, but have a slightly different response structure:

• count returns the total number of items in the list.
• edges returns an array of cursor and node objects, where each node is an item in the list.
• pageInfo returns an object containing pagination metadata, including startCursor,endCursor, hasPreviousPage and hasNextPage fields to help paginate subsequent queries.

Link to this section#Examples

Link to this section#Paginating a Profile's Transactions

We can construct a query to return the first page of the Profile's Transactions:

The response will return all Transaction nodes with cursors from ABC to DEF.

Now to get the next page, we repeat this query, setting the value of after to the ending cursor from the response: pageInfo.endCursor.

Once pageInfo.hasNextPage returns false, we've pulled down all the available transactions.

Link to this section#Using Pagination with React + Apollo

In this example, we use the React Apollo Client to create a TransactionsList React component that renders a paginated list of the user's transactions.

If you need smaller pages for your UI, add first to the query and set it to a value between 1 and 100.