What's the usage of combining 'mergeMap' and 'of' in this code?

Question

I saw this line of code :

this.http.get(`/payments`).pipe(
      mergeMap((payments) => {
        return of(payments);
      }),
    );

is it as same as this (if so, why its written that way?):

this.http.get(`/payments`)

Answer 1

Let's see it in action

const httpCall = rxjs.of('payment');

httpCall.pipe(
  rxjs.operators.mergeMap(v => rxjs.of(v))
).subscribe(v => console.log(v));

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.3/rxjs.umd.js"></script>

So basically, it does nothing.

Answer 2

this.http.get(`/payments`).pipe(
      mergeMap((payments) => of(payments)),
);

For each, emitted value the mergeMap() operator creates a new observable of that value, and then the operator subscribes to that new observable. Each value emitted by that observable is forwarded to the subscriber until the inner observable completes.

This is repeated for each emitted value from the source observable.

There is no delay or multicasting taking place here since the of(payments) will emit the value in the same JavaScript call stack.

You can replace the mergeMap with a switchMap() and it would also have no effect.

The source code is most likely remnants of someone's attempt to debug or modify the values emitted, and since http.get() emits a single value it doesn't matter if you used mergeMap or switchMap in this case. The majority of people who use these operators with a HTTP call is to chain to another HTTP call.

If you need to chain to other HTTP calls, then take a look at my switchChain() operator that included in my observables library.

https://github.com/reactgular/observables

Answer 3

According to the documentation of RxJS:

This operator is best used when you wish to flatten an inner observable but want to manually control the number of inner subscriptions. For instance, when using switchMap each inner subscription is completed when the source emits, allowing only one active inner subscription. In contrast, mergeMap allows for multiple inner subscriptions to be active at a time. Because of this, one of the most common use-case for mergeMap is requests that should not be canceled, think writes rather than reads. Note that if order must be maintained concatMap is a better option.

This basically means that in case you have several subscriptions to this observable you will still have a single call to the API as these subscriptions are managed internally.

• In case of a single subscription there is no difference

Answer 4

There probably was some kind of request chaining like:

this.http.get(`/payments`).pipe(
  mergeMap(response => this.http.post(`/audit`, response.id)),
  map(secondResponse => {})
)

but eventually got changed to a single http call.

mergeMap or flatMap can be used to flatten the Observables (to convert an Observable of Observable to a single Observable)

So the answer is yes - changing to this.http.get('/payments') will not change the behavior at all.