Support withCache in debug-network for workerd

.changeset/unlucky-wolves-sing.md

@@ -0,0 +1,19 @@
+---
+'@shopify/hydrogen': patch
+---
+
+Calls to `withCache` can now be shown in the `/debug-network` tool when using the Worker runtime. For this to work, use the new `request` parameter in `createWithCache`:
+
+```diff
+export default {
+  fetch(request, env, executionContext) {
+    // ...
+    const withCache = createWithCache({
+      cache,
+      waitUntil,
++     request,
+    });
+    // ...
+  },
+}
+```

packages/hydrogen/src/cache/fetch.ts

@@ -15,8 +15,8 @@ import {
 export type CacheKey = string | readonly unknown[];
 
 export type FetchDebugInfo = {
-  requestId?: string;
-  graphql?: string;
+  requestId?: string | null;
+  graphql?: string | null;
   purpose?: string | null;
 };
 

packages/hydrogen/src/with-cache.example.js

@@ -9,7 +9,8 @@ export default {
     const cache = await caches.open('my-cms');
     const withCache = createWithCache({
       cache,
-      waitUntil: executionContext.waitUntil,
+      waitUntil: executionContext.waitUntil.bind(executionContext),
+      request,
     });
 
     // Create a custom utility to query a third-party API:

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

@@ -13,7 +13,8 @@ export default {
     const cache = await caches.open('my-cms');
     const withCache = createWithCache({
       cache,
-      waitUntil: executionContext.waitUntil,
+      waitUntil: executionContext.waitUntil.bind(executionContext),
+      request,
     });
 
     // Create a custom utility to query a third-party API:

packages/hydrogen/src/with-cache.ts

@@ -1,24 +1,39 @@
 import {type CacheKey, runWithCache} from './cache/fetch';
 import type {CachingStrategy} from './cache/strategies';
 
+type CrossRuntimeRequest = {
+  headers: {
+    get?: (key: string) => string | null | undefined;
+    [key: string]: any;
+  };
+};
+
 type CreateWithCacheOptions = {
   /** An instance that implements the [Cache API](https://developer.mozilla.org/en-US/docs/Web/API/Cache) */
   cache: Cache;
   /** The `waitUntil` function is used to keep the current request/response lifecycle alive even after a response has been sent. It should be provided by your platform. */
   waitUntil: ExecutionContext['waitUntil'];
+  /** The `request` object is used to access certain headers for debugging */
+  request?: CrossRuntimeRequest;
 };
 
+function getHeader(key: string, request?: CrossRuntimeRequest) {
+  const value = request?.headers?.get?.(key) ?? request?.headers?.[key];
+  return typeof value === 'string' ? value : undefined;
+}
+
 /**
  * Creates a utility function that executes an asynchronous operation
  * like `fetch` and caches the result according to the strategy provided.
  * Use this to call any third-party APIs from loaders or actions.
  * By default, it uses the `CacheShort` strategy.
  *
  */
-export function createWithCache<T = unknown>(
-  options: CreateWithCacheOptions,
-): CreateWithCacheReturn<T> {
-  const {cache, waitUntil} = options;
+export function createWithCache<T = unknown>({
+  cache,
+  waitUntil,
+  request,
+}: CreateWithCacheOptions): CreateWithCacheReturn<T> {
   return function withCache<T = unknown>(
     cacheKey: CacheKey,
     strategy: CachingStrategy,
@@ -28,7 +43,10 @@ export function createWithCache<T = unknown>(
       strategy,
       cacheInstance: cache,
       waitUntil,
-      debugInfo: {},
+      debugInfo: {
+        requestId: getHeader('request-id', request),
+        purpose: getHeader('purpose', request),
+      },
     });
   };
 }