When submitting a form, I need to call an API method multiple times using Angular's HttpClient. Each call adds a specific item into another entity, as our backend does not provide a batch-add method. Therefore, I have to make individual calls for each item the user inputs. The code snippet I am using involves lodash for data processing:
const items = ['foo', 'bar', 'baz', 'quux'];
const result$: Observable[] = _.map(items, it => httpClient.post('/items', it));
Initially, I attempted to combine these calls using forkJoin:
forkJoin(result$).subscribe(resp => ..., err => ...);
However, this approach uncovered a bug in the backend that caused errors when processing multiple items concurrently, but not when adding them individually. This seems to be a race condition.
To work around this issue, I experimented with using concat() to execute the requests in sequence:
concat(result$).subscribe(resp => ..., err => ...);
Unfortunately, this resulted in the subscription being triggered for each source observable, whereas I only want to be notified when all requests have completed (or failed.) How can I achieve the behavior of forkJoin, but with the source observables not being subscribed to concurrently?