As we all know there were breaking changes to the angularFire api in version 5. For example, in my data service I previously had a methods like this:
getBookings(): Observable<Booking[]> {
return this.db.list('bookings');
}
update(booking: Booking): void {
this.db.object('bookings/' + this.getFireBaseKey(booking)).update(booking);
}
private getFireBaseKey(b: Booking): string {
return (<any>b).$key;
}
Now, after upgrading to angularFire5 I have the following issue: As I want all firebase-related stuff to be encapsulated in my service and not leak to the rest of the application I want to expose rxjs Observables from the service. Hence I either have to add a call to valueChanges()
in the getBookings()
- but then I loose the $key
(which I need in the update later), or to snapshotChanges()
where I map it as follows:
getBookings(): Observable<Booking[]> {
return this.db.list<Booking>('bookings')
.snapshotChanges()
.map(changes =>
changes.map(c => ({ key: c.payload.key, ...c.payload.val() }))
);
}
The latter (kinda) requires me to extend my Booking model by a key property, and I can adjust my getKey
method accordingly.
But now the awkward part comes: Updating the booking will lead to a weird data structure in the Firebase db with the key present as 'list-key' and as key property on the 'list-object'.
What is the recommended way? I see two options, both of which are not really satisfactory to me:
- Delete the property from the
Booking
instance before updating - Not add it ot the Booking model? Then we have an untyped property and 'magic' leaking to the application outside the service.