What's the best way to paginate and filters large set of data in Firebase?

Question

I have a large Firestore collection with 10,000 documents.

I want to show these documents in a table by paging and filtering the results at 25 at a time.

My idea, to limit the "reads" (and therefore the costs), was to request only 25 documents at a time (using the 'limit' method), and to load the next 25 documents at the page change.

But there's a problem. In order to show the number of pages I have to know the total number of documents and I would be forced to query all the documents to find that number.

I could opt for an infinite scroll, but even in this case I would never know the total number of results that my filter has found.

Another option would be to request all documents at the beginning and then paging and filtering using the client.

so, what is the best way to show data in this type of situation by optimizing performance and costs?

Thanks!

Answer 1

You will find in the Firestore documentation a page dedicated to Paginating data with query cursors.

I paste here the example which "combines query cursors with the limit() method".

var first = db.collection("cities")
        .orderBy("population")
        .limit(25);

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 25 cities.
  var next = db.collection("cities")
          .orderBy("population")
          .startAfter(lastVisible)
          .limit(25);
});

---

If you opt for an infinite scroll, you can easily know if you have reached the end of the collection by looking at the value of documentSnapshots.size. If it is under 25 (the value used in the example), you know that you have reached the end of the collection.

---

If you want to show the total number of documents in the collection you should use an aggregation query.