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
andendCursor
: 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 theafter
argument. - To fetch the previous page, use the
startCursor
as thebefore
argument with thelast
parameter. - Always check
hasNextPage
andhasPreviousPage
to determine if more data is available in either direction.
Last updated on