Fix cache (#1105)

Shopify · Jul 18, 2023 · 4db6142 · 4db6142
1 parent 63d1726
commit 4db6142
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 20 deletions.
diff --git a/.changeset/thirty-items-argue.md b/.changeset/thirty-items-argue.md
@@ -0,0 +1,5 @@
+---
+'@shopify/hydrogen': patch
+---
+
+Fix cache key by url encode the sub request keys
diff --git a/packages/hydrogen/src/cache/api.ts b/packages/hydrogen/src/cache/api.ts
@@ -1,9 +1,21 @@
 import type {CachingStrategy} from './strategies';
 import {CacheShort, generateCacheControlHeader} from './strategies';
 
-function logCacheApiStatus(status: string | null, url: string) {
-  // // eslint-disable-next-line no-console
-  // console.log('\n' + status, url);
+function logCacheApiStatus(
+  status: string | null,
+  request: Request,
+  response?: Response,
+) {
+  // const url = request.url;
+  // eslint-disable-next-line no-console
+  // console.log(status, 'cacheKey', url);
+  // if (response) {
+  //   let headersJson: Record<string, string> = {};
+  //   response.headers.forEach((value, key) => {
+  //     headersJson[key] = value;
+  //   });
+  //   console.log(`${status} response headers: `, headersJson);
+  // }
 }
 
 function getCacheControlSetting(
@@ -39,11 +51,11 @@ async function getItem(
 
   const response = await cache.match(request);
   if (!response) {
-    logCacheApiStatus('MISS', request.url);
+    logCacheApiStatus('MISS', request);
     return;
   }
 
-  logCacheApiStatus('HIT', request.url);
+  logCacheApiStatus('HIT', request, response);
 
   return response;
 }
@@ -101,14 +113,11 @@ async function setItem(
   const cacheControl = getCacheControlSetting(userCacheOptions);
 
   // The padded cache-control to mimic stale-while-revalidate
-  request.headers.set(
-    'cache-control',
-    generateDefaultCacheControlHeader(
-      getCacheControlSetting(cacheControl, {
-        maxAge:
-          (cacheControl.maxAge || 0) + (cacheControl.staleWhileRevalidate || 0),
-      }),
-    ),
+  const paddedCacheControlString = generateDefaultCacheControlHeader(
+    getCacheControlSetting(cacheControl, {
+      maxAge:
+        (cacheControl.maxAge || 0) + (cacheControl.staleWhileRevalidate || 0),
+    }),
   );
   // The cache-control we want to set on response
   const cacheControlString = generateDefaultCacheControlHeader(
@@ -117,19 +126,19 @@ async function setItem(
 
   // CF will override cache-control, so we need to keep a non-modified real-cache-control
   // cache-control is still necessary for mini-oxygen
-  response.headers.set('cache-control', cacheControlString);
+  response.headers.set('cache-control', paddedCacheControlString);
   response.headers.set('real-cache-control', cacheControlString);
   response.headers.set('cache-put-date', new Date().toUTCString());
 
-  logCacheApiStatus('PUT', request.url);
+  logCacheApiStatus('PUT', request, response);
   await cache.put(request, response);
 }
 
 async function deleteItem(cache: Cache, request: Request) {
   if (!cache) return;
 
-  logCacheApiStatus('DELETE', request.url);
-  await cache.delete(request);
+  logCacheApiStatus('DELETE', request);
+  await cache.delete(request.url);
 }
 
 /**
@@ -158,7 +167,7 @@ function isStale(request: Request, response: Response) {
   const result = age > responseMaxAge;
 
   if (result) {
-    logCacheApiStatus('STALE', request.url);
+    logCacheApiStatus('STALE', request, response);
   }
 
   return result;

diff --git a/packages/hydrogen/src/utils/hash.ts b/packages/hydrogen/src/utils/hash.ts
@@ -23,6 +23,5 @@ export function hashKey(queryKey: QueryKey): string {
       }
     }
   }
-
-  return hash;
+  return encodeURIComponent(hash);
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -23,6 +23,5 @@ export function hashKey(queryKey: QueryKey): string { @@
           }
         }
       }
-      return hash;
+      return encodeURIComponent(hash);
     }