[HACKDAYS] O2 cache

packages/hydrogen/src/cache/api.ts

@@ -67,17 +67,7 @@ async function getItem(
   return response;
 }
 
-/**
- * Put an item into the cache.
- */
-async function setItem(
-  cache: Cache,
-  request: Request,
-  response: Response,
-  userCacheOptions: CachingStrategy,
-) {
-  if (!cache) return;
-
+function getCacheControlHeaders(userCacheOptions: CachingStrategy) {
   /**
    * We are manually managing staled request by adding this workaround.
    * Why? cache control header support is dependent on hosting platform
@@ -129,9 +119,26 @@ 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', paddedCacheControlString);
-  response.headers.set('real-cache-control', cacheControlString);
-  response.headers.set('cache-put-date', String(Date.now()));
+  return [
+    ['cache-control', paddedCacheControlString],
+    ['real-cache-control', cacheControlString],
+    ['cache-put-date', String(Date.now())],
+  ];
+}
+/**
+ * Put an item into the cache.
+ */
+async function setItem(
+  cache: Cache,
+  request: Request,
+  response: Response,
+  userCacheOptions: CachingStrategy,
+) {
+  if (!cache) return;
+
+  for (const [key, value] of getCacheControlHeaders(userCacheOptions)) {
+    response.headers.set(key, value);
+  }
 
   logCacheApiStatus('PUT', request, response);
   await cache.put(request, response);
@@ -187,6 +194,6 @@ export const CacheAPI = {
   get: getItem,
   set: setItem,
   delete: deleteItem,
-  generateDefaultCacheControlHeader,
+  getCacheControlHeaders,
   isStale,
 };

packages/hydrogen/src/cache/run-with-cache.ts

@@ -4,12 +4,7 @@ import {
   generateCacheControlHeader,
   type CachingStrategy,
 } from './strategies';
-import {
-  getItemFromCache,
-  getKeyUrl,
-  isStale,
-  setItemInCache,
-} from './sub-request';
+import {getItemFromCache, getKeyUrl, setItemInCache} from './sub-request';
 import {type StackInfo} from '../utils/callsites';
 import {hashKey} from '../utils/hash';
 import type {WaitUntil} from '../types';
@@ -53,6 +48,7 @@ type WithCacheOptions<T = unknown> = {
   shouldCacheResult?: (value: T) => boolean;
   waitUntil?: WaitUntil;
   debugInfo?: DebugOptions;
+  cacheTags?: string[];
 };
 
 // Lock to prevent revalidating the same sub-request
@@ -75,14 +71,22 @@ export async function runWithCache<T = unknown>(
     shouldCacheResult = () => true,
     waitUntil,
     debugInfo,
+    cacheTags,
   }: WithCacheOptions<T>,
 ): Promise<T> {
   const startTime = Date.now();
-  const key = hashKey([
+  const key = await hashKey([
     // '__HYDROGEN_CACHE_ID__', // TODO purgeQueryCacheOnBuild
     ...(typeof cacheKey === 'string' ? [cacheKey] : cacheKey),
   ]);
 
+  // console.debug(key, {
+  //   original: (Array.isArray(cacheKey) ? cacheKey.join(':') : cacheKey).slice(
+  //     170,
+  //     270,
+  //   ),
+  // });
+
   let cachedDebugInfo: CachedDebugInfo | undefined;
   let userDebugInfo: CachedDebugInfo | undefined;
 
@@ -135,6 +139,7 @@ export async function runWithCache<T = unknown>(
               status: cacheStatus,
               strategy: generateCacheControlHeader(strategy || {}),
               key,
+              tags: cacheTags,
             },
             waitUntil,
           });
@@ -163,16 +168,18 @@ export async function runWithCache<T = unknown>(
           process.env.NODE_ENV === 'development' ? mergeDebugInfo() : undefined,
       } satisfies CachedItem,
       strategy,
+      cacheTags,
     );
 
-  const cachedItem = await getItemFromCache<CachedItem>(cacheInstance, key);
-  // console.log('--- Cache', cachedItem ? 'HIT' : 'MISS');
+  const {value: cachedItem, status: cacheStatus} =
+    await getItemFromCache<CachedItem>(cacheInstance, key);
+  // console.log('--- Cache', cacheStatus);
 
-  if (cachedItem && typeof cachedItem[0] !== 'string') {
-    const [{value: cachedResult, debugInfo}, cacheInfo] = cachedItem;
-    cachedDebugInfo = debugInfo;
+  if (cachedItem && cacheStatus !== 'MISS') {
+    cachedDebugInfo = cachedItem.debugInfo;
+    const cachedValue = cachedItem.value;
 
-    const cacheStatus = isStale(key, cacheInfo) ? 'STALE' : 'HIT';
+    console.debug(`CACHE ${cacheStatus}`);
 
     if (!swrLock.has(key) && cacheStatus === 'STALE') {
       swrLock.add(key);
@@ -210,13 +217,15 @@ export async function runWithCache<T = unknown>(
 
     // Log HIT/STALE requests
     logSubRequestEvent?.({
-      result: cachedResult,
+      result: cachedValue,
       cacheStatus,
     });
 
-    return cachedResult;
+    return cachedValue;
   }
 
+  console.debug('CACHE MISS');
+
   const result = await actionFn({addDebugData});
 
   // Log MISS requests

packages/hydrogen/src/cache/server-fetch.ts

@@ -10,6 +10,7 @@ export type FetchCacheOptions = {
   cache?: CachingStrategy;
   cacheInstance?: Cache;
   cacheKey?: CacheKey;
+  cacheTags?: string[];
   shouldCacheResponse?: (body: any, response: Response) => boolean;
   waitUntil?: WaitUntil;
   returnType?: 'json' | 'text' | 'arrayBuffer' | 'blob';
@@ -48,6 +49,7 @@ export async function fetchWithServerCache(
     cacheInstance,
     cache: cacheOptions,
     cacheKey = [url, requestInit],
+    cacheTags,
     shouldCacheResponse = () => true,
     waitUntil,
     returnType = 'json',
@@ -81,6 +83,7 @@ export async function fetchWithServerCache(
       cacheInstance,
       waitUntil,
       strategy: cacheOptions ?? null,
+      cacheTags,
       debugInfo,
       shouldCacheResult: (result) =>
         shouldCacheResponse(...fromSerializableResponse(result)),

packages/hydrogen/src/cache/sub-request.ts

@@ -14,20 +14,14 @@ import {
  * Cache API is weird. We just need a full URL, so we make one up.
  */
 export function getKeyUrl(key: string) {
-  return `https://shopify.dev/?${key}`;
+  return `https://shopify.dev/?${encodeURIComponent(key)}`;
 }
 
 function getCacheOption(userCacheOptions?: CachingStrategy): AllCacheOptions {
   return userCacheOptions || CacheDefault();
 }
 
-export function generateSubRequestCacheControlHeader(
-  userCacheOptions?: CachingStrategy,
-): string {
-  return CacheAPI.generateDefaultCacheControlHeader(
-    getCacheOption(userCacheOptions),
-  );
-}
+type CacheStatus = 'HIT' | 'MISS' | 'STALE';
 
 /**
  * Get an item from the cache. If a match is found, returns a tuple
@@ -38,22 +32,27 @@ export function generateSubRequestCacheControlHeader(
 export async function getItemFromCache<T = any>(
   cache: Cache,
   key: string,
-): Promise<undefined | [T | string, Response]> {
-  if (!cache) return;
+): Promise<{value?: T; status: CacheStatus}> {
+  if (!cache) return {status: 'MISS'};
+
   const url = getKeyUrl(key);
   const request = new Request(url);
 
   const response = await CacheAPI.get(cache, request);
 
-  if (!response) {
-    return;
-  }
+  if (!response) return {status: 'MISS'};
 
-  const text = await response.text();
   try {
-    return [parseJSON(text), response];
+    const text = await response.text();
+    return {
+      value: text ? parseJSON(text) : undefined,
+      status: text
+        ? (response.headers.get('oxygen-cache-status') as null | CacheStatus) ??
+          (isStale(key, response) ? 'STALE' : 'HIT')
+        : 'MISS',
+    };
   } catch {
-    return [text, response];
+    return {value: undefined, status: 'MISS'};
   }
 }
 
@@ -66,6 +65,7 @@ export async function setItemInCache(
   key: string,
   value: any,
   userCacheOptions?: CachingStrategy,
+  tags?: string[],
 ) {
   if (!cache) return;
 

packages/hydrogen/src/storefront.ts

@@ -10,6 +10,7 @@ import {
 } from '@shopify/hydrogen-react';
 import type {WritableDeep} from 'type-fest';
 import {fetchWithServerCache, checkGraphQLErrors} from './cache/server-fetch';
+import type {CacheKey} from './cache/run-with-cache';
 import {
   SDK_VARIANT_HEADER,
   SDK_VARIANT_SOURCE_HEADER,
@@ -118,7 +119,8 @@ export type Storefront<TI18n extends I18nBase = I18nBase> = {
     ...options: ClientVariablesInRestParams<
       StorefrontQueries,
       RawGqlString,
-      StorefrontCommonExtraParams & Pick<StorefrontQueryOptions, 'cache'>,
+      StorefrontCommonExtraParams &
+        Pick<StorefrontQueryOptions, 'cache' | 'cacheKey'>,
       AutoAddedVariableNames
     >
   ) => Promise<
@@ -193,13 +195,28 @@ type StorefrontHeaders = {
 type StorefrontQueryOptions = StorefrontCommonExtraParams & {
   query: string;
   mutation?: never;
+  /**
+   * Cache strategy.
+   */
   cache?: CachingStrategy;
+  /**
+   * Unique key used for caching. Specify it only if you want
+   * to be able to manually invalidate by cache key later.
+   */
+  cacheKey?: CacheKey;
+  /**
+   * Tags to associate with this query. Useful to invalidate
+   * the cache by specifying one of the tags.
+   */
+  cacheTags?: string[];
 };
 
 type StorefrontMutationOptions = StorefrontCommonExtraParams & {
   query?: never;
   mutation: string;
   cache?: never;
+  cacheKey?: never;
+  cacheTags?: never;
 };
 
 const defaultI18n: I18nBase = {language: 'EN', country: 'US'};
@@ -281,6 +298,8 @@ export function createStorefrontClient<TI18n extends I18nBase>(
     storefrontApiVersion,
     displayName,
     stackInfo,
+    cacheKey,
+    cacheTags,
   }: {variables?: GenericVariables; stackInfo?: StackInfo} & (
     | StorefrontQueryOptions
     | StorefrontMutationOptions
@@ -316,18 +335,23 @@ export function createStorefrontClient<TI18n extends I18nBase>(
       body: graphqlData,
     } satisfies RequestInit;
 
-    const cacheKey = [
-      url,
-      requestInit.method,
-      cacheKeyHeader,
-      requestInit.body,
-    ];
+    const cacheParams = mutation
+      ? undefined
+      : {
+          cacheInstance: cache,
+          cache: cacheOptions ?? CacheDefault(),
+          cacheKey: cacheKey ?? [
+            url,
+            requestInit.method,
+            cacheKeyHeader,
+            requestInit.body,
+          ],
+          cacheTags,
+          shouldCacheResponse: checkGraphQLErrors,
+        };
 
     const [body, response] = await fetchWithServerCache(url, requestInit, {
-      cacheInstance: mutation ? undefined : cache,
-      cache: cacheOptions || CacheDefault(),
-      cacheKey,
-      shouldCacheResponse: checkGraphQLErrors,
+      ...cacheParams,
       waitUntil,
       debugInfo: {
         requestId: requestInit.headers[STOREFRONT_REQUEST_GROUP_ID_HEADER],

packages/hydrogen/src/utils/hash.ts

@@ -1,6 +1,8 @@
 type QueryKey = string | readonly unknown[];
 
-export function hashKey(queryKey: QueryKey): string {
+const encoder = new TextEncoder();
+
+export async function hashKey(queryKey: QueryKey): Promise<string> {
   const rawKeys = Array.isArray(queryKey) ? queryKey : [queryKey];
   let hash = '';
 
@@ -21,5 +23,16 @@ export function hashKey(queryKey: QueryKey): string {
     }
   }
 
-  return encodeURIComponent(hash);
+  const hashBuffer = await crypto.subtle.digest(
+    'sha-512',
+    encoder.encode(hash),
+  );
+
+  // Hex string
+  // return Array.from(new Uint8Array(hashBuffer))
+  //   .map((byte) => byte.toString(16).padStart(2, '0'))
+  //   .join('');
+
+  // B64 string
+  return btoa(String.fromCharCode(...new Uint8Array(hashBuffer)));
 }

packages/hydrogen/src/vite/request-events.ts

@@ -44,6 +44,7 @@ export type RequestEventPayload = {
     status?: string;
     strategy?: string;
     key?: string | readonly unknown[];
+    tags?: string[];
   };
   displayName?: string;
 };