RxJS forkJoin piped observables

Question

I need to make a number of calls to the server to save some data, and each subsequent call requires some data from the result of the previous call. Tried to use forkJoin, but the sequence of events does not makes sense (at least to me). I figure the problem is with the.pipe() call where I'm trying to modify the input data for the next call.

So I have two questions:

1. Why is the output not what I expected
2. Is there a way to make this work using forkJoin (I realize there are a dozen other ways of approaching this problem, so not really looking for an alternative solution)

Here's some sample code, or StackBlitz .

  let data: { [key: string]: any } = {};

  forkJoin(
      this.saveFirst(data).pipe(
        tap(_ => console.log('saveFirst pipe after')),
        tap(result => data.id = result.id)
      ),
      this.saveSecond(data).pipe(
        tap(_ => console.log('saveSecond pipe after')),
        tap(result => data.name = result.name)
      ),
  ).subscribe(result => console.log('done: data - ', JSON.stringify(data)));

...

  private saveFirst(data: { [key: string]: any }): Observable<any> {
      console.log('saveFirst: start');
      console.log('saveFirst: data - ', JSON.stringify(data));

      // replaced call to server with "of({ id: 1 })" for simplicity of example
      return of({ id: 1 }).pipe(tap(_ => console.log('saveFirst: end')));
  }

  private saveSecond(data: { [key: string]: any }): Observable<any> {
      console.log('saveSecond: start');
      console.log('saveSecond: data - ', JSON.stringify(data));

      // replaced call to server with "of({ name: 'test' })" for simplicity of example
      return of({ name: 'test' }).pipe(tap(_ => console.log('saveSecond: end')));;
  }

I was expecting the following output:

saveFirst: start
saveFirst: data -  {}
saveFirst: end
saveFirst pipe after

saveSecond: start
saveSecond: data - {}
saveSecond: end
saveSecond pipe after

done: data -  {"id":1,"name":"test"}

But instead got this:

saveFirst: start
saveFirst: data -  {}
saveSecond: start
saveSecond: data -  {}

saveFirst: end
saveFirst pipe after
saveSecond: end
saveSecond pipe after

done: data -  {"id":1,"name":"test"}

Answer 1

You need to use mergeMap / switchMap in this case.

this.saveFirst(data).pipe(
          tap(_ => this.actions.push('saveFirst pipe after')),
          tap(result => data.id = result.id),
          switchMap((res)=>{
            return this.saveSecond(data).pipe(
          tap(_ => this.actions.push('saveSecond pipe after')),
          tap(result => data.name = result.name)
        );
          })).subscribe(result => this.actions.push('done: data - ' + JSON.stringify(data)));

The above code will produce the result you need. forkJoin is used when we want to issue multiple requests and only care about the final result.

Forked Stackblitz .

Answer 2

If order of execution is important, you need to use concatMap instead of forkjoin

this.saveFirst(data).concatMap(() => this.saveSecond(data)).subscribe()

https://www.learnrxjs.io/learn-rxjs/operators/transformation/concatmap which mentions using concatMap when order is important.

Answer 3

I've been struggled with the same issue, the only solution I found is without piping the observables, but handle all responses after subscribing the forjoin.

It will run both tasks in parallel , and not sequently like above solutions. I moved your handling from 'tap' to new handling methods, and called them once forkJoin subscription finished.

yourMethod()
{
    let data: { [key: string]: any } = {};

    forkJoin(
        this.saveFirst(data),
        this.saveSecond(data)
    ).subscribe(([res1, res2]) =>
    {
        this.handleSuccess_1(res1, data);
        this.handleSuccess_2(res2, data);
        console.log('done: data - ', JSON.stringify(data));
    });
}

handleSuccess_1(res, data)
{
    console.log('saveFirst pipe after');
    data.id = res.id;
}

handleSuccess_2(res, data)
{
    console.log('saveSecond pipe after');
    data.name = res.name;
}