Firebase - How to paginate using RxJS - the final peace

Issue

I saw this post: Cloud Firestore - How to paginate data with RXJS

This is exactly what I need but I don't understand how to reproduce the

import { UsersService } from '../../../shared/services/users.service';

I just need to understand what is inside this service because I can't make a function work like both getUsers() and loadMoreData(). I'm learning the new MODULAR approach on AngularFire and the answer above is the one I need to understand to properly implement pagination.

What I had done so far:

import {
  collection,
  collectionData,
  Firestore,
  limit,
  orderBy,
  query,
  startAfter
} from "@angular/fire/firestore";


querySnapshot:any;
lastInResponse:any;


  constructor( private stringEmitted: StringBridgeService, private firestore: Firestore ) {
  }

  ngOnInit(): void {
    this.stringEmitted.stringChanged(this.actualTitle);
    this.loadCustomers('customers', 'name', 5)
  }


  loadCustomers(collectionName:string, order:string, max:number) {
    return collectionData(query(collection(this.firestore, collectionName), orderBy(order), limit(max))).subscribe(
      response => {
        // @ts-ignore
        this.lastInResponse = response[response.length - 1];
        this.querySnapshot = response;
      }
    );
  }

  loadMore(data:object) {
    return collectionData(query(collection(this.firestore, 'customers'), orderBy('name'), limit(5), startAfter(data))).subscribe(
      response => {
        // @ts-ignore
        this.lastInResponse = response[response.length - 1];
        this.querySnapshot = this.querySnapshot.concat(response);
      }
    );
  }

  myTest() {
    console.log(this.lastInResponse);
  }

I only have ONE problem with this code ERROR FirebaseError: Function startAfter() called with invalid data. The function myTest() writes the correct data from the last customer to the console but still the error appears.

What is the right type of data? How could I convert?

Any help will be greatly appreciated! Thanks!

Solution

I managed to find the solution!

import {
  collection,
  collectionData,
  Firestore,
  limit,
  orderBy,
  query,
  startAfter
} from "@angular/fire/firestore";


querySnapshot:any;
lastInResponse:any;


  constructor( private stringEmitted: StringBridgeService, private firestore: Firestore ) {
  }

  ngOnInit(): void {
    this.stringEmitted.stringChanged(this.actualTitle);
    this.loadCustomers('customers', 'name', 5)
  }


  loadCustomers(collectionName:string, order:string, max:number) {
    return collectionData(query(collection(this.firestore, collectionName), orderBy(order), limit(max))).subscribe(
      response => {
        this.lastInResponse = response[response.length - 1];
        this.querySnapshot = response;
      }
    );
  }

  loadMore(data:any) {
    if(this.lastInResponse){
      return collectionData(query(collection(this.firestore, 'customers'), orderBy('name'), limit(3), startAfter(data['name']))).subscribe(
        response => {
          this.lastInResponse = response[response.length - 1];
          this.querySnapshot = this.querySnapshot.concat(response);
          // this.querySnapshot = response;
        }
      );
    }
    return null
  }

  myTest() {
    console.log(this.lastInResponse);
  }

startAfter() requires, in my case, the last name on my list. The true modular approach was used here.

Thank you all!

Answered By - Telmon