How to paginate to previous page using AngularFire, Firestore and Firebase

Question

Sorry I have seen this question has been asked many times in different ways here such as:

• Howto paginate back to previous pages in a Angular(6) and firebase Firestore setup
• How to paginate Firestore dataset by individual page?

But NONE of the answers really explain the solution or are understandable.

Also I went though many tutorials such as:

• https://howtofirebase.com/firebase-data-structures-pagination-96c16ffdb5ca
• https://rexrainbow.github.io/phaser3-rex-notes/docs/site/firebase-firestore/#paginate

To details:

So here is what I have done so far

let query = ref.orderBy(orderBy, asc ? 'asc' : 'desc').limit(limit);
        if (startAfter) {
          // Thiis works as it should
          query = query.startAfter(startAfter);
        }
        if (endBefore) {
          // This here does not work or give the correct results. I get the first page. 
          query = query.endBefore(endBefore);
        }
        return query;

So:

query = query.startAfter(startAfter); works as expected.

However:

query = query.endBefore(endBefore) does not end before that document I think it ends up to the limit.

Answer 1

As of firebase@7.3.0 you can use the Query.limitToLast(n: number) method - makes it much easier to move backward with paginated data.

Your implementation details might look something like this:

function nextPage(last) {
   return ref.orderBy('age').startAfter(last.age).limit(3);
}

function prevPage(first) {
   return ref.orderBy('age').endBefore(first.age).limitToLast(3);
}