ionic with firestore getting entire collection using firebase 9

Issue

i am storing a list of urls with title and thumbnails in the firestore. I am using ionic 7 with firebase 9.22

i am using syntax like below for update

import { Firestore, collection, collectionData, doc, docData, addDoc, deleteDoc, setDoc, updateDoc, getDocs } from '@angular/fire/firestore';

 async updateUser(uid: string, payload: any) {
    const userDocRef = doc(this.firestore, 'users/' + uid );
    return setDoc(userDocRef, payload, { merge: true });
  }

I am trying to find the syntax for getting entire collection where collection name is "resources".

the ionic code currently is like below

 <ion-list *ngFor="let resource of resources">
      <ion-item (click)="openResource(resource.url)">
        <ion-thumbnail slot="start">
          <img [src]="resource.image" />
        </ion-thumbnail>
        <ion-label>{{resource.text}}</ion-label>
      </ion-item>
    </ion-list>

I need to populate resources from firestore collection. please advise.

Based on example

const citiesRef = db.collection('cities');
const snapshot = await citiesRef.get();
snapshot.forEach(doc => {
  console.log(doc.id, '=>', doc.data());
});

i am struggling to use it in my case as i am looking to use it like below

 const citiesRef = collection(this.firestore, 'cities');
    const snapshot = await citiesRef.get();
    snapshot.forEach((doc:any) => {
      console.log(doc.id, '=>', doc.data());
    });

but i see .get() is not valid on citiesRef

Solution

Your first code snippet is using the modular API, so you should also follow that example for getting all docs from a collection. From that link:

import { collection, getDocs } from "firebase/firestore";

const querySnapshot = await getDocs(collection(db, "cities"));
querySnapshot.forEach((doc) => {
  // doc.data() is never undefined for query doc snapshots
  console.log(doc.id, " => ", doc.data());
});

Answered By - Frank van Puffelen