RxJS 6 switchMap Deprecated Symbol used

Question

I've updated from Angular 5 to Angular 6. Now I'm trying to update my code to make it compatible with RxJS 6.

.pipe(
  map(job => job[0]),
  switchMap((job) => {
    return job ? this.bookingService.findByID(job.property.id) : Observable.empty();
  }, (job: Job, bookings: Booking[]) => {
    this.mark_jobs_unavailable(job, bookings);
    return job;
  })
)

I'm getting warning on using switchMap that Deprecated Symbol is used.

These are my imports: import {map, switchMap} from 'rxjs/operators';

Is there any alternative way to use switchMap in v6? Also, If I don't change my code the rxjs-compat should make my existing code work (which i have installed) but I get the following error with the same code but in RxJS 5 style:

.map(job => job[0])
.switchMap((job) => {
    return job ? this.bookingService.findByID(job.property.id) : Observable.empty();
}, (job: Job, bookings: Booking[]) => {
    this.mark_jobs_unavailable(job, bookings);
    return job;
})

Error: Expected 1 argument but got 2.

Stillborn

Answer 1

The resultSelector function given as the second argument to switchMap is deprecated. You need to remove this and achieve the goal using map operator.

The trickiest part here is to decide where to put the map operator. Actually the map operator to go inside the body of the function provided as the argument of switchMap.

The code without the result selector function will be something like the following:

     .pipe(
          map(job => job[0]),
          switchMap((job) => {
            return (job ? this.bookingService.findByID(job.property.id) : Observable.empty()).pipe(

              // This is the mapping function provided as the alternative to the deprecated result selector function
              // This should be placed inside the body of the function which is the 1st (and only one) argument of switchMap
              map((bookings: Booking[])=>{
              this.mark_jobs_unavailable(job, bookings);
              return job;
            })

            );
          }     
         )
        )

Twum

But as you see I'm getting an other observable in switchMap and then calling a function based on both of the results. Isn't switchMap recommended for such situations? – Stillborn

Yes, but you have to do it within the first argument yourself; switchMap + map – Maines

Could you maybe provide an example? – Wendeline

I am also interested in that example. – Bertram

resultselectors are deprecated. Here is the migration doc from version 5 to 6. In most situations it seems like an inner map should be used instead. github.com/ReactiveX/rxjs/blob/master/docs_app/content/guide/v6/… – Bertram

If anyone are looking for the migration doc that @Bertram posted, it was deleted and can be found here: github.com/ReactiveX/rxjs/commit/… – Ani

Answer 2

.pipe(
  map(job => job[0]),
  switchMap((job) => {
    return job ? this.bookingService.findByID(job.property.id).pipe(
      map((bookings: Booking[]) => {
        return {
          job: job,
          bookings: bookings
        };
      })
    ) : Observable.empty();
  }
).subscribe((job, bookings: Booking[]) => {
  ...
})

Ishii

Answer 3

For those who, like me, had not immediately understand why I could not use these overloads:

Overloads with resultSelector can still be used, but the deprecation is a warning of future changes, therefore, they can be removed at the next version of RxJS.

Use the operator map instead like above.

Lenlena