Processing data in NgRx Effect with another API call through pipe

Question

I'm trying to process data returned from the first API call using NgRx effects.

  fetchPages$ = createEffect(() =>
    this._actions$.pipe(
      ofType(FETCH_PAGES),
      switchMap(() => this._confApi.getPages()
        .pipe(
          map(pages => {
            pages.forEach(page => {
              this._confApi.getPageVersion(page.url).pipe(map(version => page.version = version));
            });
            return pages;
          }),
          map(pages => SAVE_PAGES({pages}))
        )
      )
    )
  );

But in this case the API call in the first map isn't even called. I also tried this way:

  fetchPages$ = createEffect(() =>
    this._actions$.pipe(
      ofType(FETCH_PAGES),
      switchMap(() => this._confApi.getPages()
        .pipe(
          map(pages => {
            pages.forEach(page => {
              this._confApi.getPageVersion(page.url).subscribe(version => page.version = version);
            });
            return pages;
          }),
          map(pages => SAVE_PAGES({pages}))
        )
      )
    )
  );

And while it does the call, the value isn't added to page property (map to SAVE_PAGES doesn't actually wait).

What is the right way to approach this problem?

Wandrille Wandrille · Accepted Answer · 2019-11-05T18:47:51

You are missing the forkJoin to wait that all the getPageVersion oberservables are completed.

you want probably something like that

  fetchPages$ = createEffect(() =>
    this._actions$.pipe(
      ofType(FETCH_PAGES),
      switchMap(() => this._confApi.getPages()),
      switchMap(pages => {
        return forkJoin(pages.map(page => this._confApi.getPageVersion(page.url).pipe(
          map(version => ({ ...page, version }))
        )));
      }),
      map(pages => SAVE_PAGES({ pages }))
    )
  );

Processing data in NgRx Effect with another API call through pipe

1 Answers