Home > database >  How to use forkjoin to return combined responses of two independent API calls in Angular
How to use forkjoin to return combined responses of two independent API calls in Angular

Time:04-20

I have two independent api calls. Below is the code for two api calls:

public getLendingType(partyId: string): Observable<{ lendingType: string, partyId: string }> {
    return this.customerRepositoryService.getCustomer(partyId).pipe(
        map((customer: ICustomer) => {
          return { lendingType: customer.LendingType, partyId: partyId } ;
        })
      );
  }

  private getPartyType(partyId: string): Observable<{ partyType: string}> {
    return this.partyRepositoryService.getParty(partyId).pipe(
      map((party: IParty) => {
        return  { partyType: party.PartyType };
      })
    );
  }

As you can see both api call is independent from each other. At this point I want to use forkjoin to combine their responses and return the combined result. This is where I got stuck. The code I have written for this part is below:

  public getPartyTypeAndLendingType(partyId: string): Observable<{ partyType: string, lendingType: string, partyId: string }> {

        return forkJoin([this.getLendingType(partyId), this.getPartyType(partyId)]).subscribe ( result => {
            return { partyType: result[1].partyType, lendingType: result[0].lendingType, partyId: result[0].partyId }
        })
  }

but I think I am missing something for which still I am getting compiler error like the image below:

enter image description here

and hovering over the compiler error it showing below messages:

Type 'Subscription' is missing the following properties from type 'Observable<{ partyType: string; lendingType: string; partyId: string; }>': source, operator, lift, subscribe, and 3 more.ts(2740

How to achieve this and make this piece of code working?

CodePudding user response:

Because you are calling .subscribe() your function returns a Subscription instead of an Observable.

To transform the result of the API calls use a .pipe() with map(). This way your function will return an Observable.

return forkJoin([
    this.getLendingType(partyId), 
    this.getPartyType(partyId)
]).pipe(
  map(result => 
    ({ partyType: result[1].partyType, lendingType: result[0].lendingType, partyId: result[0].partyId })     
  )
)

CodePudding user response:

You are having an error because at the method signature, you are saying that you will return an Observable but what you are returning instead is a Subscription. There is an easy fix, you were really close though :)

public getPartyTypeAndLendingType(partyId: string): Observable<{ partyType: string, lendingType: string, partyId: string }> {
  const lendingType = this.getLendingType(partyId);
  const partyType = this.getPartyType(partyId);

  return forkJoin([lendingType, partyType]).pipe(
    map(result => ({
      partyType: result[1].partyType,
      lendingType: result[0].lendingType,
      partyId: result[0].partyId
    }))
  );
}

Instead of subscribing within the method (which is fine for some purposes, really depends on your needs), we are now using the map operator to map the response. Now the subscription part, should be done by the caller.

  • Related