How to paginate or infinite scroll by number of items in firestore?

Question

Requirement

1. On start 20 items will be loaded.
2. When user scrolls to end, 20 more items will be loaded.

Problem Firestore Query has startAt() and endAt() methods which works on value of OrderBy field. I want something to work on index.

interface Product{
   price:number;
}

Suppose there are 100 products for 20$ and 30 products for 10$. First load can be fetched

query
.orderBy(price,desc)
.limitTo(20)

Now price of last item is 20$. To load next 20 results

query
.orderBy(price,desc)
.startAt(20$)
.limitTo(20)

It will return the same result.

Answer 1

You should "use a document snapshot to define the query cursor" as explained in the documentation here: https://firebase.google.com/docs/firestore/query-data/query-cursors#use_a_document_snapshot_to_define_the_query_cursor

Therefore you would do as follows:

var first = db.collection("....").orderBy("price", "desc").limit(20);

return first.get().then(function (documentSnapshots) {
  // Get the last visible document
  var lastVisible = documentSnapshots.docs[documentSnapshots.docs.length-1];
  console.log("last", lastVisible);

  // Construct a new query starting at this document,
  // Get the next 20 cities.
  var next = db.collection("....")
          .orderBy("price", "desc")
          .startAfter(lastVisible)
          .limit(20);
});