Fix add-to-cart session event in Live View

.changeset/weak-sheep-sing.md

@@ -0,0 +1,40 @@
+---
+'@shopify/hydrogen-react': patch
+'@shopify/remix-oxygen': patch
+'@shopify/hydrogen': patch
+---
+
+Fix active cart session event in Live View
+
+Introducing `getStorefrontHeaders` that collects the required Shopify headers for making a
+Storefront API call.
+
+- Make cart constants available as exports from `@shopify/hydrogen-react`
+- Deprecating `buyerIp` and `requestGroupId` props from `createStorefrontClient` from `@shopify/hydrogen`
+- Deprecating `getBuyerIp` function from `@shopify/remix-oxygen`
+
+```diff
++ import {getStorefrontHeaders} from '@shopify/remix-oxygen';
+import {createStorefrontClient, storefrontRedirect} from '@shopify/hydrogen';
+
+export default {
+  async fetch(
+    request: Request,
+    env: Env,
+    executionContext: ExecutionContext,
+  ): Promise<Response> {
+
+    const {storefront} = createStorefrontClient({
+      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'),
++     storefrontHeaders: getStorefrontHeaders(request),
+    });
+```

packages/hydrogen-react/src/index.ts

@@ -17,6 +17,13 @@ export type {
   ShopifyPageViewPayload,
 } from './analytics-types.js';
 export {BuyNowButton} from './BuyNowButton.js';
