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:
countreturns the total number of items in the list.
edgesreturns an array of
nodeobjects, where each
nodeis an item in the list.
pageInforeturns an object containing pagination metadata, including
hasNextPagefields 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
Mw. To get the next page, we repeat this query setting the value of
after to the value of
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.