rx-angular · maxisam · Aug 20, 2024 · Aug 20, 2024 · Aug 20, 2024 · Aug 22, 2024
diff --git a/libs/isr/models/src/isr-handler-config.ts b/libs/isr/models/src/isr-handler-config.ts
@@ -97,6 +97,13 @@ export interface ISRHandlerConfig {
   * ],
   */
  variants?: RenderVariant[];
+
+  /**
+   * This array of query params will be allowed to be part of the cache key.
+   * If not provided, which is null, all query params will be part of the cache key.
+   * If provided as an empty array, no query params will be part of the cache key.
+   */
+  allowedQueryParams?: string[];
 }

 export interface ServeFromCacheConfig {

diff --git a/libs/isr/server/src/cache-handlers/filesystem-cache-handler.spec.ts b/libs/isr/server/src/cache-handlers/filesystem-cache-handler.spec.ts
@@ -0,0 +1,35 @@
+import {
+  convertFileNameToRoute,
+  convertRouteToFileName,
+} from './filesystem-cache-handler';
+
+// Use the functions as needed
+describe('Route and File Name Conversion', () => {
+  describe('convertRouteToFileName', () => {
+    it('should convert a simple route without query parameters', () => {
+      const route = '/users/profile';
+      const expectedFileName = '__users__profile';
+      expect(convertRouteToFileName(route)).toEqual(expectedFileName);
+    });
+
+    it('should convert a route with query parameters', () => {
+      const route = '/search?query=test';
+      const expectedFileName = '__search++query=test';
+      expect(convertRouteToFileName(route)).toEqual(expectedFileName);
+    });
+  });
+
+  describe('convertFileNameToRoute', () => {
+    it('should convert a simple file name back to a route', () => {
+      const fileName = '__users__profile';
+      const expectedRoute = '/users/profile';
+      expect(convertFileNameToRoute(fileName)).toEqual(expectedRoute);
+    });
+
+    it('should convert a file name with "++" back to a route with a query parameter', () => {
+      const fileName = '__search++query=test';
+      const expectedRoute = '/search?query=test';
+      expect(convertFileNameToRoute(fileName)).toEqual(expectedRoute);
+    });
+  });
+});
diff --git a/libs/isr/server/src/cache-handlers/filesystem-cache-handler.ts b/libs/isr/server/src/cache-handlers/filesystem-cache-handler.ts
@@ -344,16 +344,20 @@ function getFileFullPath(fileName: string, cacheFolderPath: string): string {
 * @param {string} route - The string representing the route to be converted into a file name.
 * @returns {string} The modified string representing the file name obtained by replacing '/' characters with '__'.
 */
-function convertRouteToFileName(route: string): string {
+export function convertRouteToFileName(route: string): string {
  // replace all occurrences of '/' character in the 'route' string with '__' using regular expression
-  return route.replace(new RegExp('/', 'g'), '__');
+  return route
+    .replace(new RegExp('/', 'g'), '__')
+    .replace(new RegExp('\\?', 'g'), '++');
 }

 /**
 * This function takes a string parameter 'fileName' and replaces all '__' strings in it with '/' and returns the modified string.
 * @param fileName - The string representing the file name to be converted into a route.
 */
-function convertFileNameToRoute(fileName: string): string {
+export function convertFileNameToRoute(fileName: string): string {
  // replace all occurrences of '__' string in the 'fileName' string with '/' using regular expression
-  return fileName.replace(new RegExp('__', 'g'), '/');
+  return fileName
+    .replace(new RegExp('\\+\\+', 'g'), '?')
+    .replace(new RegExp('__', 'g'), '/');
 }
diff --git a/libs/isr/server/src/cache-regeneration.ts b/libs/isr/server/src/cache-regeneration.ts
@@ -34,7 +34,11 @@ export class CacheRegeneration {
  ): Promise<void> {
    const { url } = req;
    const variant = getVariant(req, this.isrConfig);
-    const cacheKey = getCacheKey(url, variant);
+    const cacheKey = getCacheKey(
+      url,
+      this.isrConfig.allowedQueryParams,
+      variant,
+    );

    if (this.urlsOnHold.includes(cacheKey)) {
      logger.log('Another regeneration is on-going for this url...');

diff --git a/libs/isr/server/src/isr-handler.ts b/libs/isr/server/src/isr-handler.ts
@@ -168,7 +168,7 @@ export class ISRHandler {
      for (const variant of variants) {
        result.push({
          url,
-          cacheKey: getCacheKey(url, variant),
+          cacheKey: getCacheKey(url, this.config.allowedQueryParams, variant),
          reqSimulator: variant.simulateVariant
            ? variant.simulateVariant
            : defaultVariant,
@@ -187,8 +187,9 @@ export class ISRHandler {
  ): Promise<Response | void> {
    try {
      const variant = this.getVariant(req);
-
-      const cacheData = await this.cache.get(getCacheKey(req.url, variant));
+      const cacheData = await this.cache.get(
+        getCacheKey(req.url, this.config.allowedQueryParams, variant),
+      );
      const { html, options: cacheConfig, createdAt } = cacheData;

      const cacheHasBuildId =
@@ -228,7 +229,7 @@ export class ISRHandler {
      // Cache exists. Send it.
      this.logger.log(
        `Page was retrieved from cache: `,
-        getCacheKey(req.url, variant),
+        getCacheKey(req.url, this.config.allowedQueryParams, variant),
      );
      return res.send(finalHtml);
    } catch (error) {
@@ -281,10 +282,14 @@ export class ISRHandler {
    const variant = this.getVariant(req);

    // Cache the rendered `html` for this request url to use for subsequent requests
-    await this.cache.add(getCacheKey(req.url, variant), finalHtml, {
-      revalidate,
-      buildId: this.config.buildId,
-    });
+    await this.cache.add(
+      getCacheKey(req.url, this.config.allowedQueryParams, variant),
+      finalHtml,
+      {
+        revalidate,
+        buildId: this.config.buildId,
+      },
+    );
    return res.send(finalHtml);
  }


diff --git a/libs/isr/server/src/utils/cache-utils.spec.ts b/libs/isr/server/src/utils/cache-utils.spec.ts
@@ -0,0 +1,38 @@
+import { RenderVariant } from '../../../models/src';
+import { getCacheKey } 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);
+    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);
+    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);
+    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);
+    expect(result).not.toContain('disallowed=value');
+  });
+
+  it('should append the variant identifier when a variant is provided', () => {
+    const url = '/page?param=value';
+    const variant: RenderVariant = {
+      identifier: 'variant123',
+      detectVariant: () => true,
+    };
+    const result = getCacheKey(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
@@ -3,10 +3,27 @@ import { Request } from 'express';

 export const getCacheKey = (
  url: string,
+  allowedQueryParams: string[] | null | undefined,
  variant: RenderVariant | null,
 ): string => {
-  if (!variant) return url;
-  return `${url}<variantId:${variant.identifier}>`;
+  let normalizedUrl = url;
+  if (allowedQueryParams) {
+    // Normalize the URL by removing disallowed query parameters
+    // using http://localhost as the base URL to parse the URL
+    // since the URL constructor requires a base URL to parse relative URLs
+    // it will not be used in the final cache key
+    const urlObj = new URL(url, 'http://localhost');
+    const searchParams = urlObj.searchParams;
+    const filteredSearchParams = new URLSearchParams();
+    searchParams.forEach((value, key) => {
+      if (allowedQueryParams.includes(key)) {
+        filteredSearchParams.append(key, value);
+      }
+    });
+    normalizedUrl = `${urlObj.pathname}${filteredSearchParams.toString() ? '?' + filteredSearchParams.toString() : ''}`;
+  }
+  if (!variant) return normalizedUrl;
+  return `${normalizedUrl}<variantId:${variant.identifier}>`;
 };

 export const getVariant = (