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.