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 ofcursor
andnode
objects, where eachnode
is an item in the list.pageInfo
returns an object containing pagination metadata, includingstartCursor
,endCursor
,hasPreviousPage
andhasNextPage
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.