How to use forkJoin and mergeMap in Angular resolver to chain HTTP requests?

Question

I am building a resolver that is used when my app loads initially. I need to run several HTTP requests, which can be run at the same time (hence using forkJoin). But there are a few that need to be chained once the forkJoin is completed. What would be the best way to accomplish this? I tried using mergeMap as follows:

  resolve(): Observable<any> {
return forkJoin([
  this.dataService.getUser(),
  this.dataService.getSummary()
]).mergeMap((data) => {
  return this.dataService.listDetails(data[1]);
});

}

However, I get the following error:

    ERROR Error: Uncaught (in promise): TypeError: (0 , rxjs__WEBPACK_IMPORTED_MODULE_1__.forkJoin)(...).mergeMap is not a function
TypeError: (0 , rxjs__WEBPACK_IMPORTED_MODULE_1__.forkJoin)(...).mergeMap is not a function

Timothy L Gillespie · Accepted Answer · 2022-08-23 18:32:40Z

1

mergeMap is an operator. These need to be used inside the pipe method:

  resolve(): Observable<any> {
    return forkJoin([
      this.dataService.getUser(),
      this.dataService.getSummary()
    ]).pipe(mergeMap((data) => {
      return this.dataService.listDetails(data[1]);
    }));
  }

edited Aug 23, 2022 at 18:32

answered Aug 23, 2022 at 18:22

Timothy L Gillespie

4603 silver badges9 bronze badges

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

3 Comments

ts1993 Over a year ago

I seem to be getting closer, however, I am unable to access the data returned by the first two requests in the forkJoin. I am accessing data via this.route.snapshot.data, but it only seems to include data from the last request. Any ideas?

Timothy L Gillespie Over a year ago

I don't think I can answer that question with the given information. this.route.snapshot.data seems entirely unrelated to the Observable. Perhaps your issue is right there?

ts1993 Over a year ago

That is how I am accessing the data from the resolver, in the component in which I am routing to. The resolve method above is located in the InitialResolver, which is referenced in the route below. In BaseComponent, I am trying to access the data from the resolver. ` {path: "", component: BaseComponent, resolve: { data: InitialResolver }, },`

Collectives™ on Stack Overflow

How to use forkJoin and mergeMap in Angular resolver to chain HTTP requests?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related