feat: use kv for caching (#326)

* feat: use kv for caching

* fix: add kv to env.dev and env.prod namespace

* feat: changes to deploy with kv

---------

Co-authored-by: Daniel Lipniacki <[email protected]>

Author: DDonochVA

Jenkinsfile

@@ -13,6 +13,11 @@ pipeline {
         timestamps()
     }
 
+    environment {
+        KV_DEV = credentials('cf-kv-dev')
+        KV_PROD = credentials('cf-kv-prod')
+    }
+
     stages {
         stage("Deploy main") {
             when {
@@ -34,6 +39,8 @@ pipeline {
                             usernamePassword(credentialsId: 'cf-workers-creds', usernameVariable: 'CLOUDFLARE_ACCOUNT_ID', passwordVariable: 'CLOUDFLARE_API_TOKEN'),
                         ]) {
                             sh """
+                                sed -i "s/<kv_dev_namespace_id>/$KV_DEV/g" apps/blog-bff/wrangler.toml
+                                sed -i "s/<kv_prod_namespace_id>/$KV_PROD/g" apps/blog-bff/wrangler.toml
                                 npx wrangler deploy --config apps/blog-bff/wrangler.toml --env dev
                                 npx wrangler deploy --config apps/blog-bff/wrangler.toml --env prod
                             """   

apps/blog-bff/wrangler.toml

@@ -9,6 +9,14 @@ logpush = true
 name = "blog-bff"
 vars = { IS_PROD = "true" }
 
+[[env.prod.kv_namespaces]]
+binding = "CACHE_KV"
+id = "<kv_prod_namespace_id>"
+
 [env.dev]
 name = "blog-bff-dev"
 vars = { IS_PROD = "false" }
+
+[[env.dev.kv_namespaces]]
+binding = "CACHE_KV"
+id = "<kv_dev_namespace_id>"

libs/blog-bff/shared/util-middleware/src/lib/cache.ts

@@ -1,18 +1,22 @@
 import { env } from 'hono/adapter';
-import { cache } from 'hono/cache';
 import { createMiddleware } from 'hono/factory';
 
+import { kvCache } from './kv-cache';
 import { getWpLang } from './lang';
 
-export const appCache = createMiddleware((c, next) => {
-  if (env<{ DISABLE_CACHE: string }>(c)['DISABLE_CACHE']) {
+type Env = {
+  Bindings: {
+    DISABLE_CACHE?: string;
+    CACHE_KV: KVNamespace;
+  };
+};
+
+export const appCache = createMiddleware<Env>((c, next) => {
+  if (env(c)['DISABLE_CACHE']) {
     return next();
   }
-  return cache({
-    wait: false,
-    cacheName: 'al-bff',
-    cacheControl: 'max-age=3600',
+  return kvCache({
+    kvNamespace: env(c).CACHE_KV,
     keyGenerator: (c) => `${c.req.url}_${getWpLang(c, 'en')}`,
-    vary: 'x-al-lang',
   })(c, next);
 });

libs/blog-bff/shared/util-middleware/src/lib/kv-cache.ts

@@ -0,0 +1,73 @@
+import type { Context, MiddlewareHandler } from 'hono';
+
+/**
+ * KV Cache Middleware based on `hono/cache` built for Cache API.
+ *
+ * @param {Object} options - The options for the KV cache middleware.
+ * @param {KVNamespace} options.kvNamespace - The KV namespace to use for caching.
+ * @param {string} [options.cacheKeyPrefix] - A prefix to add to cache keys.
+ * @param {Function} [options.keyGenerator] - A function to generate cache keys.
+ * @param {number} [options.ttl=3600] - Time-to-live for cached items in seconds.
+ * @returns {MiddlewareHandler} The middleware handler function.
+ */
+export const kvCache = (options: {
+  kvNamespace: KVNamespace;
+  cacheKeyPrefix?: string;
+  keyGenerator?: (c: Context) => Promise<string> | string;
+  ttl?: number; // TTL in seconds
+}): MiddlewareHandler => {
+  return async function kvCache(c, next) {
+    let key = c.req.url;
+    if (options.keyGenerator) {
+      key = await options.keyGenerator(c);
+    }
+
+    if (options.cacheKeyPrefix) {
+      key = options.cacheKeyPrefix + key;
+    }
+
+    // Attempt to retrieve the cached response
+    const cachedResponseBody = await options.kvNamespace.get(
+      key,
+      'arrayBuffer',
+    );
+    if (cachedResponseBody) {
+      // Retrieve stored headers
+      const cachedHeadersJson = await options.kvNamespace.get(key + ':headers');
+      const headers = new Headers();
+      if (cachedHeadersJson) {
+        const headersObj = JSON.parse(cachedHeadersJson);
+        for (const [k, v] of Object.entries(headersObj)) {
+          headers.set(k, v as string);
+        }
+      }
+      return new Response(cachedResponseBody, { headers });
+    }
+
+    // Proceed to the next middleware or handler
+    await next();
+
+    // Cache the response if it's successful
+    if (!c.res.ok) {
+      return;
+    }
+
+    // Clone the response to read its body
+    const resClone = c.res.clone();
+    const resBody = await resClone.arrayBuffer();
+
+    // Store the response body and headers in KV
+    const ttl = options.ttl || 3600; // Default TTL is 1 hour
+    await options.kvNamespace.put(key, resBody, { expirationTtl: ttl });
+
+    const headersObj: Record<string, string> = {};
+    for (const [k, v] of resClone.headers.entries()) {
+      headersObj[k] = v;
+    }
+    await options.kvNamespace.put(
+      key + ':headers',
+      JSON.stringify(headersObj),
+      { expirationTtl: ttl },
+    );
+  };
+};

libs/blog-bff/shared/util-middleware/tsconfig.lib.json

@@ -2,9 +2,10 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "module": "commonjs",
+    "lib": ["ESNext"],
     "outDir": "../../../../dist/out-tsc",
     "declaration": true,
-    "types": ["node"]
+    "types": ["node", "@cloudflare/workers-types"]
   },
   "exclude": ["jest.config.ts", "src/**/*.spec.ts", "src/**/*.test.ts"],
   "include": ["src/**/*.ts"]