Angular route resolver rxjs

Question

My requirement is to have a user switch accounts when they click on a specific link. To fully switch accounts, I need to call two cold http observables and then load the data. The order does matter for all three requests.

First switchAccount$
Second updateSession$

Then I just need to get the pageData$ cold observable. I am currently using a resolver, but having difficulties structuring this with rxjs. I only care about the final page data in my component but I just need to make sure the user switches accounts and the session is updated or the backend api call will fail to get the page data.

I have tried to do the following but it is not working:

resolve(route): Observable<any> {
    const switchAccount$ = this.userService.switch('account2').pipe(last());
    const updateSession$ = this.userService.updateSesh();
    const pageData$ = this.pageService.getData();
    const switchAndUpdate$ = updateSession$.pipe(skipUntil(switchAccount$));


    return pageData$.pipe(skipUntil(switchAndUpdate$.pipe(last()); // problem is that switch account and page data get cancelled somehow??

}

what's switchDealer$? It's never declared.

mickaelw
– mickaelw

2019-01-03 20:01:27 +00:00
Commented Jan 3, 2019 at 20:01 — mickaelw
– mickaelw, Commented Jan 3, 2019 at 20:01
should be switchAccount$ sorry

Mike.Alvarez
– Mike.Alvarez

2019-01-03 20:02:39 +00:00
Commented Jan 3, 2019 at 20:02 — Mike.Alvarez
– Mike.Alvarez, Commented Jan 3, 2019 at 20:02

mickaelw · Accepted Answer · 2019-01-03 20:22:42Z

1

You can combine observable:

resolve(route): Observable<any> {
    const switchAccount$ = this.userService.switch('account2'); // I think last is not helpful
    const updateSession$ = this.userService.updateSesh();
    const pageData$ = this.pageService.getData();

    return switchAccount$.pipe(
         switchMap(() => updateSession$), // Or I think with margeMap works too
         switchMap(() => pageData$),
         catchError(error => of(error))
    )
}

edited Jan 3, 2019 at 20:22

answered Jan 3, 2019 at 20:12

mickaelw

1,5132 gold badges14 silver badges28 bronze badges

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

Comments

Ingo Bürk · Accepted Answer · 2019-01-03 20:12:02Z

1

You can use switchMap for this:

return obs1$.pipe(
    switchMap(() => obs2$),
    switchMap(() => obs3$),
)

answered Jan 3, 2019 at 20:12

Ingo Bürk

20.2k7 gold badges72 silver badges103 bronze badges

Collectives™ on Stack Overflow

Angular route resolver rxjs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related