Sending Observables from linked API requests with concatMap

Question

Sending Observables from linked API requests with concatMap

Using Angular 9 service class, I'm leveraging RxJS's concatMap to chain multiple HTTP calls. This involves passing the output of the first call as input to the second:

getUserDetails(authorisationCode: string): Observable<UserInfo> {

this.getAuthorisationTokens(authorisationCode)
  .pipe(
    concatMap(authorisationTokens =>  this.getUserInfo(authorisationTokens.access_token)))
    .subscribe(
      (data: UserInfo) => {
        this.userInfo = data;
        console.log(JSON.stringify(this.userInfo));
        console.log(JSON.stringify(data));
      },
      (err: any) => console.log('Error getting user info details : ' + err),
      () => {
        console.log('Got user information: ' + this.userInfo);
      }
    );

return of(this.userInfo);
}

To return this.userInfo to a caller, my initial approach was to wrap it in an Observable (return of(this.userInfo)) and use it like this:

export class LandingComponent implements OnInit {

  username: string;
  userFirstName: string;
  email: string;


  constructor(private route: ActivatedRoute, private userService: UserDataService) {
    this.authorisationCode = route.snapshot.queryParamMap.get('code');
    console.log('Code was ' + this.authorisationCode);
  }

  ngOnInit(): void {

    this.userService.getUserDetails(this.authorisationCode)
      .subscribe((data: UserInfo) => {
        this.userFirstName = data.given_name;
        this.username = data.preferred_username;
        this.email = data.email;

        console.log('Got: ' + this.userFirstName + ', ' + this.username + ', ' + this.email);
      });

  }
}

Upon checking the browser console, I noticed that the service calls are successful in populating this.userInfo, but only after encountering an undefined error when attempting to use it:

Code was 2ffa40f9-5e71-4f29-8ddd-318e8d0b99bc
main-es2015.8df8d853b157ca70b40a.js:1 Getting authorisation tokens in exchange for authorisation code 2ffa40f9-5e71-4f29-8ddd-318e8d0b99bc
main-es2015.8df8d853b157ca70b40a.js:1 Header: [object Object]
main-es2015.8df8d853b157ca70b40a.js:1 Body: grant_type=authorization_code&redirect_uri=https://xxx/landing/&client_id=xxx&code=2ffa40f9-5e71-4f29-8ddd-318e8d0b99bc&client_secret=xxx
main-es2015.8df8d853b157ca70b40a.js:1 TOKEN endpoint: https://xxx.amazoncognito.com/oauth2/token

TOKEN endpoint: https://xxx.amazoncognito.com/oauth2/token
main-es2015.8df8d853b157ca70b40a.js:1 ERROR TypeError: Cannot read property 'given_name' of undefined

    ...

USERINFO endpoint https://xxx.amazoncognito.com/oauth2/userInfo
main-es2015.8df8d853b157ca70b40a.js:1 USERINFO endpoint https://xxx.amazoncognito.com/oauth2/userInfo
main-es2015.8df8d853b157ca70b40a.js:1 {"sub":"4bfd88a4-5439-4ad6-a399-71b02034dfa1","email_verified":"true","given_name":"Craig","family_name":"Caulfield","email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="89eafbe8e0eea7eae8fce5efe0ece5edc9f1f1f1a7eae6e4">[email protected]</a>","username":"4bfd88a4-5439-4ad6-a399-xxx"}
main-es2015.8df8d853b157ca70b40a.js:1 Got user information: [object Object]

I've explored various solutions without success. Is there anything obvious that I might have overlooked?

angular typescript rxjs

Answer 1

Answer №1

It is possible that you are getting a undefined value because the assignment of this.userInfo happens asynchronously. One way to handle this correctly is by returning the HTTP observable and subscribing to it in the controller.

I have also made changes to extract the authorisationCode from the constructor to the ngOnInit() hook. Although the ngOnInit() hook usually runs after the constructor, there is no guarantee that the variable this.authorisationCode will have a value when the hook is triggered.

You can try the following:

Service

getUserDetails(authorisationCode: string): Observable<any> {
  return this.getAuthorisationTokens(authorisationCode)
    .pipe(
      concatMap(authorisationTokens =>  this.getUserInfo(authorisationTokens.access_token))
    );
}