+export {
+  SHOPIFY_S,
+  SHOPIFY_STOREFRONT_ID_HEADER,
+  SHOPIFY_STOREFRONT_S_HEADER,
+  SHOPIFY_STOREFRONT_Y_HEADER,
+  SHOPIFY_Y,
+} from './cart-constants.js';
 export type {
   Cart,
   CartAction,

packages/hydrogen/src/constants.ts

@@ -1,4 +1,3 @@
 export const STOREFRONT_REQUEST_GROUP_ID_HEADER =
   'Custom-Storefront-Request-Group-ID';
 export const STOREFRONT_API_BUYER_IP_HEADER = 'Shopify-Storefront-Buyer-IP';
-export const STOREFRONT_ID_HEADER = 'Shopify-Storefront-Id';

packages/hydrogen/src/storefront.ts

@@ -1,12 +1,17 @@
 import {
   createStorefrontClient as createStorefrontUtilities,
+  getShopifyCookies,
   type StorefrontApiResponseOk,
+  SHOPIFY_S,
+  SHOPIFY_Y,
+  SHOPIFY_STOREFRONT_ID_HEADER,
+  SHOPIFY_STOREFRONT_Y_HEADER,
+  SHOPIFY_STOREFRONT_S_HEADER,
 } from '@shopify/hydrogen-react';
 import type {ExecutionArgs} from 'graphql';
 import {fetchWithServerCache, checkGraphQLErrors} from './cache/fetch';
 import {
   STOREFRONT_API_BUYER_IP_HEADER,
-  STOREFRONT_ID_HEADER,
   STOREFRONT_REQUEST_GROUP_ID_HEADER,
 } from './constants';
 import {
@@ -73,14 +78,23 @@ export type Storefront<TI18n extends I18nBase = I18nBase> = {
 export type CreateStorefrontClientOptions<TI18n extends I18nBase> = Parameters<
   typeof createStorefrontUtilities
 >[0] & {
+  storefrontHeaders?: StorefrontHeaders;
   cache?: Cache;
+  /** @deprecated use storefrontHeaders instead */
   buyerIp?: string;
+  /** @deprecated use storefrontHeaders instead */
   requestGroupId?: string | null;
   storefrontId?: string;
   waitUntil?: ExecutionContext['waitUntil'];
   i18n?: TI18n;
 };
 
+type StorefrontHeaders = {
+  requestGroupId: string | null;
+  buyerIp: string | null;
+  cookie: string | null;
+};
+
 type StorefrontCommonOptions = {
   variables?: ExecutionArgs['variableValues'] & {
     country?: CountryCode;
@@ -119,6 +133,7 @@ function minifyQuery(string: string) {
 const defaultI18n: I18nBase = {language: 'EN', country: 'US'};
 
 export function createStorefrontClient<TI18n extends I18nBase>({
+  storefrontHeaders,
   cache,
   waitUntil,
   buyerIp,
@@ -148,11 +163,31 @@ export function createStorefrontClient<TI18n extends I18nBase>({
   const defaultHeaders = getHeaders({contentType: 'json'});
 
   defaultHeaders[STOREFRONT_REQUEST_GROUP_ID_HEADER] =
-    requestGroupId || generateUUID();
-  if (buyerIp) defaultHeaders[STOREFRONT_API_BUYER_IP_HEADER] = buyerIp;
-  if (storefrontId) defaultHeaders[STOREFRONT_ID_HEADER] = storefrontId;
+    storefrontHeaders?.requestGroupId || requestGroupId || generateUUID();
+
+  if (storefrontHeaders?.buyerIp || buyerIp)
+    defaultHeaders[STOREFRONT_API_BUYER_IP_HEADER] =
+      storefrontHeaders?.buyerIp || buyerIp || '';
+
+  if (storefrontId) defaultHeaders[SHOPIFY_STOREFRONT_ID_HEADER] = storefrontId;
   if (LIB_VERSION) defaultHeaders['user-agent'] = `Hydrogen ${LIB_VERSION}`;
 
+  if (storefrontHeaders && storefrontHeaders.cookie) {
+    const cookies = getShopifyCookies(storefrontHeaders.cookie ?? '');
+
+    if (cookies[SHOPIFY_Y])
+      defaultHeaders[SHOPIFY_STOREFRONT_Y_HEADER] = cookies[SHOPIFY_Y];
+    if (cookies[SHOPIFY_S])
+      defaultHeaders[SHOPIFY_STOREFRONT_S_HEADER] = cookies[SHOPIFY_S];
+  }
+
+  // Deprecation warning
+  if (!storefrontHeaders) {
+    warnOnce(
+      '"requestGroupId" and "buyerIp" will be deprecated in the next calendar release. Please use "getStorefrontHeaders"',
+    );
+  }
+
   async function fetchStorefrontApi<T>({
     query,
     mutation,
@@ -183,7 +218,7 @@ export function createStorefrontClient<TI18n extends I18nBase>({
     }
 
     const url = getStorefrontApiUrl({storefrontApiVersion});
-    const requestInit = {
+    const requestInit: RequestInit = {
       method: 'POST',
       headers: {...defaultHeaders, ...userHeaders},
       body: JSON.stringify({

packages/remix-oxygen/src/index.ts

@@ -5,7 +5,7 @@ export {
   createSessionStorage,
 } from './implementations';
 
-export {createRequestHandler, getBuyerIp} from './server';
+export {createRequestHandler, getBuyerIp, getStorefrontHeaders} from './server';
 
 export {
   createSession,

packages/remix-oxygen/src/server.ts

@@ -26,3 +26,18 @@ export function createRequestHandler<Context = unknown>({
 export function getBuyerIp(request: Request) {
   return request.headers.get('oxygen-buyer-ip') ?? undefined;
 }
+
+type StorefrontHeaders = {
+  requestGroupId: string | null;
+  buyerIp: string | null;
+  cookie: string | null;
+};
+
+export function getStorefrontHeaders(request: Request): StorefrontHeaders {
+  const headers = request.headers;
+  return {
+    requestGroupId: headers.get('request-id'),
+    buyerIp: headers.get('oxygen-buyer-ip'),
+    cookie: headers.get('cookie'),
+  };
+}

templates/demo-store/server.ts

@@ -1,6 +1,9 @@
 // Virtual entry point for the app
 import * as remixBuild from '@remix-run/dev/server-build';
-import {createRequestHandler, getBuyerIp} from '@shopify/remix-oxygen';
+import {
+  createRequestHandler,
+  getStorefrontHeaders,
+} from '@shopify/remix-oxygen';
 import {createStorefrontClient, storefrontRedirect} from '@shopify/hydrogen';
 import {HydrogenSession} from '~/lib/session.server';
 import {getLocaleFromRequest} from '~/lib/utils';
@@ -34,14 +37,13 @@ export default {
       const {storefront} = createStorefrontClient({
         cache,
         waitUntil,
-        buyerIp: getBuyerIp(request),
         i18n: getLocaleFromRequest(request),
         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'),
+        storefrontHeaders: getStorefrontHeaders(request),
       });
 
       /**

templates/hello-world/server.ts

@@ -3,7 +3,7 @@ import * as remixBuild from '@remix-run/dev/server-build';
 import {createStorefrontClient, storefrontRedirect} from '@shopify/hydrogen';
 import {
   createRequestHandler,
-  getBuyerIp,
+  getStorefrontHeaders,
   createCookieSessionStorage,
   type SessionStorage,
   type Session,
@@ -38,14 +38,13 @@ export default {
       const {storefront} = createStorefrontClient({
         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'),
+        storefrontHeaders: getStorefrontHeaders(request),
       });
 
       /**

templates/skeleton/server.ts

@@ -3,7 +3,7 @@ import * as remixBuild from '@remix-run/dev/server-build';
 import {createStorefrontClient, storefrontRedirect} from '@shopify/hydrogen';
 import {
   createRequestHandler,
-  getBuyerIp,
+  getStorefrontHeaders,
   createCookieSessionStorage,
   type SessionStorage,
   type Session,
@@ -38,14 +38,13 @@ export default {
       const {storefront} = createStorefrontClient({
         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'),
+        storefrontHeaders: getStorefrontHeaders(request),
       });
 
       /**