CODEWITHSUNDEEP
angularngrxngrx-effects
no use for a name
no use for a name

Reputation: 658

Processing data in NgRx Effect with another API call through pipe

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?

Upvotes: 0

Views: 667

Answers (1)

Wandrille
Wandrille

Reputation: 6821

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 }))
    )
  );

Upvotes: 1

Related Questions