Add configurable prefix and separator to http cache store

Author: nebarf

src/cache/http-cache-store.ts

@@ -1,33 +1,33 @@
 import { HttpCacheEntry } from './types';
 
-export abstract class HttpCacheStore<Identifier = string> {
+export interface HttpCacheStore {
   /**
    * Gets the cached entry for the given identifier.
    */
-  abstract get<T>(identifier: Identifier): HttpCacheEntry<T> | undefined;
+  get<T>(identifier: string): HttpCacheEntry<T> | undefined;
 
   /**
    * Stores the entry.
    */
-  abstract put<T>(entry: HttpCacheEntry<T>): () => void;
+  put<T>(identifier: string, entry: HttpCacheEntry<T>): () => void;
 
   /**
    * Determines if the entry is in the store.
    */
-  abstract has(idenitifier: Identifier): boolean;
+  has(identifier: string): boolean;
 
   /**
    * Deletes the cached entry for the given identifier.
    */
-  abstract delete(idenitifier: Identifier): void;
+  delete(identifier: string): void;
 
   /**
    * Gets all stored entries.
    */
-  abstract entries(): HttpCacheEntry<unknown>[];
+  entries(): HttpCacheEntry<unknown>[];
 
   /**
    * Flushes the store by deleting all entries.
    */
-  abstract flush(): void;
+  flush(): void;
 }

src/cache/http-cache.ts

@@ -1,9 +1,13 @@
-import { HttpCacheStore } from './http-cache-store';
 import { HttpRequest } from '../client';
 import { HttpCacheEntry } from './types';
+import { HttpCacheStorePrefixDecorator } from './prefix-decorator';
 
 export class HttpCacheService {
-  constructor(private store: HttpCacheStore) {}
+  private prefixedStore: HttpCacheStorePrefixDecorator;
+
+  constructor(store: HttpCacheStorePrefixDecorator) {
+    this.prefixedStore = store;
+  }
 
   /**
    * Gets the unique key used as idenitifier to store
@@ -29,22 +33,22 @@ export class HttpCacheService {
    */
   private getEntry<T>(request: HttpRequest): HttpCacheEntry<T> | undefined {
     const reqIdentifier = this.getRequestIdentifier(request);
-    return this.store.get(reqIdentifier) as HttpCacheEntry<T>;
+    return this.prefixedStore.get(reqIdentifier) as HttpCacheEntry<T>;
   }
 
   /**
    * Removes a cached entry.
    */
   private removeEntry<T>(entry: HttpCacheEntry<T>): void {
-    this.store.delete(entry.identifier);
+    this.prefixedStore.delete(entry.identifier);
   }
 
   /**
    * Determines if for the given request is available a cached response.
    */
   has(request: HttpRequest): boolean {
     const key = this.getRequestIdentifier(request);
-    return this.store.has(key);
+    return this.prefixedStore.has(key);
   }
 
   /**
@@ -89,7 +93,7 @@ export class HttpCacheService {
     };
 
     // Update the store.
-    this.store.put(entry);
+    this.prefixedStore.put(entry.identifier, entry);
 
     // Remove the entry from the cache once expired.
     const timerRef = setTimeout(() => {
@@ -102,7 +106,7 @@ export class HttpCacheService {
    * Founds all expired entry and deletes them from the cache.
    */
   prune(): void {
-    const entries = this.store.entries();
+    const entries = this.prefixedStore.entries();
     entries.forEach((entry) => {
       const isEntryExpired = this.isEntryExpired(entry);
 
@@ -116,6 +120,6 @@ export class HttpCacheService {
    * Flush the cache by removing all entries.
    */
   flush(): void {
-    this.store.flush();
+    this.prefixedStore.flush();
   }
 }

src/cache/http-in-memory-cache-store.ts

@@ -1,7 +1,7 @@
 import { HttpCacheEntry } from './types';
 import { HttpCacheStore } from './http-cache-store';
 
-export class HttpInMemoryCacheStore extends HttpCacheStore {
+export class HttpInMemoryCacheStore implements HttpCacheStore {
   /**
    * The local cache providing for a request identifier
    * the corresponding cached entry.
@@ -18,9 +18,9 @@ export class HttpInMemoryCacheStore extends HttpCacheStore {
   /**
    * @inheritdoc
    */
-  put<T>(entry: HttpCacheEntry<T>): () => void {
-    this.store.set(entry.identifier, entry);
-    return () => this.delete(entry.identifier);
+  put<T>(identifier: string, entry: HttpCacheEntry<T>): () => void {
+    this.store.set(identifier, entry);
+    return () => this.delete(identifier);
   }
 
   /**

src/cache/prefix-decorator.ts

@@ -0,0 +1,79 @@
+import { HttpCacheStore } from './http-cache-store';
+import { HttpCacheEntry } from './types';
+
+export class HttpCacheStorePrefixDecorator implements HttpCacheStore {
+  /**
+   * The label use to prefix any entry identifier.
+   */
+  private prefix = 'rhf';
+
+  /**
+   * The label used to separate the prefix and the entry identifier.
+   */
+  private separator = '__';
+
+  /**
+   * The http cache store to decorate.
+   */
+  private store: HttpCacheStore;
+
+  constructor(store: HttpCacheStore, prefix?: string, separator?: string) {
+    this.store = store;
+    this.prefix = prefix || this.prefix;
+    this.separator = separator || this.separator;
+  }
+
+  /**
+   * Computes the entry identifier by concatenating the store prefix with
+   * the base identifier.
+   */
+  private getPrefixedIdentifier(entryIdentifier: string): string {
+    return `${this.prefix}${this.separator}${entryIdentifier}`;
+  }
+
+  /**
+   * @inheritdoc
+   */
+  get<T>(entryIdentifier: string): HttpCacheEntry<T> | undefined {
+    const prefixedIdentifier = this.getPrefixedIdentifier(entryIdentifier);
+    return this.store.get(prefixedIdentifier);
+  }
+
+  /**
+   * @inheritdoc
+   */
+  put<T>(entryIdentifier: string, entry: HttpCacheEntry<T>): () => void {
+    const prefixedIdentifier = this.getPrefixedIdentifier(entryIdentifier);
+    return this.store.put(prefixedIdentifier, entry);
+  }
+
+  /**
+   * @inheritdoc
+   */
+  has(entryIdentifier: string): boolean {
+    const prefixedIdentifier = this.getPrefixedIdentifier(entryIdentifier);
+    return this.store.has(prefixedIdentifier);
+  }
+
+  /**
+   * @inheritdoc
+   */
+  delete(entryIdentifier: string): void {
+    const prefixedIdentifier = this.getPrefixedIdentifier(entryIdentifier);
+    return this.store.delete(prefixedIdentifier);
+  }
+
+  /**
+   * @inheritdoc
+   */
+  entries(): HttpCacheEntry<unknown>[] {
+    return this.store.entries();
+  }
+
+  /**
+   * @inheritdoc
+   */
+  flush(): void {
+    return this.store.flush();
+  }
+}

src/config/defaults.ts

@@ -2,6 +2,9 @@ import { HttpClientContextProps, HttpClientConfig } from './types';
 import { httpResponseParser } from './response-parser';
 import { serializeRequestBody } from './request-body-serializer';
 import { HttpCacheService, HttpInMemoryCacheStore } from '../cache';
+import { HttpCacheStorePrefixDecorator } from '../cache/prefix-decorator';
+
+export const defaultCacheStore = new HttpInMemoryCacheStore();
 
 export const defaultHttpReqConfig: HttpClientConfig = {
   baseUrl: '',
@@ -12,7 +15,7 @@ export const defaultHttpReqConfig: HttpClientConfig = {
       'Content-Type': 'application/json',
     },
   },
-  cache: new HttpCacheService(new HttpInMemoryCacheStore()),
+  cache: new HttpCacheService(new HttpCacheStorePrefixDecorator(defaultCacheStore)),
 };
 
 export const defaultClientProps: HttpClientContextProps = {

src/config/http-client-config-provider.tsx

@@ -1,9 +1,10 @@
 import React, { ReactElement, createContext, useContext, memo, useMemo } from 'react';
 import { useCompareMemo } from '../shared';
-import { defaultClientProps, defaultHttpReqConfig } from './defaults';
+import { defaultClientProps, defaultHttpReqConfig, defaultCacheStore } from './defaults';
 import { HttpClientContextProps, HttpClientProviderProps, HttpClientConfig } from './types';
 import fastCompare from 'react-fast-compare';
 import { HttpCacheService } from '..';
+import { HttpCacheStorePrefixDecorator } from '../cache/prefix-decorator';
 
 /**
  * The context to provide the default http client configuration.
@@ -18,16 +19,25 @@ const HttpClientConfigProvider = ({ config, children }: HttpClientProviderProps)
    * The merged http config.
    */
   const mergedHttpConfig: HttpClientConfig = useCompareMemo(
-    () => ({
-      baseUrl: config.baseUrl || defaultHttpReqConfig.baseUrl,
-      responseParser: config.responseParser || defaultHttpReqConfig.responseParser,
-      reqOptions: config.reqOptions || defaultHttpReqConfig.reqOptions,
-      requestBodySerializer:
-        config.requestBodySerializer || defaultHttpReqConfig.requestBodySerializer,
-      cache: config.cacheStore
-        ? new HttpCacheService(config.cacheStore)
-        : defaultHttpReqConfig.cache,
-    }),
+    () => {
+      const cacheStore = config.cacheStore || defaultCacheStore;
+      const prefixedCacheStore = new HttpCacheStorePrefixDecorator(
+        cacheStore,
+        config.cacheStorePrefix,
+        config.cacheStoreSeparator
+      );
+
+      const cache = new HttpCacheService(prefixedCacheStore);
+
+      return {
+        baseUrl: config.baseUrl || defaultHttpReqConfig.baseUrl,
+        responseParser: config.responseParser || defaultHttpReqConfig.responseParser,
+        reqOptions: config.reqOptions || defaultHttpReqConfig.reqOptions,
+        requestBodySerializer:
+          config.requestBodySerializer || defaultHttpReqConfig.requestBodySerializer,
+        cache,
+      };
+    },
     [config],
     fastCompare
   );

src/config/types.ts

@@ -31,9 +31,11 @@ export interface HttpClientProviderConfig {
   responseParser: HttpResponseParser;
   requestBodySerializer: HttpRequestBodySerializer;
   cacheStore: HttpCacheStore;
+  cacheStorePrefix: string;
+  cacheStoreSeparator: string;
 }
 
 export interface HttpClientProviderProps {
   children: ReactElement;
-  config: HttpClientProviderConfig;
+  config: Partial<HttpClientProviderConfig>;
 }