1

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.
EluciusFTW
  • 2,565
  • 6
  • 42
  • 59

0 Answers0