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
        ...
      }
    }
  }
}