SwitchMap not working as intended in Angular

Question

I have a search service returning results, if the user submits twice, only the last search should return results.

I have the following code in a service, view (updated elsewhere) has all the post body info needed for the request.

This method is called from elsewhere in the code using this.searchService.getResults()

getResults() {
    const view: SearchView = this.getCurrentSearch();
    if (!view.query || view.query === '') {
      return;
    }

    this.checkPermissions(view).subscribe(searchView => {
     //do some stuff
     this.cacheService
       .cachedPost(this.url, searchView, () => {
        return this.http.post(this.url, searchView);
      })
      .switchMap(res => this.pageTransform(res))
      .subscribe(
        // results here
      );
   });
}

`

From running tests I can see that if I fire 3 searches in quick succession, they all resolve, whereas I only want the last to.

Answer 1

That's because you're calling the method getResults() multiple times which creates multiple Rx chains and all of them are processed. If you want switchMap to work correctly you need to keep a reference to only one chain and push values to it:

private search$ = new Subject();

private searchSubscription = search$
  .switchMap(view => this.checkPermissions(view)
    .concatMap(searchView => this.cacheService.cachedPost(this.url, searchView, () => {
      return this.http.post(this.url, searchView);
    })
    .concatMap(res => this.pageTransform(res))
  )
  .subscribe(...);

getResults() {
  const view: SearchView = this.getCurrentSearch();

  ...

  this.search$.next(view);
}

I didn't test this code for obvious reasons but I think you'll get the point. Also don't forget to unsubscribe in ngOnDestroy() with this.searchSubscription.unsubscribe() .