API
Querying Paginated Fields
In this tutorial, we will learn to handle cursor-paginated fields in the GraphQL schema.
Getting started
The easiest way to interact with the Twisp GraphQL API is to login to the Twisp Console and use the GraphiQL tool.
If you prefer to use your own GraphQL client, you can send authenticated requests to the Twisp API endpoint.
To seed your setup with some example accounts, sets, and tran codes, you can use the Example Setup.
1. Identify the connection field
Any field that resolves to a *Connection type uses cursor-based pagination.
This includes top-level queries like entries and transactions, as well as fields within object types like Account.balances.
2. Request edges and nodes
To fetch data in pages, request the edges in the connection field. Each edge represents a link to a data node and may contain additional information about the relationship. Within each edge, request the node field to retrieve the actual data object. Here's a sample query for fetching the first 10 items of a field called someConnection:
query {
someConnection(first: 10) {
edges {
node {
id
name
}
}
}
}
Connection types also contain a nodes field, which is just a way to more directly access the list of node objects in edges. It can be useful in cases where you don't need to query any other fields of the edge object.
3. Get the page info
Alongside the edges, request the pageInfo object, which contains information about pagination. pageInfo includes the fields hasNextPage, hasPreviousPage, startCursor, and endCursor. Add the pageInfo field to your query:
query {
someConnection(first: 10) {
edges {
node {
id
name
}
}
pageInfo {
hasNextPage
endCursor
}
}
}
4. Paginate using cursors
Cursors are opaque strings representing the position of an item in the list. Use the after argument in conjunction with the first argument to request the next set of n items after the endCursor:
query {
someConnection(first: 10, after: "<end-cursor>") {
edges {
node {
id
name
}
}
pageInfo {
hasNextPage
endCursor
}
}
}
Replace "<end-cursor>" with the actual endCursor value from the previous pageInfo.
5. Iterate through pages
Continue making requests using the updated endCursor until the hasNextPage field in pageInfo is false, indicating that there are no more pages to fetch.