Pagination

The GraphQL Storefront API uses cursor-based pagination to efficiently navigate large lists of data. This approach allows you to fetch results in chunks and move forward or backward through result sets with precision.

How Cursor-Based Pagination Works

When querying lists (such as products, orders, or customers), you can use the following arguments:

• first: Number of items to return from the start of the list.
• after: Returns items after the specified cursor.
• last: Number of items to return from the end of the list.
• before: Returns items before the specified cursor.

Each item in the result set is wrapped in an edge object, which contains the node (the actual item) and a cursor string. The pageInfo object provides metadata about the current page, including:

• hasNextPage: Indicates if more results are available after the current page.
• hasPreviousPage: Indicates if there are results before the current page.
• startCursor and endCursor: Cursors for the first and last items in the current page.

Example Query

query {
  products(first: 10, after: "cursor") {
    edges {
      node {
        id
        name
      }
      cursor
    }
    pageInfo {
      hasNextPage
      hasPreviousPage
      startCursor
      endCursor
    }
  }
}

Paginating Through Results

• To fetch the next page, use the endCursor from the previous response as the after argument.
• To fetch the previous page, use the startCursor as the before argument with the last parameter.
• Always check hasNextPage and hasPreviousPage to determine if more data is available in either direction.