Skip to main content

Paginate data

At Wino, we use cursor-based pagination. This feature follows the Relay specification and explanations can be found here: Pagination and edges.

To make things simple, a Cursor is a almost like a pointer in the array of data (edges), and every element of an array (edge) has it's own cursor that you can point at and ask (give me X items after this cursor or before this cursor).

Examples#

Just starting#

Let's say that we have 30 stockActivities and start by asking for the first 10 elements:

query {
stockActivities(first: 10) {
pageInfo {
# A pointer to the first element in the results (edges)
startCursor
# A pointer to the last element in the results (edges)
endCursor
# Whether or not you have more elements that you can query
# in this case it will be true.
hasNextPage
# Whether or not you have elements before this result
# in this case it will be false
hasPreviousPage
}
# The total number of elements that you can query.
# in this case it will be 30
totalCount
edges {
# A pointer to each element
cursor
# the data of an element
node {
id
}
}
}
}

What if we want the next 10 elements ?#

We already know the pointer (cursor) of the last element in the array of results, so we can simply ask for the first 10 elements after that pointer

query {
stockActivities(
# We use the result of pageInfo.endCursor
# to point at the last element
after: $endCursor,
first: 10,
) {
pageInfo {
startCursor
endCursor
hasNextPage
# This time this will be true, because we have some data
# before this result
hasPreviousPage
}
totalCount
edges {
cursor
node {
id
}
}
}
}

What if we want the previous 10 elements ?#

We already know the pointer (cursor) of the first element in the array of results, so we can simply ask for the last 10 elements before that pointer

query {
stockActivities(
# We use the result of pageInfo.startCursor
# to point at the first element
before: $startCursor,
last: 10,
) {
pageInfo {
startCursor
endCursor
hasNextPage
# This time this will be false
# because we are back to the first page
hasPreviousPage
}
totalCount
edges {
cursor
node {
id
}
}
}
}

Conclusion#

You can use first last before after to navigate however you want in the data, and it gives you precise results based on your choice.

  • You can ask for the first 2 elements after the 5th element in the current result
query {
entity(
after: $currentResult.edges[4].cursor,
first: 2,
) {
...
edges {
cursor
node {
id
...
}
}
}
}
  • You can ask for the last 5 elements before the 2nd element in the current result
query {
entity(
before: $currentResult.edges[1].cursor,
last: 5,
) {
...
edges {
cursor
node {
id
...
}
}
}
}