mergeMap – RxJS Reference

mergeMap

Q: How do I use mergeMap to make multiple HTTP requests in RxJS?

Pass each URL to mergeMap() and return the request observable from the projection function, such as fromFetch(url). mergeMap() subscribes to every inner observable concurrently, so all requests start without waiting for the previous one. Each response is emitted as soon as it arrives, so responses may come back in a different order than the URLs were listed.

Q: What is the difference between mergeMap and mergeAll in RxJS?

mergeAll() only flattens an observable of observables, while mergeMap() first maps each source value to an inner observable and then flattens the result. In other words, mergeMap() is essentially map() combined with merge(). Use mergeMap() when your source emits plain values, such as URL strings, that need to become observables.

Q: Does mergeMap preserve the order of emitted values in RxJS?

No, mergeMap() does not preserve the order of source values. It emits values from every inner observable as they are produced, so the resulting sequence depends on timing. Choose it only when you are interested in all values from multiple streams as if one stream produced them, and not in the order they arrive.

Q: When does mergeMap complete and how does it handle errors?

The observer receives the complete notification only after every inner observable has completed, so the source completing alone does not end the stream. If any source observable throws an error, the error notification is sent to the observer. Plan for both cases when you subscribe to a set of requests or streams.

Q: What does flattening mean in mergeMap?

Flattening means mergeMap() takes the inner observables returned by its projection function and emits all their values through one resulting stream, instead of leaving you with an observable of observables. Each value is passed down as soon as any inner observable produces it, so the consumer receives a single flat sequence.

mergeMap operator is basically a combination of two operators – merge and map. The map part lets you map a value from a source observable to an observable stream. Those streams are often referred to as inner streams. The merge part than works like mergeAll – it combines all inner observable streams returned from the map and concurrently emits all values from every input stream.

As values from any combined sequence are produced, those values are emitted as part of the resulting sequence. Such process is often referred to as flattening in documentation.

Use this operator if you’re not concerned with the order of emissions and is simply interested in all values coming out from multiple combined streams as if they were produced by one stream.

The operator works in the following way:

Subscribe to a source observable
When a new value arrives from a source observable, execute a map function that returns an inner observable
Subscribe to this inner observable
When this inner observable emits a value, pass it down to an observer
Only after all inner observables complete, send the complete notification to the observer.
If any of the source observables throws an error, send the error notification to the observer.

Usage

This operator is mostly used when you need to map a plain value to an observable. A common use case is mapping URL strings into HTTP requests.

Here’s an example of using mergeMap to do exactly this:

const urls = [
   'https://api.mocki.io/v1/0350b5d5',
   'https://api.mocki.io/v1/ce5f60e2'
];

from(urls).pipe(
   mergeMap((url) => {
       return fromFetch(url);
   })
).subscribe((response) => console.log(response.status));

Playground

Additional resources

Official documentation

Frequently asked questions

How do I use mergeMap to make multiple HTTP requests in RxJS?

Pass each URL to mergeMap() and return the request observable from the projection function, such as fromFetch(url). mergeMap() subscribes to every inner observable concurrently, so all requests start without waiting for the previous one. Each response is emitted as soon as it arrives, so responses may come back in a different order than the URLs were listed.

What is the difference between mergeMap and mergeAll in RxJS?

mergeAll() only flattens an observable of observables, while mergeMap() first maps each source value to an inner observable and then flattens the result. In other words, mergeMap() is essentially map() combined with merge(). Use mergeMap() when your source emits plain values, such as URL strings, that need to become observables.

Does mergeMap preserve the order of emitted values in RxJS?

No, mergeMap() does not preserve the order of source values. It emits values from every inner observable as they are produced, so the resulting sequence depends on timing. Choose it only when you are interested in all values from multiple streams as if one stream produced them, and not in the order they arrive.

When does mergeMap complete and how does it handle errors?

The observer receives the complete notification only after every inner observable has completed, so the source completing alone does not end the stream. If any source observable throws an error, the error notification is sent to the observer. Plan for both cases when you subscribe to a set of requests or streams.

What does flattening mean in mergeMap?

Flattening means mergeMap() takes the inner observables returned by its projection function and emits all their values through one resulting stream, instead of leaving you with an observable of observables. Each value is passed down as soon as any inner observable produces it, so the consumer receives a single flat sequence.

Share this post