DO NOT MERGE: Add a caching test route

templates/demo-store/app/routes/($locale).products.$productHandle.tsx

@@ -1,6 +1,11 @@
 import {useRef, Suspense} from 'react';
 import {Disclosure, Listbox} from '@headlessui/react';
-import {defer, redirect, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+import {
+  MetaFunction,
+  defer,
+  redirect,
+  type LoaderFunctionArgs,
+} from '@shopify/remix-oxygen';
 import {useLoaderData, Await} from '@remix-run/react';
 import type {ShopifyAnalyticsProduct} from '@shopify/hydrogen';
 import {
@@ -39,6 +44,14 @@
 
 export const headers = routeHeaders;
 
+export const meta: MetaFunction = () => [
+  {
+    tagName: 'link',
+    rel: 'canonical',
+    href: 'https://remix.run',
+  },
+];
+
 export async function loader({params, request, context}: LoaderFunctionArgs) {
   const {productHandle} = params;
   invariant(productHandle, 'Missing productHandle param, check route filename');

templates/demo-store/app/routes/sub-request-cache.tsx

@@ -0,0 +1,61 @@
+import {type LoaderFunctionArgs, json} from '@remix-run/server-runtime';
+import {CacheLong} from '@shopify/hydrogen';
+
+import {PRODUCT_CARD_FRAGMENT} from '~/data/fragments';
+
+export async function loader({context}: LoaderFunctionArgs) {
+  const time = new Date();
+
+  const data = await context.storefront.query(ALL_PRODUCTS_QUERY, {
+    variables: {
+      first: 200,
+      country: context.storefront.i18n.country,
+      language: context.storefront.i18n.language,
+    },
+    cache: CacheLong(),
+  });
+
+  const storefrontQueryTime = new Date().getTime() - time.getTime();
+
+  console.log('Storefront query sub-request time: ', storefrontQueryTime);
+
+  const time2 = new Date();
+
+  await context.withCache('my-key', CacheLong(), async () => {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        resolve('hello');
+      }, 500);
+    });
+  });
+
+  const withCacheTime = new Date().getTime() - time2.getTime();
+
+  console.log('withCache sub-request time: ', withCacheTime);
+
+  return json({storefrontQueryTime, withCacheTime});
+}
+
+const ALL_PRODUCTS_QUERY = `#graphql
+  query AllProducts(
+    $country: CountryCode
+    $language: LanguageCode
+    $first: Int
+    $last: Int
+    $startCursor: String
+    $endCursor: String
+  ) @inContext(country: $country, language: $language) {
+    products(first: $first, last: $last, before: $startCursor, after: $endCursor) {
+      nodes {
+        ...ProductCard
+      }
+      pageInfo {
+        hasPreviousPage
+        hasNextPage
+        startCursor
+        endCursor
+      }
+    }
+  }
+  ${PRODUCT_CARD_FRAGMENT}
+` as const;

templates/demo-store/customer-accountapi.generated.d.ts

@@ -15,7 +15,7 @@ export type CustomerAddressUpdateMutation = {
   customerAddressUpdate?: CustomerAccountAPI.Maybe<{
     userErrors: Array<
       Pick<
-        CustomerAccountAPI.UserErrorsAddressUserErrors,
+        CustomerAccountAPI.UserErrorsCustomerAddressUserErrors,
         'code' | 'field' | 'message'
       >
     >;

templates/demo-store/remix.env.d.ts

@@ -37,6 +37,7 @@ declare module '@shopify/remix-oxygen' {
     customerAccount: CustomerAccount;
     cart: HydrogenCart;
     env: Env;
+    withCache: WithCache;
   }
 }
 

templates/demo-store/server.ts

@@ -9,6 +9,7 @@ import {
   cartSetIdDefault,
   createCartHandler,
   createStorefrontClient,
+  createWithCache,
   storefrontRedirect,
   createCustomerAccountClient,
 } from '@shopify/hydrogen';
@@ -70,6 +71,8 @@ export default {
         setCartId: cartSetIdDefault(),
       });
 
+      const withCache = createWithCache({cache, waitUntil});
+
       /**
        * Create a Remix request handler and pass
        * Hydrogen's Storefront client to the loader context.
@@ -84,6 +87,7 @@ export default {
           customerAccount,
           cart,
           env,
+          withCache,
         }),
       });