Refresh/reload a Hot Observable sequence with RxJS

Question

I am working on a Portal in Angular 2. On login I make a request to the server to fetch the logged-in user profile. The method to fetch user profile returns an observable which is subscribed at 6 different places when the application loads.

If I used a cold observable, this would result in 6 API calls to the server. So i switched to a hot observable by adding .publishLast().refCount().

This resulted in a single request sharing the data since user profile doesn't update on subsequent requests.

The problem starts here:

Now I have an Edit Profile functionality which updates the user profile via an HTTP PUT and as a result of that, I would like to expire the previously subscribed Observables and somehow trigger the sequence again so API is executed again and the subscriptions receive updated data.

Is there some way I could restart/re-trigger an already subscribed observable sequence?

Here is the code for the fetch user observable

fetch(){
    this.userObservable = Observable.fromPromise(this.getToken())
      .switchMap(token => {
        let headers = new Headers();
        headers.append('Authorization', `Bearer ${token}`);
        return this.http.get('/api/v1/admin/users/me?includes=role', {headers: headers})
      })
      .map((res: Response) => {
        let retVal: any = {
          data: new Deserializer({
            keyForAttribute: 'camelCase'
          }).deserialize(res.json())
        };
        this.user = retVal.data as MpUser;
        this.user.role = MpRoles[retVal.data.role[0].name];
        return this.user;
      })
      .publishLast()
      .refCount();
  }

Sergey Sokolov · Answer 1 · 2017-01-10T09:26:54.483

5

You can try to introduce subject to trigger fetch:

private fetchTrigger = new BehaviorSubject(null);

triggerFetch() {
  this.fetchTrigger.next();
}

fetch() {
  this.userObservable = Observable
    .combineLatest(
      Observable.fromPromise(this.getToken()),
      this.fetchTrigger
    )
    .switchMap(([token]) => {
      ...
    })
    ...
    .publishLast()
    .refCount();
}

Note that in this sample token is retrieved only once. If you need to get new token on each refresh:

private fetchTrigger = new BehaviorSubject(null);

triggerFetch() {
  this.fetchTrigger.next();
}

fetch() {
  this.userObservable = this.fetchTrigger
    .switchMap(() => Observable.fromPromise(this.getToken()))
    .switchMap(token => {
      ...
    })
    ...
    .publishLast()
    .refCount();
}

edited Jan 10 '17 at 09:26

answered Jan 10 '17 at 08:45

Sergey Sokolov

2,709
20
31

I am afraid this would not work because the token is refreshed after a timeout. We are using Keycloak SSO for authentication. – Mohammad Umair Khan Jan 10 '17 at 09:03
@Mohammad Umair Khan, Check the answer – Sergey Sokolov Jan 10 '17 at 09:27
BehaviorSubject will return the initialized value upon the first subscription instead of waiting for the API call to finish. This is breaking the flow, I am trying with Subject but no luck yet. – Mohammad Umair Khan Jan 10 '17 at 11:14
@MohammadUmairKhan, You mean that `http.get` is not executed? – Sergey Sokolov Jan 10 '17 at 11:58
http.get will be executed but before it can finish, the BehaviorSubject will return the null value it was initialized with. – Mohammad Umair Khan Jan 10 '17 at 20:13
@MohammadUmairKhan, Something wrong here, BehaviorSubject can't 'return', it passes events to the next operator (namely switchMap). Can you reproduce this in plunker/jsfiddle/jsbin? – Sergey Sokolov Jan 10 '17 at 21:14
http://stackoverflow.com/questions/39494058/angular-2-behavior-subject-vs-observable – Mohammad Umair Khan Jan 11 '17 at 07:04

Refresh/reload a Hot Observable sequence with RxJS

1 Answers1