Why does concat RxJS operator emit Observables rather than values when concatenating multiple HttpClient calls in Angular

Question

I am attempting to make several HTTP requests in response to a click on an "Update All" button. My code looks like this:

let new_items:Observable<ApiResponse<ShoppingListItem>>[] = this.items
      .map(item => new ShoppingListItem(...))
      .map(item => this.shoppingListService.updateItem(item));


concat(new_items).subscribe(
  r => console.log(r);
);

this.shoppingListService.updateItem returns the Observable generated by calling httpClient.put.

When this code is run, I expect to see the value printed by console.log(r) to be of the type produced by the updateItem method. Instead, it's an Observable. My server logs indicate that no HTTP request was made. This seems to indicate that it wasn't subscribed to. My understanding of the concat docs is that each individual Observable passed to concat will be subscribed in sequence when the Observable before it completes.

If I replace concat with forkJoin I get the result I was expecting. I don't particularly care about order, so I am fine using forkJoin but I want to understand why using concat didn't work.

Interesting. It works as you expect if you spread the array concat(...new_items). It might be a bug with rxjs or a bug with their documentation :-). It sounds like it should allow an array as input, but I see what you've mentioned, that the subscription gets Observable not the emitted type. StackBlitz — BizzyBob
@BizzyBob That does seem to be the issue. Adding the spread operator changed the behavior to what I expected: concat(...new_items).subscribe() outputs the responses from the HTTP requests. Write this up as an answer and I'll accept it. — ryanmcfall

martin martin · Accepted Answer · 2020-12-24T13:01:14

What you're seeing is a little confusing but it's the expected behavior of concat() and forkJoin().

forkJoin() works with both array of Observables and expanded Observables as individual arguments:

forkJoin(obs1, obs2, obs3)
// or
forkJoin([obs1, obs2, obs3])

But with concat it's different. It only expects source Observables (or ObservableInput) as individual arguments like the following:

concat(obs1, obs2, obs3)

But if you pass an array like concat([obs1, obs2, obs3]) it takes the array as an ObservableInput and just iterates its items which is not what you want.

Why does concat RxJS operator emit Observables rather than values when concatenating multiple HttpClient calls in Angular

2 Answers