GraphQL lets you fetch only the fields you need, keeping network responses small and fast. However, if a result list has many elements, the response can still be large. To manage this, you need to use pagination.

Our GraphQL API uses cursor-based pagination with four parameters:

  • after: Get items after a specific cursor
  • before: Get items before a specific cursor
  • first: Get the first x items
  • last: Get the last x items

In your query, you can ask for pageInfo and pageData to get all the pagination details. Here’s an example that fetches the first item after a given cursor.

query {
  devices(query: {}, first: 1, after: "YXJyYXljb25uZWQwaW9uOjQ=") {
    page {
      edges {
        cursor
        node {
          id
          deviceName
          UUID
          pairingCode
          currentType
          currentAssetId
          currentPlaylistId
          localAppVersion
        }
      }
      pageInfo {
        hasNextPage
        startCursor
        endCursor
      }
    }
    pageData {
      limit
      offset
    }
  }
}

The response will include the data structure as shown:

{
  "data": {
    "devices": {
      "page": {
        "edges": [
          {
            "cursor": "YXJyYXljb25uZWQwaW9uOjU=",
            "node": {
              "id": "603b0673b16b4c0012c120a3",
              "deviceName": "Android_Auto",
              "UUID": "85308fe5-b5b1-488e-a75b-8a694814b86d",
              "pairingCode": "vpLtH2",
              "currentType": "Asset",
              "currentAssetId": "Z9vkZzbAkEFsnjjtg",
              "currentPlaylistId": null,
              "localAppVersion": "4.2.23"
            }
          }
        ],
        "pageInfo": {
          "hasNextPage": true,
          "startCursor": "YXJyYXljb25uZWQwaW9uOjU=",
          "endCursor": "YXJyYXljb25uZWQwaW9uOjU="
        }
      },
      "pageData": {
        "limit": 1,
        "offset": 0
      }
    }
  }
}