Skip to Content

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.
Last updated on