Fix add-to-cart session event in Live View

.changeset/weak-sheep-sing.md

@@ -0,0 +1,30 @@
+---
+'@shopify/hydrogen': patch
+---
+
+Fix active cart session event in Live View
+
+In order for active cart to work, make sure to pass `request` into `createStorefrontClient`
+
+```diff
+export default {
+  async fetch(
+    request: Request,
+    env: Env,
+    executionContext: ExecutionContext,
+  ): Promise<Response> {
+
+    const {storefront} = createStorefrontClient({
++     request,
+      cache,
+      waitUntil,
+      buyerIp: getBuyerIp(request),
+      i18n: {language: 'EN', country: 'US'},
+      publicStorefrontToken: env.PUBLIC_STOREFRONT_API_TOKEN,
+      privateStorefrontToken: env.PRIVATE_STOREFRONT_API_TOKEN,
+      storeDomain: `https://${env.PUBLIC_STORE_DOMAIN}`,
+      storefrontApiVersion: env.PUBLIC_STOREFRONT_API_VERSION || '2023-01',
+      storefrontId: env.PUBLIC_STOREFRONT_ID,
+      requestGroupId: request.headers.get('request-id'),
+    });
+```

packages/hydrogen/src/storefront.ts

@@ -1,5 +1,6 @@
 import {
   createStorefrontClient as createStorefrontUtilities,
+  getShopifyCookies,
   type StorefrontApiResponseOk,
 } from '@shopify/hydrogen-react';
 import type {ExecutionArgs} from 'graphql';
@@ -73,6 +74,7 @@ export type Storefront<TI18n extends I18nBase = I18nBase> = {
 export type CreateStorefrontClientOptions<TI18n extends I18nBase> = Parameters<
   typeof createStorefrontUtilities
 >[0] & {
+  request?: Request;
   cache?: Cache;
   buyerIp?: string;
   requestGroupId?: string | null;
@@ -116,9 +118,12 @@ function minifyQuery(string: string) {
     .trim();
 }
 
+const SHOPIFY_Y = '_shopify_y';
+const SHOPIFY_S = '_shopify_s';
 const defaultI18n: I18nBase = {language: 'EN', country: 'US'};
 
 export function createStorefrontClient<TI18n extends I18nBase>({
+  request,
   cache,
   waitUntil,
   buyerIp,
@@ -153,6 +158,15 @@ export function createStorefrontClient<TI18n extends I18nBase>({
   if (storefrontId) defaultHeaders[STOREFRONT_ID_HEADER] = storefrontId;
   if (LIB_VERSION) defaultHeaders['user-agent'] = `Hydrogen ${LIB_VERSION}`;
 
+  if (request && request.headers.has('cookie')) {
+    const cookies = getShopifyCookies(request.headers.get('cookie') || '');
+
+    if (cookies[SHOPIFY_Y])
+      defaultHeaders['Shopify-Storefront-Y'] = cookies[SHOPIFY_Y];
+    if (cookies[SHOPIFY_S])
+      defaultHeaders['Shopify-Storefront-S'] = cookies[SHOPIFY_S];
+  }
+
   async function fetchStorefrontApi<T>({
     query,
     mutation,
@@ -183,7 +197,7 @@ export function createStorefrontClient<TI18n extends I18nBase>({
     }
 
     const url = getStorefrontApiUrl({storefrontApiVersion});
-    const requestInit = {
+    const requestInit: RequestInit = {
       method: 'POST',
       headers: {...defaultHeaders, ...userHeaders},
       body: JSON.stringify({

templates/demo-store/.env

@@ -3,4 +3,4 @@
 SESSION_SECRET="foobar"
 PUBLIC_STOREFRONT_API_TOKEN="3b580e70970c4528da70c98e097c2fa0"
 PUBLIC_STOREFRONT_API_VERSION="2023-01"
-PUBLIC_STORE_DOMAIN="hydrogen-preview.myshopify.com"
+PUBLIC_STORE_DOMAIN="checkout.hydrogen.shop"

templates/demo-store/server.ts

@@ -32,6 +32,7 @@ export default {
        * Create Hydrogen's Storefront client.
        */
       const {storefront} = createStorefrontClient({
+        request,
         cache,
         waitUntil,
         buyerIp: getBuyerIp(request),

templates/hello-world/server.ts

@@ -36,6 +36,7 @@ export default {
        * Create Hydrogen's Storefront client.
        */
       const {storefront} = createStorefrontClient({
+        request,
         cache,
         waitUntil,
         buyerIp: getBuyerIp(request),

templates/skeleton/server.ts

@@ -36,6 +36,7 @@ export default {
        * Create Hydrogen's Storefront client.
        */
       const {storefront} = createStorefrontClient({
+        request,
         cache,
         waitUntil,
         buyerIp: getBuyerIp(request),