Are observables the right solution for requests that depend on data from one another?

user_2716300 0
Viewed 62

I have two APIs that I need to integrate against. One I control, another I do not.

Currently, I have a web app that needs to get user data from both APIs and combine them. This happens once when the user logs in.

The web app is built with Angular and so has Observables built-in, but I'm not very good at observables, they feel very complex for what should be a simple use case.

I have code below that makes a request to an identity provider, grabs a value from that provider and queries my API for a user with that same value, it then loads data on that user, and a related entity so that it can be displayed in the web app.

Essentially, I need to render a combined view of the user, and their parent company. I can only access the company via hypermedia link off the user, and can't know the user without first looking them up in the identity provider. The chain of data I need to make all of these requests is auth details => user details => company - I look up the auth details, use a value from that to look up the user, and having gotten the user, then I look up the user's company.

The function I have written feels clumsy and naive. Is there a better way to do this with RxJS?

getUserData() {
        this.authService.getUser$()
            .pipe(take(1))
            .subscribe(
                profile => {
                    this.authProfile = profile;
                    this.getUserByAuthId(encodeURI(profile.sub))
                        .pipe(take(1))
                        .subscribe(user => {

                            this.userProfile = user;

                            if (user._links.employer) {
                                this.http.get<Company>(user._links.employer.href)
                                    .pipe(take(1))
                                    .subscribe(
                                        company => {
                                            this.company = company;
                                        }
                                    );
                            }
                });
            });
    }
rxjs angular
3 Answers
user_16462400

Yes, nested subscribes are not good because they cause callback hell and are not cancellable.

You need to leverage switchMap in these type of situations. SwitchMap allows you to switch to a new observable conditionally.

Try:

import { of } from 'rxjs';
import { switchMap } from 'rxjs/operators';
......
getUserData() {
  this.authService.getUser$().pipe(
    take(1),
    switchMap(profile => {
      this.authProfile = profile;
      return this.getUserByAuthId(encodeURI(profile.sub)),
    }),
    take(1),
    switchMap(user => {
      this.userProfile = user;
      if (user._links.employer) {
        return this.http.get<Company>(user._links.employer.href);
      } else {
        return of(undefined);
      }
    }),
  ).subscribe(company => {
    // assign either undefined to company or the value of the previous HTTP call
    this.company = company;
  });
}
user_73654610

For readability I prefer async await:

getUserData() {
    this.authProfile = await this.authService.getUser$()
            .pipe(take(1)).toPromise();
    this.userProfile = await this.getUserByAuthId(encodeURI(this.authProfile.sub))
            .pipe(take(1)).toPromise();
    if (this.userProfile._links.employer) {
        this.company = this.http.get<Company>(this.userProfile._links.employer.href)
                .pipe(take(1)).toPromise();
    }
}
user_75398980
Related