fix: use cache in a function with params (#66)

Fixes `"use cache"` when using the directive in a function with params
where the param should be included in the cache key.
Changes in-memory cache implementation to use `deep-eql` for deep
equality check on the cache key segments.

Author: lazarv

packages/react-server/lib/plugins/use-cache-inline.mjs

@@ -224,7 +224,7 @@ export default function useServerInline(profiles) {
             ],
           };
           cache.node.body.body = [
-            ...(cache.params.length > 0
+            ...(cache.params.length > 0 || cache.node.params.length > 0
               ? [
                   {
                     type: "VariableDeclaration",
@@ -263,7 +263,10 @@ export default function useServerInline(profiles) {
                   name: "useCache",
                 },
                 arguments: [
-                  cacheKey,
+                  {
+                    ...cacheKey,
+                    elements: [...cacheKey.elements, ...cache.node.params],
+                  },
                   {
                     type: "FunctionExpression",
                     id: null,

packages/react-server/memory-cache/index.mjs

@@ -1,3 +1,5 @@
+import equals from "deep-eql";
+
 import { context$, getContext } from "../server/context.mjs";
 import {
   CACHE_CONTEXT,
@@ -27,9 +29,7 @@ export class MemoryCache {
 
     const cacheKeys = this.cache.keys();
     for (const entryKeys of cacheKeys) {
-      if (
-        keys.every((key, keyIndex) => entryKeys[keyIndex] === key?.toString())
-      ) {
+      if (keys.every((key, keyIndex) => equals(entryKeys[keyIndex], key))) {
         return this.cache.get(entryKeys);
       }
     }
@@ -41,26 +41,19 @@ export class MemoryCache {
     if (await this.hasExpiry(keys)) {
       const cacheKeys = this.cache.keys();
       for (const entryKeys of cacheKeys) {
-        if (
-          keys.every((key, keyIndex) => entryKeys[keyIndex] === key?.toString())
-        ) {
+        if (keys.every((key, keyIndex) => equals(entryKeys[keyIndex], key))) {
           this.cache.set(entryKeys, value);
           return;
         }
       }
-      this.cache.set(
-        keys.map((key) => key?.toString()),
-        value
-      );
+      this.cache.set(keys, value);
     }
   }
 
   async has(keys) {
     const cacheKeys = this.cache.keys();
     for (const entryKeys of cacheKeys) {
-      if (
-        keys.every((key, keyIndex) => entryKeys[keyIndex] === key?.toString())
-      ) {
+      if (keys.every((key, keyIndex) => equals(entryKeys[keyIndex], key))) {
         return true;
       }
     }
@@ -71,25 +64,20 @@ export class MemoryCache {
   async setExpiry(keys, expiry) {
     const expiryKeys = this.expiry.keys();
     for (const entryKeys of expiryKeys) {
-      if (
-        keys.every((key, keyIndex) => entryKeys[keyIndex] === key?.toString())
-      ) {
+      if (keys.every((key, keyIndex) => equals(entryKeys[keyIndex], key))) {
         this.expiry.set(entryKeys, expiry);
         return;
       }
     }
-    this.expiry.set(
-      keys.map((key) => key?.toString()),
-      expiry
-    );
+    this.expiry.set(keys, expiry);
   }
 
   async hasExpiry(keys) {
     const expiryKeys = this.expiry.keys();
     for (const entryKeys of expiryKeys) {
       for (let keyIndex = 0; keyIndex < entryKeys.length; keyIndex++) {
         const key = keys[keyIndex];
-        if (entryKeys[keyIndex] !== key?.toString()) {
+        if (!equals(entryKeys[keyIndex], key)) {
           break;
         }
         if (keyIndex === entryKeys.length - 1) {
@@ -104,9 +92,7 @@ export class MemoryCache {
   async delete(keys) {
     const cacheKeys = this.cache.keys();
     for (const entryKeys of cacheKeys) {
-      if (
-        keys.every((key, keyIndex) => entryKeys[keyIndex] === key?.toString())
-      ) {
+      if (keys.every((key, keyIndex) => equals(entryKeys[keyIndex], key))) {
         this.cache.delete(entryKeys);
       }
     }

packages/react-server/package.json

@@ -96,6 +96,7 @@
     "ansi-regex": "^6.0.1",
     "cac": "^6.7.14",
     "chokidar": "^3.5.3",
+    "deep-eql": "^5.0.2",
     "esbuild": "^0.19.3",
     "escodegen": "^2.1.0",
     "estraverse": "^5.3.0",

packages/react-server/server/cache.mjs

@@ -11,7 +11,7 @@ export function withCache(Component, ttl = Infinity) {
 }
 
 export function useResponseCache(ttl = Infinity) {
-  const url = useUrl()?.toString();
+  const url = useUrl();
   const accept = useRequest()?.headers?.get?.("accept");
   const outlet = useOutlet();
   const cache = getContext(CACHE_CONTEXT);

pnpm-lock.yaml

@@ -224,3 +224,18 @@ test("use cache concurrency", async () => {
   ]);
   expect(JSON.stringify(serverLogs)).toBe(`["getTodos"]`);
 });
+
+test("use cache dynamic", async () => {
+  await server("fixtures/use-cache-dynamic.jsx");
+  await page.goto(hostname + "?id=1");
+  const time = await page.textContent("body");
+
+  await page.reload();
+  expect(await page.textContent("body")).toBe(time);
+
+  await page.goto(hostname + "?id=2");
+  expect(await page.textContent("body")).not.toBe(time);
+
+  await page.goto(hostname + "?id=1");
+  expect(await page.textContent("body")).toBe(time);
+});

test/__test__/basic.spec.mjs

@@ -0,0 +1,11 @@
+import { invalidate, useSearchParams } from "@lazarv/react-server";
+
+function getTime({ id: _ }) {
+  "use cache";
+  return new Date().toISOString();
+}
+
+export default async function App() {
+  const { id } = useSearchParams();
+  return <div>{getTime({ id })}</div>;
+}

test/fixtures/use-cache-dynamic.jsx

@@ -23,7 +23,7 @@ export default defineConfig({
       ? ["dot", "github-actions"]
       : ["default"],
     pool: "forks",
-    fileParallelism: false,
+    fileParallelism: !process.env.CI,
   },
   publicDir: false,
 });