Angular cache service + TTL & cache interceptor

abstract-cache.service.ts

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

// Ref https://medium.com/@AurelienLeloup/cache-http-requests-with-rxjs-for-angular-eb9bee93824d 
type CacheItem<T> = {
  date : Date,
  value: Observable<T>
};

@Injectable({
  providedIn: 'root'
})
export class AbstractCacheService<T>  {

  readonly CACHE_DURATION_IN_MINUTES = 5;
  readonly DEFAULT_KEY = 'DEFAULT';

  // Uso de Map preferido por sobre un objeto JSON por un tema de rendimiento
  // map.has(key) es más rápido que obj.hasOwnProperty(key) o que obj[key] !== undefined
  // Por otro lado Map permite  tener llaves de cualquier tipo.
  private cache: Map<string | object, CacheItem<T>> = new Map();

  getValue(object?: any): Observable<T> | null {
    const now  = new Date();
    const key: string | object           = object ? object : this.DEFAULT_KEY;
    const item: CacheItem<T> | undefined = (this.cache.has(key)) ? this.cache.get(key) : undefined;
    if (!item) {
      return null;
    }

    if (now.getTime() - item.date.getTime() > this.CACHE_DURATION_IN_MINUTES * 60 * 1000) {
      return null;
    }

    return item.value;
  }

  setValue(value: Observable<T>, object?: any) {
    const key  = object ? object : this.DEFAULT_KEY;
    const date = new Date();
    this.cache.set(key, {date, value});
  }

  clearCache() {
    this.cache.clear();
  }

}

cache-http.interceptor.ts

import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor,
  HttpContext,
  HttpContextToken,
  HttpResponse
} from '@angular/common/http';
import { Observable, of, shareReplay, tap } from 'rxjs';
import { AbstractCacheService } from '../services/abstract-cache.service';
import { LoggerService } from '../services/logger.service';

@Injectable({
  providedIn: 'root'
})
export class HttpCacheService extends AbstractCacheService<HttpResponse<unknown>> {
}

const CACHE_IT = new HttpContextToken<boolean>(() => false);
export function cacheIt() {
  return new HttpContext().set(CACHE_IT, true);
}
let Log: LoggerService;

// Ref. https://blog.logrocket.com/caching-with-httpinterceptor-in-angular/
//      https://netbasal.com/new-in-angular-v12-passing-context-to-http-interceptors-308a1ca2f3dd
@Injectable()
export class CacheHttpInterceptor implements HttpInterceptor {

  constructor(
    private cache: HttpCacheService,
    private log: LoggerService) {
      Log = this.log;
    }

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    const requestUrl = request.url;
    if(request.context.get(CACHE_IT)) {
      let cachedData$ = this.cache.getValue(requestUrl);
      if(cachedData$) {
        Log.log(['Cached response: ', requestUrl]);
        return cachedData$;
      } else {
        cachedData$ = next.handle(request).pipe(
          tap((requestResponse: any): void => {
              this.cache.setValue(of(requestResponse as HttpResponse<unknown>), requestUrl);  
          }),
          shareReplay(1)
         )
      }

      return cachedData$;
    }
      
    return next.handle(request);
  }
}