How can i fix my pagination stuck in Ionic Firestore app?

Issue

Summary

i realy stack my overflow. Im trying to practice (Firebase and Ionic). Trying to make pagination on my page. I spent so many hours to try different things read a lot as you see in my code such as queryFn1, queryFn2, queryFn3 inputs in api.service is a solution that save the day. it needs ofc optimization, but im stuck with the logic how can i implement pagination here

Note

im not comfortable with rxjs and observables yet. In the sea, trying to learn swim actually. I cant append, push or directly console this data flowing.

Scope

combineWithLatest() method may fix my problem but how can i implement it But the thing is that im stuck and i dont know where i can start and continue.

AnyAdvise

I am open

Files

• api.service.ts connecting with firestore.
• chat.service.ts gives me to users collection
• page.ts is with getMoreItems, i am planning to get items 5 more.

This is my page.ts

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { ChatService } from 'src/app/services/chat/chat.service';

@Component({
  selector: 'app-community',
  templateUrl: './community.page.html',
  styleUrls: ['./community.page.scss'],
})
export class CommunityPage implements OnInit {

  users: Observable<any>;

  constructor(
    private chatService: ChatService
  ) { }

  ngOnInit() {
    this.getUsers(); // get all Community Users
  }

  getUsers() {
    this.chatService.getUsers();
    this.users = this.chatService.users;    
  }

  //
  //Infinit Scroll
  //

  private getMoreItems() {
    this.users.pipe().subscribe((users) => {
      let lastItem = users[users.length - 1];
      console.log('lastItem: ', lastItem);
      
      // get next 5 users
      this.chatService.getUsers(lastItem);
      this.users = this.chatService.users;
    });
  }

}

this is chat.service.ts

  public users: Observable<any>;

  constructor(
    public api: ApiService
  ) { }

  getId() {
    this.currentUserId = this.auth.getId()
  }

  getUsers(lastItem?) {
    // get the userId here 
    this.getId();

    if(!lastItem) {
      this.users = this.api.collectionDataQuery(
      //this.api.collectionDataQuery(
        'users',
        //this.api.whereQuery('uid', '!=', this.currentUserId),
        //this.api.orderByQuery('uid', 'desc'),
        this.api.orderByQuery('lastSeen', 'desc'),
        this.api.limitQuery(5)
      )
    } else {
      let x = this.api.collectionDataQuery(
        'users',
        //this.api.whereQuery('uid', '!=', this.currentUserId),
        //this.api.orderByQuery('uid', 'desc'),
        this.api.orderByQuery('lastSeen', 'desc'),
        this.api.startAfterQuery(lastItem),
        this.api.limitQuery(5)
      )
      //this.users.push(x);
    }
  }

this is api.service.ts

import { Firestore, OrderByDirection, addDoc, collection, collectionData, doc, docData, getDoc, getDocs, limit, orderBy, query, setDoc, startAfter, updateDoc, where } from '@angular/fire/firestore';

  collectionDataQuery(path, queryFn?, queryFn2?, queryFn3?) {
    let dataRef: any = this.collectionRef(path);
    
    // TODO: Here has to make logic better
    if(queryFn && queryFn2 && queryFn3) {
      console.log('queryFn && queryFn2 && queryFn3');
      const q = query(dataRef, queryFn, queryFn2, queryFn3);
      dataRef = q;
    } else if(queryFn && queryFn2) {
      const q = query(dataRef, queryFn, queryFn2);
      dataRef = q;
    } else if(queryFn) {
      const q = query(dataRef, queryFn);
      dataRef = q;
    }

    const collection_data = collectionData<any>(dataRef, {idField: 'id'});
    return collection_data;
  }

  whereQuery(fieldPath, condition, value) {
     return where(fieldPath, condition, value);
  }

  orderByQuery(fieldPath, directionStr: OrderByDirection = 'asc') {
    return orderBy(fieldPath, directionStr);
  }

  limitQuery(number) {
    return limit(number);
  }

  startAfterQuery(doc) {
    return startAfter(doc);
  }

Solution

Eventually i solved my problem. I decided not to use collectionData, i used getDocsas shown in firebase doc. And also i decided not to change observable variable public users: Observable<any>; to push to classic array users = [] simply.

Sharing my edited code blocks for any other users that may encounter same or similar ones.

This is my page.ts

constructor(
    private router: Router,
    private chatService: ChatService,
  ) { }

  ngOnInit() {
    this.getUsers(); // get all Community Users
  }

  getUsers() {
    this.loadUsers();
  }

  //
  //Infinite Scroll
  //

  loadMore(event) {
    this.loadUsers(event);
  }

  async loadUsers(infiniteScroll?) {
    if (!infiniteScroll) {
      const docSnap = await this.chatService.getUsers();
      this.users = docSnap.docs.map(doc => doc.data());

      // Get the last visible document
      let l = docSnap.docs[docSnap.docs.length-1];
      this.lastVisible = l || null;

    } else {
      // Use the query for pagination
      const nextDocSnap = await this.chatService.getMoreUsers(this.lastVisible);
      this.users.push(...nextDocSnap.docs.map(doc => doc.data()));

      // Get the last visible document
      let l = nextDocSnap.docs[nextDocSnap.docs.length-1];
      this.lastVisible = l || null;
      infiniteScroll.target.complete();
    }

  }

this is chat.service.ts

  constructor(
    public api: ApiService
  ) { }

  async getUsers() {
    return await this.api.getDocs(
      "users",
      this.api.orderByQuery("lastSeen", "desc"),
      this.api.limitQuery(5)
    )
  }

  async getMoreUsers(lastItem) {
    return await this.api.getDocs(
      "users",
      this.api.orderByQuery("lastSeen", "desc"),
      this.api.startAfterQuery(lastItem),
      this.api.limitQuery(5)
    )
  }

this is api.service.ts

import { Firestore, OrderByDirection, addDoc, collection, collectionData, doc, docData, getDoc, getDocs, limit, orderBy, query, setDoc, startAfter, updateDoc, where } from '@angular/fire/firestore';

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  constructor(
    private firestore: Firestore
  ) { }


  getDocs(path, queryFn?, queryFn2?, queryFn3?) {
    let dataRef: any = this.collectionRef(path);

    // TODO: Here has to make logic better
    if(queryFn && queryFn2 && queryFn3) {
      const q = query(dataRef, queryFn, queryFn2, queryFn3);
      dataRef = q;
    } else if(queryFn && queryFn2) {
      const q = query(dataRef, queryFn, queryFn2);
      dataRef = q;
    } else if(queryFn) {
      const q = query(dataRef, queryFn);
      dataRef = q;
    }
    return getDocs<any>(dataRef); //get()
  }

  whereQuery(fieldPath, condition, value) {
     return where(fieldPath, condition, value);
  }

  orderByQuery(fieldPath, directionStr: OrderByDirection = 'asc') {
    return orderBy(fieldPath, directionStr);
  }

  limitQuery(number) {
    return limit(number);
  }

  startAfterQuery(doc) {
    return startAfter(doc);
  }
}

Answered By - behicsakar