feat(isr): add custom cache key generation logic

maxisam · eneajaho · commit 821bd1202ef7 · 2024-11-23T23:34:33.000+01:00
diff --git a/libs/isr/models/src/index.ts b/libs/isr/models/src/index.ts
@@ -7,6 +7,7 @@ export {
   VariantRebuildItem,
 } from './cache-handler';
 export {
+  CacheKeyGeneratorFn,
   InvalidateConfig,
   ISRHandlerConfig,
   ModifyHtmlCallbackFn,
diff --git a/libs/isr/models/src/isr-handler-config.ts b/libs/isr/models/src/isr-handler-config.ts
@@ -124,6 +124,11 @@ export interface ISRHandlerConfig {
    * If set to true, the server will provide the cached HTML as soon as possible and will revalidate the cache in the background.
    */
   backgroundRevalidation?: boolean;
+
+  /**
+   * This callback lets you use custom cache key generation logic. If not provided, it will use the default cache key generation logic.
+   */
+  cacheKeyGenerator?: CacheKeyGeneratorFn;
 }
 
 export interface ServeFromCacheConfig {
@@ -144,6 +149,12 @@ export interface InvalidateConfig {
   providers?: Provider[];
 }
 
+export type CacheKeyGeneratorFn = (
+  url: string,
+  allowedQueryParams: string[] | null | undefined,
+  variant: RenderVariant | null,
+) => string;
+
 export type ModifyHtmlCallbackFn = (
   req: Request,
   html: string,
diff --git a/libs/isr/server/src/cache-generation.ts b/libs/isr/server/src/cache-generation.ts
@@ -1,9 +1,14 @@
 import { Provider } from '@angular/core';
-import { CacheHandler, ISRHandlerConfig } from '@rx-angular/isr/models';
+import {
+  CacheHandler,
+  CacheKeyGeneratorFn,
+  ISRHandlerConfig,
+  RenderVariant,
+} from '@rx-angular/isr/models';
 import { Request, Response } from 'express';
 import { ISRLogger } from './isr-logger';
 import { defaultModifyGeneratedHtml } from './modify-generated-html';
-import { getCacheKey, getVariant } from './utils/cache-utils';
+import { defaultCacheKeyGenerator, getVariant } from './utils/cache-utils';
 import { getRouteISRDataFromHTML } from './utils/get-isr-options';
 import { renderUrl, RenderUrlConfig } from './utils/render-url';
 
@@ -21,7 +26,19 @@ export class CacheGeneration {
     public isrConfig: ISRHandlerConfig,
     public cache: CacheHandler,
     public logger: ISRLogger,
-  ) {}
+  ) {
+    if (!this.isrConfig.cacheKeyGenerator) {
+      this.isrConfig.cacheKeyGenerator = defaultCacheKeyGenerator;
+    }
+  }
+  getCacheKey: CacheKeyGeneratorFn = (
+    url: string,
+    allowedQueryParams: string[] | null | undefined,
+    variant: RenderVariant | null,
+  ) => {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    return this.isrConfig.cacheKeyGenerator!(url, allowedQueryParams, variant);
+  };
 
   async generate(
     req: Request,
@@ -31,7 +48,7 @@ export class CacheGeneration {
   ): Promise<IGeneratedResult | void> {
     const { url } = req;
     const variant = getVariant(req, this.isrConfig.variants);
-    const cacheKey = getCacheKey(
+    const cacheKey = this.getCacheKey(
       url,
       this.isrConfig.allowedQueryParams,
       variant,
diff --git a/libs/isr/server/src/isr-handler.ts b/libs/isr/server/src/isr-handler.ts
@@ -11,7 +11,7 @@ import { NextFunction, Request, Response } from 'express';
 import { CacheGeneration } from './cache-generation';
 import { InMemoryCacheHandler } from './cache-handlers/in-memory-cache-handler';
 import { ISRLogger } from './isr-logger';
-import { getCacheKey, getVariant } from './utils/cache-utils';
+import { getVariant } from './utils/cache-utils';
 
 export class ISRHandler {
   protected cache!: CacheHandler;
@@ -148,7 +148,7 @@ export class ISRHandler {
       for (const variant of variants) {
         result.push({
           url,
-          cacheKey: getCacheKey(
+          cacheKey: this.cacheGeneration.getCacheKey(
             url,
             this.isrConfig.allowedQueryParams,
             variant,
@@ -171,7 +171,7 @@ export class ISRHandler {
   ): Promise<Response | void> {
     try {
       const variant = getVariant(req, this.isrConfig.variants);
-      const cacheKey = getCacheKey(
+      const cacheKey = this.cacheGeneration.getCacheKey(
         req.url,
         this.isrConfig.allowedQueryParams,
         variant,
diff --git a/libs/isr/server/src/utils/cache-utils.spec.ts b/libs/isr/server/src/utils/cache-utils.spec.ts
@@ -1,28 +1,28 @@
 import { RenderVariant } from '../../../models/src';
-import { getCacheKey } from './cache-utils';
+import { defaultCacheKeyGenerator } from './cache-utils';
 
 describe('getCacheKey', () => {
   it('should return the URL without query parameters when none are allowed', () => {
     const url = '/page?param1=value1&param2=value2';
-    const result = getCacheKey(url, [], null);
+    const result = defaultCacheKeyGenerator(url, [], null);
     expect(result).toBe('/page');
   });
 
   it('should return the URL with query parameters when it is null or undefined', () => {
     const url = '/page?param1=value1&param2=value2';
-    const result = getCacheKey(url, null, null);
+    const result = defaultCacheKeyGenerator(url, null, null);
     expect(result).toBe('/page?param1=value1&param2=value2');
   });
 
   it('should include only allowed query parameters in the result', () => {
     const url = '/page?allowed=value&disallowed=value';
-    const result = getCacheKey(url, ['allowed'], null);
+    const result = defaultCacheKeyGenerator(url, ['allowed'], null);
     expect(result).toBe('/page?allowed=value');
   });
 
   it('should exclude disallowed query parameters', () => {
     const url = '/page?allowed=value&disallowed=value';
-    const result = getCacheKey(url, ['allowed'], null);
+    const result = defaultCacheKeyGenerator(url, ['allowed'], null);
     expect(result).not.toContain('disallowed=value');
   });
 
@@ -32,7 +32,7 @@ describe('getCacheKey', () => {
       identifier: 'variant123',
       detectVariant: () => true,
     };
-    const result = getCacheKey(url, ['param'], variant);
+    const result = defaultCacheKeyGenerator(url, ['param'], variant);
     expect(result).toBe('/page?param=value<variantId:variant123>');
   });
 });
diff --git a/libs/isr/server/src/utils/cache-utils.ts b/libs/isr/server/src/utils/cache-utils.ts
@@ -1,7 +1,7 @@
 import { RenderVariant } from '@rx-angular/isr/models';
 import { Request } from 'express';
 
-export const getCacheKey = (
+export const defaultCacheKeyGenerator = (
   url: string,
   allowedQueryParams: string[] | null | undefined,
   variant: RenderVariant | null,