Controller

constructor(private route: ActivatedRoute, private userService: UserDataService) { }

ngOnInit(): void {
  const authorisationCode = route.snapshot.queryParamMap.get('code');
  this.userService.getUserDetails(authorisationCode).subscribe(
    (data: UserInfo) => {
      this.userFirstName = data.given_name;
      this.username = data.preferred_username;
      this.email = data.email;

      console.log('Got: ' + this.userFirstName + ', ' + this.username + ', ' + this.email);
    },
    (err: any) => { console.log('Error getting user info details : ' + err) },
    () => { console.log('Got user information: ' + data); }
  );
}

Answer 2

It is possible that you are getting a undefined value because the assignment of this.userInfo happens asynchronously. One way to handle this correctly is by returning the HTTP observable and subscribing to it in the controller.

I have also made changes to extract the authorisationCode from the constructor to the ngOnInit() hook. Although the ngOnInit() hook usually runs after the constructor, there is no guarantee that the variable this.authorisationCode will have a value when the hook is triggered.

You can try the following:

Service

getUserDetails(authorisationCode: string): Observable<any> {
  return this.getAuthorisationTokens(authorisationCode)
    .pipe(
      concatMap(authorisationTokens =>  this.getUserInfo(authorisationTokens.access_token))
    );
}

Controller

constructor(private route: ActivatedRoute, private userService: UserDataService) { }

ngOnInit(): void {
  const authorisationCode = route.snapshot.queryParamMap.get('code');
  this.userService.getUserDetails(authorisationCode).subscribe(
    (data: UserInfo) => {
      this.userFirstName = data.given_name;
      this.username = data.preferred_username;
      this.email = data.email;

      console.log('Got: ' + this.userFirstName + ', ' + this.username + ', ' + this.email);
    },
    (err: any) => { console.log('Error getting user info details : ' + err) },
    () => { console.log('Got user information: ' + data); }
  );
}

Answer 3

Answer №2

Initially, the this.UserInfo value is undefined when accessed through the observable. To handle this, one option is to wait for the API response or skip the first emitted value using the operator skip(1) on the observable created by of(this.userInfo). A more efficient approach would be to trigger the user observable only after the API call is completed. This can be achieved by creating a subject that signals completion of the API and then generating the observable from this subject instead of directly returning of(this.userInfo) (e.g.: using the operation userToObservable()).

Answer 4

Initially, the this.UserInfo value is undefined when accessed through the observable. To handle this, one option is to wait for the API response or skip the first emitted value using the operator skip(1) on the observable created by of(this.userInfo). A more efficient approach would be to trigger the user observable only after the API call is completed. This can be achieved by creating a subject that signals completion of the API and then generating the observable from this subject instead of directly returning of(this.userInfo) (e.g.: using the operation userToObservable()).

Sending Observables from linked API requests with concatMap

Answer №1

Answer №2

Similar questions

storing information in localStorage using react-big-calendar

Dynamically attach rows to a table in Angular by triggering a TypeScript method with a button click

Fade in and out effect for popups on Leaflet markers

AADSTS9002326: Token redemption across origins is only allowed for the client type of 'Single-Page Application'. Origin of request: 'capacitor://localhost'

What is the method for including word boundaries in a regex constructor?

Having trouble with combining two formgroups using concat in an Angular application

What is the best way to implement bypassSecurityTrustResourceUrl for all elements within an array?

Accurate TS declaration for combining fields into one mapping

Are there any methods within Angular 2 to perform Angular binding within a string?

Testing the NestJS service with a real database comparison

Guide on integrating external libraries with Angular CLI

Exploring the power of Vue CLI service in conjunction with TypeScript

Angular2 is designed to break down complex applications into smaller, more manageable parts

The Angular 14 HTTP requests are being made twice

Modules failing to load in the System JS framework

Issue with Radio Button Value Submission in Angular 6 and Laravel 5.5

Encountering a Typescript issue with the updated Apollo server version within a NestJS application

Is it possible to utilize a mat-checkbox in place of a mat-label?

Storing the selected value from dynamically generated options in Angular using ngFor

An issue arises in Slate.js when attempting to insert a new node within a specified region, triggering an error