CODEWITHSUNDEEP
javascriptangularrxjsangularfire2
dlwiest
dlwiest

Reputation: 655

Subscribing to an observable before it's been populated

I'm trying to create a user profile service for an Angular 4 project and struggling a little with how to properly initialize and update the observable Profile object. Currently, when the user authenticates (via Firebase), AuthService passes the user's auth info to UserProfileService via the latter's initialize() function. UserProfileService then looks up the user's profile (or creates one if none exists yet) and populates a public observable with the profile.

The problem I'm running into is with other parts of the application trying to subscribe to the profile observable before all this has happened. I'd originally been initializing the observable via ...

public profileObservable: UserProfile = null;

... which of course resulted in a "subscribe() does not exist on null" error, so I changed it to ...

public profileObservable: Observable<UserProfile> = Observable.of();

This at least doesn't throw any errors, but anything that subscribes to profileObservable before I've mapped the Firebase object to it never updates.

Complete code for user-profile.service.ts below. I'm still struggling to get my head around how some of this is meant to work, so hopefully someone can shed some light. Thanks!

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import { FirebaseListObservable, FirebaseObjectObservable, AngularFireDatabase } from 'angularfire2/database';
import * as firebase from 'firebase/app';

export class UserProfile {
    $exists: Function;
    display_name: string;
    created_at: Date;
}

@Injectable()
export class UserProfileService {
    private basePath: string = '/user-profiles';
    private profileRef: FirebaseObjectObservable<UserProfile>;
    public profileObservable: Observable<UserProfile> = Observable.of();

    constructor(private db: AngularFireDatabase) {
        // This subscription will never return anything
        this.profileObservable.subscribe(x => console.log(x));
    }

    initialize(auth) {
        this.profileRef = this.db.object(`${this.basePath}/${auth.uid}`);
        const subscription = this.profileRef.subscribe(profile => {
            if (!profile.$exists()) {
                this.profileRef.update({
                    display_name: auth.displayName || auth.email,
                    created_at: new Date().toString(),
                });
            } else subscription.unsubscribe();
        });

        this.profileObservable = this.profileRef.map(profile => profile);

        // This subscription will return the profile once it's retrieved (and any updates)
        this.profileObservable.subscribe(profile => console.log(profile));
    }
};

Upvotes: 2

Views: 2253

Answers (1)

Tamas Hegedus
Tamas Hegedus

Reputation: 29906

You must not change observable references once you constructed them. The way I found to properly decouple subscribers from the datasource is to use an intermediate Subject, which is both an observer and an observable.

Your code would look something like this:

import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';

...

export class UserProfileService {
    ...
    public profileObservable = new Subject<UserProfile>(); 

    constructor(private db: AngularFireDatabase) {
        // This subscription now works
        this.profileObservable.subscribe(x => console.log(x));
    }

    initialize(auth) {
        const profileRef = this.db.object(`${this.basePath}/${auth.uid}`);

        ...

        profileRef.subscribe(this.profileObservable);
    }
};

Upvotes: 4

Related Questions