How to get real-time updates with Firebase Firestore using @capacitor-firebase/firestore?

[anthonyjuarezsolis]

Problem Description:

I am using FirebaseFirestore in the following way in my application:

import { FirebaseFirestore } from '@capacitor-firebase/firestore';

getAllFromSubcollection(
  subcollectionName: string,
): Promise<GetCollectionGroupResult<I_SubscriptionOld>> {
  return FirebaseFirestore.getCollection({
    reference: `${this.userDocRef}/${subcollectionName}`,
  });
}

And I consume it like this in a component:

async getSubsListValue() {
  this.stateService.isShowLoadingSubsSignal.set(true);

  try {
    this.subsChanges$ = await this.firebaseCrudService.getAllFromSubcollection(
      'itemSubscription',
    );
    console.log('this.subsChanges$?.snapshots', this.subsChanges$.snapshots);

    this.processSubscriptions(this.subsChanges$?.snapshots);
  } catch (error) {
    alert('Error al obtener suscripciones: ' + JSON.stringify(error));
  } finally {
    this.stateService.isShowLoadingSubsSignal.set(false);
  }
}

The problem:
Using this approach, I don't get real-time updates like I would with AngularFire snapshotChanges. I would like to get a similar behavior, where the collection subscriptions are reactive and automatically update the data when it changes in Firebase.

Could anyone help me with an example or recommendation to achieve this using @capacitor-firebase/firestore?

[robingenz]

Thank you for your request. You just need to add a snapshot listener using one of the following methods:

• addDocumentSnapshotListener(...)
• addCollectionSnapshotListener(...)
• addCollectionGroupSnapshotListener(...)

Here is an example from the Usage section:

const addDocumentSnapshotListener = async () => {
  const callbackId = await FirebaseFirestore.addDocumentSnapshotListener(
    {
      reference: 'users/Aorq09lkt1ynbR7xhTUx',
    },
    (event, error) => {
      if (error) {
        console.error(error);
      } else {
        console.log(event);
      }
    }
  );
  return callbackId;
};