Fix an issue where cache fails to match on Oxygen/Cloudflare (#2530)

The URL requires to be URI encoded to properly match
Shopify · Jul 19, 2023 · 1e6953d · 1e6953d
1 parent ca65e24
commit 1e6953d
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 14 deletions.
diff --git a/.changeset/smooth-dryers-march.md b/.changeset/smooth-dryers-march.md
@@ -0,0 +1,5 @@
+---
+'@shopify/hydrogen': patch
+---
+
+Fix an issue where cache doesn't properly match requests
diff --git a/packages/hydrogen/src/foundation/Cache/cache.ts b/packages/hydrogen/src/foundation/Cache/cache.ts
@@ -102,22 +102,19 @@ export async function setItemInCache(
   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(
-    getCacheControlSetting(cacheControl)
-  );
+  const cacheControlString = generateDefaultCacheControlHeader(cacheControl);
 
   // CF will override cache-control, so we need to keep a
   // non-modified real-cache-control
+  response.headers.set('cache-control', paddedCacheControlString);
   response.headers.set('real-cache-control', cacheControlString);
   response.headers.set('cache-put-date', new Date().toUTCString());
 

diff --git a/packages/hydrogen/src/utilities/hash.ts b/packages/hydrogen/src/utilities/hash.ts
@@ -24,5 +24,5 @@ export function hashKey(queryKey: QueryKey): string {
     }
   }
 
-  return hash;
+  return encodeURIComponent(hash);
 }
diff --git a/packages/hydrogen/src/utilities/tests/hash.vitest.ts b/packages/hydrogen/src/utilities/tests/hash.vitest.ts
@@ -11,7 +11,9 @@ describe('Hash key for subrequests', () => {
   });
 
   it('supports arrays of strings and objects', () => {
-    expect(hashKey(['hello', {world: true}])).toEqual('hello{"world":true}');
+    expect(hashKey(['hello', {world: true}])).toEqual(
+      'hello%7B%22world%22%3Atrue%7D'
+    );
   });
 
   it('supports useShopQuery-like keys', () => {
@@ -43,6 +45,8 @@ describe('Hash key for subrequests', () => {
         NaN,
         ['subarray'],
       ])
-    ).toEqual('hello() => "world"11Infinity{}NaN["subarray"]');
+    ).toEqual(
+      'hello()%20%3D%3E%20%22world%2211Infinity%7B%7DNaN%5B%22subarray%22%5D'
+    );
   });
 });