Custom RxJS operator to prevent duplicate API calls in Angular

Question

I have a usecase where I want to prevent unexpected duplicate Http calls. I'm wondering if I can have a custom operator which can be used in pipe for any API as shown in below example 1. Even better if I can use this operator in Angular's HTTP_INTERCEPTOR as shown in example 2.

Code for customer operator

class RxJsUtils {
  private static readonly inProgress = new Map<string, Observable<unknown>>();

  static shareDuplicate<T>(indentifier: string): MonoTypeOperatorFunction<T> {
    return (source$: Observable<T>): Observable<T> => {
      if (this.inProgress.has(indentifier)) {
        console.log(`DUPLICATE :: ${indentifier}`);
      } else {
        this.inProgress.set(indentifier, source$.pipe(shareReplay(1)));
      }

      return (this.inProgress.get(indentifier) as Observable<T>).pipe(
        finalize(() => this.inProgress.delete(indentifier))
      );
    };
  }
}

Example 1: Usage in individual service call

class MyService {
  constructor(private http: HttpClient) {}

  create() {
    return this.http
      .post('some-url', {})
      .pipe(RxJsUtils.shareDuplicate('some-url'));
  }
}

Example 2: Usage in HTTP_INTERCETOR

class ApiInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<unknown>, next: HttpHandler) {
    const { urlWithParams } = request;

    return next
      .handle(request)
      .pipe(RxJsUtils.shareDuplicate(urlWithParams));
  }
}

Although I'm able to achieve the desired result as I'm able to prevent duplicate using either of the code. I'm still looking for code review & feedback if I'm missing some corner cases. I'm also seeking some guidance wrt the unit test cases that we can write for these kind of custom rxjs operator.

One more thing which I don't have any clue about is when I try to use this operator for individual api call & in interceptor it doesn't work as expected.

I'm little naive to writing custom operator, Any guidance is highly appreciated.

Answer 1

This works like a charm (see UPDATE below). The only thing you need to take care of is to sort your query parameters (if any) alphabetically (or in any other consistent way), otherwise you might have the same requests with different parameter order.

I modified slightly the solution from here: https://stackoverflow.com/a/49967720/134120 to check if the URL contains multiple parameters in the first place (if not, return it as is), and then your line in the interceptor becomes:

    .pipe(RxJsUtils.shareDuplicate(sortQueryParamsAlphabetically(urlWithParams)));

Already using your solution, was thinking of rolling out my own along the same lines, but no need, thanks! 😉

UPDATE: Another thing you need to take care of is the HTTP method/verb and the payload, if the method is not GET. So, unfortunately this solution will only work well for GET, since it's only checking the URL and the query parameters.

PS. In my mind, I was planning to use a debouncing solution, i.e. if the same call happens within e.g. 1sec, return the one from before. I did this in the past with AngularJS, will have to dig that code and see if it still makes sense with Angular and RxJS.