My angular application interacts with firebase firestore as the backend database.
I am working on a function to retrieve document snapshots from firestore in a generic way.
Here is the code snippet where I encounter an error:
/**
* Get a 'listener' observable that subscribes to live document updates in the firestore db
* @type the expected document type as interface
* @param docPath path to document collection in firestore
* @param docId id of document to get
* @returns An Obseravble<DocumentSnapShot<Type>>
*/
public watchDocument<T>(
docPath: string,
docId: string
): Observable<DocumentSnapshot<T>> {
const docRef = doc(this.firestore, docPath, docId) as DocumentReference<T>;
return fromEventPattern<DocumentSnapshot<T>>(
(handler) => onSnapshot<T>(docRef, handler),
(handler, unsubscribe) => unsubscribe()
);
}
I have also tried another version of the function:
public watchDocument<T>(
docPath: string,
docId: string
): Observable<DocumentSnapshot<T>> {
const docRef = doc(this.firestore, docPath, docId) as DocumentReference<T>;
return new Observable<DocumentSnapshot<T>>((subscriber) =>
onSnapshot<T>(docRef, subscriber.next, subscriber.error)
);
}
Both versions result in the following error when calling onSnapshot(docRef, handler):
TypeError: Cannot add property 0, object is not extensible
at Array.push (<anonymous>)
at ObserverProxy.subscribe...
This function is invoked from an NGRX effect. It works fine when called individually but fails when chained with other actions/effects.
EDIT: 1
I suspect that something is being frozen by NGRX. The firestore functions work seamlessly when used alone, but they fail after any firebase authentication functions like signInWithEmailAndPassword are executed.
QUESTION:
I need assistance in understanding why these errors occur when this function is combined with other actions.