Paging Through Products

There are a lot of products in the platform and for performance reasons we cannot download them all at once, but we can download them in batches, otherwise known as paging. The API uses a wellknown pattern for paging in GraphQL, you can read more on this here.

To load the first page, simply ask for the products.

query {
  products(first: 3) {
    pageInfo {
      endCursor
      hasNextPage
    }
    nodes {
      id
      name
    }
  }
}

null

{
  "data": {
    "products": {
      "pageInfo": {
        "endCursor": "Mw",
        "hasNextPage": true
      },
      "nodes": [
        {
          "id": "Product-KL6SM3M3ZO",
          "name": "Raybans Frame"
        },
        {
          "id": "Product-4R2SL9QBKL",
          "name": "Carrera Sunglasses Larger"
        },
        {
          "id": "Product-ZMYSB2EZY9E",
          "name": "Bioinfinity 6 Pack"
        }
      ]
    }
  }
}

You'll notice that we only show the first 3 products, to get the next page, we need to take the endCursor and pass it to the next call to products as the after argument.

query($page: String) {
  products(first: 3, after: $page) {
    pageInfo {
      endCursor
      hasNextPage
    }
    nodes {
      id
      name
    }
  }
}

{
  "page": "Mw"
}

{
  "data": {
    "products": {
      "pageInfo": {
        "endCursor": "Ng",
        "hasNextPage": true
      },
      "nodes": [
        {
          "id": "Product-E3JSVXLO2EE",
          "name": "Biotrue Oneday 30 pack"
        },
        {
          "id": "Product-9MBSD9B4XBY",
          "name": "Tommy Hilfiger Green Pilot S"
        },
        {
          "id": "Product-E3JSZ22XMOO",
          "name": "Carrera Sunglasses Brown"
        }
      ]
    }
  }
}

You can keep paging through the products until the hasNextPage field becomes false, at that point you've enumerated all the products.