RxJs Angular 7 HttpClient multiple POST with forkJoin remove second subscribe?

Question

I am creating a Work Item object with linked child Task objects. My function (createWorkItemAndChildren) takes two parameters, the workItem, and an array of Task objects. I want my function to return an array of all ids that are created (work item and tasks).

I have to have the parent ID back from one http POST call (workItemService.createWorkItem) before I can then create the child tasks which use another http POST method on the same service.

I now have the forkJoin in createChildWorkItems returning all of the child ids at once.

How do I refactor this so that there is only one subscribe, and to return the array with parent and child ids together?

  createChildWorkItems(parentId, tasks: Task[]): Observable<any> {
    return <Observable<number>> forkJoin(
      tasks.map(task => <Observable<number>> this.workItemService.createChildWorkItem(parentId, task))
    ).pipe(zip());

  }

  createWorkItemAndChildren(workItem, childTasksToSave: Task[]){
    var resultArray = [];
    this.workItemService.createWorkItem(workItem).subscribe(workItemId => {
      var parentId = workItemId;
      resultArray.push(parentId);
      if (parentId !== null){
        this.createChildWorkItems(parentId, childTasksToSave).subscribe((results: number) => {
          resultArray.push(results);
          this.tfsIdsCreated = resultArray;
        });
      }
    });
  }

score 2 · Answer 1 · answered May 03 '19 at 14:11

In your situation child is not good candidate for fork join. but here you should use Async /await. fork join send the request in Async manner but Async/await will wait response of each request when you get response attach that response to parent simple, in Async/await request will be in sequeance just like loop. when all request done, return that object here is link of asyn/await https://lavrton.com/javascript-loops-how-to-handle-async-await-6252dd3c795/

  createWorkItemAndChildTasks(workitem, childTasksToSave: Task[]): any {
    this.workItemService.createWorkItem(workitem).subscribe(workItemId => {
     var parentId = workItemId;
      if (parentId !== null ){
        this.tfsIdsCreated.push(parentId);

    // now create the children on the workItemForm.
    for (let child of childTasksToSave){
//use here Async await when you get response attach to parent 

     this.workItemService.createChildWorkItem(parentId, child).subscribe(task =>{
        if (task !== null){
          console.log(' createWorkItem received child taskid: ' + task);
          this.tfsIdsCreated.push(task);
        }
      });
    }
  }
  return this.tfsIdsCreated;
});

}

add async keyword to createWorkItemAndChildTasks try this .. async createWorkItemAndChildTasks(workitem, childTasksToSave: Task[]){ // for (let child of childTasksToSave){ const task = fetchChild(parentId, child); if (task !== null){ console.log(' createWorkItem received child taskid: ' + task); this.tfsIdsCreated.push(task); } } } async fetchChild(parentId, child){ const response = await this.workItemService.createChildWorkItem(parentId, child).toPromise(); return response; — Shahid Islam, May 03 '19 at 15:05

score 1 · Accepted Answer · answered May 03 '19 at 22:15

1

If you want to do subtasks in parallel — forkJoin is your choice.

Heres a rough example:

createParent().pipe(
  // switch from parent stream to forkJoin(...children)
  mergeMap(parent =>
    // wait for all children to be created
    forkJoin(children.map(child => createChild(parent, child))).pipe(
      // combine childResults with parent
      map(childResults => {
        // do operations with parent and all children
        parent.childResults = childResults;
        // switch back to parent
        return parent;
      })
    )
  )
)
.subscribe(parent => {
  // ...
})

Note how we subscribe to Observable only once — this is a good practice.

You don't need async await here.

Hope this helps

answered May 03 '19 at 22:15

kos

5,044
1
17
35

I appreciate the suggestion, but I am still having some issues understanding how to adapt my code to this. In your createParent() example code, is that returning an observable, or just a number? – Jennifer S May 06 '19 at 19:26
1

@JenniferS, `createParent()` should return Observable, similar to your `this.workItemService.createWorkItem`. Here, I've compiled a small example, closer to your code: [mergeMap with forkJoin](https://thinkrx.io/gist/382aab1cc645b933e23c800f784b09aa) – kos May 06 '19 at 19:47
1

Thanks for this extra effort to explain. But what is the rxObserver doing? – Jennifer S May 07 '19 at 14:56
@JenniferS It's a part of the chart API to render those marble diagrams. It implements [Observer](https://rxjs.dev/api/index/interface/Observer) interface, so you can substitute it with `x=>console.log(x)` if you want it to output to console instead. – kos May 07 '19 at 15:16
@JenniferS, glad to hear that :) GL – kos May 07 '19 at 21:05

score 1 · Answer 3 · answered May 03 '19 at 22:42

Create an array of observables and pass the reference into forkjoin

let observableBatch= [];

for (let child of childTasksToSave){
   observableBatch.push(this.workItemService.createChildWorkItem(parentId, child));
}

Observable.forkJoin(observableBatch).subscribe...;

reference: https://stackoverflow.com/a/35676917/6651984

score 1 · Answer 4 · answered May 07 '19 at 21:03

Here's what I ended up doing, which is why I accepted the answer from kos : My tfsIdsCreated array is subscribing to the result, which is providing the list of ids.

createParentAndKids(workItem, childTasksToSave){
    this.workItemService.createWorkItem(workItem).pipe(
      mergeMap(parentId => {
        if (parentId === null){
          return of([parentId]);
        }

        const childTaskObservables$ = childTasksToSave.map(
          child => this.workItemService.createChildWorkItem(parentId, child)
        );

        return forkJoin(childTaskObservables$).pipe(
          map(ids => [parentId, ...ids])
        );

      })
    ).subscribe(x => this.tfsIdsCreated.push(x));
  }

RxJs Angular 7 HttpClient multiple POST with forkJoin remove second subscribe?

4 Answers4