Angular resolve with nested API Calls

Question

The procedure of below code is to fetch email id from an api and resolve with details of that email id. I am in need to return the details directly as a response instead of needing to subscribe since I have just have this.route.snapshot.data.value assigned to a component and it takes data rightaway. Is there a way to achieve it? Please favour. I haven't written nested ones previously in resolve so , please guide. I just gave a try as below but it doesn't satisfy the need.

  resolve() {


        let info = environment.DETAIL_URL;

        return this.appService.getInfo(info).pipe(map((res) => {
            let user: any = res;
            console.log(res);
            let params: any = {};
            params.personID = user.emailID;
            return this.appService.getDataFromParams(environment.DATA_URL, params).pipe(map((res) => {
                return res;
            }))
        }))
    }

What is the purpose of .pipe(map((res) => { return res; }))? It does absolutely nothing. — mbojko
– mbojko, Commented Jul 4, 2020 at 11:26
originally i do a modification on the response object and return. — Gayathri
– Gayathri, Commented Jul 4, 2020 at 11:27

Jeff Mercado · Accepted Answer · 2020-07-04 11:11:27Z

1

Use switchMap() instead of map().

return this.appService.getInfo(info).pipe(
    switchMap(user =>
        this.appService.getDataFromParams(environment.DATA_URL, {
            personID: user.emailID
        })
    )
})

answered Jul 4, 2020 at 11:11

Jeff Mercado

136k34 gold badges268 silver badges282 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

D Pro · Accepted Answer · 2020-07-04 11:13:30Z

0

use mergeMap or switchMap instead of map to return data from the inner observable. there's also exhaustMap and concatMap, in case you want to know them all - they all have different behavior

  resolve() {


        let info = environment.DETAIL_URL;

        return this.appService.getInfo(info).pipe(mergeMap((res) => {
            let user: any = res;
            console.log(res);
            let params: any = {};
            params.personID = user.emailID;
            return this.appService.getDataFromParams(environment.DATA_URL, params).pipe(map((res) => {
                return res;
            }))
        }))
    }

answered Jul 4, 2020 at 11:13

D Pro

1,7961 gold badge10 silver badges15 bronze badges

4 Comments

Gayathri Over a year ago

I actually tried this. for some reason, getInfo gives response in console but getDatafromparams didn't even happen. getDatafromparams internally runs a query and i don't see it hit in console. and response of route.snapshot.data.user be a blank array [ ] .

D Pro Over a year ago

it is supposed to work. if it doesn't, the problem is elsewhere. please share more code. maybe there's something wrong with getDataFromParams? does it receive proper arguments? add some logging to check or debug

Gayathri Over a year ago

I did a silly mistake hitting a wrong url . and yea, using mergeMap on top works. Thanks for that. Just asking, how'll the same work if 3 API calls are involved like API 1 gives result 1 which is used in API 2 to give result 2 which is inturn used in API 3 and the third API result alone need to be resulted?

D Pro Over a year ago

it works the same: api1.pipe( switchMap(res1 => api2(res1)), switchMap(res2 => api3(res2)), ).subscribe(res3 => do your stuff)

Collectives™ on Stack Overflow

Angular resolve with nested API Calls

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related