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#Paginating a Profile's Transactions

We can construct a query to return a paginated list of the Profile's Transactions:

Link to this section#Variables

Link to this section#Response

The response will return all Transaction nodes with cursors from MQ to Mw. To get the next page, we repeat this query setting the value of after to the value of pageInfo.endCursor.

Once pageInfo.hasNextPage returns false, we've completed 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.