@shopify/hydrogen 0.19.0 → 0.22.0

package/CHANGELOG.md

@@ -1,5 +1,208 @@
 # Changelog
 
+## 0.22.0
+
+### Minor Changes
+
+- [#930](https://github.com/Shopify/hydrogen/pull/930) [`750baf8f`](https://github.com/Shopify/hydrogen/commit/750baf8ff069d0e06fb92e78a142049a1ce2b1ae) Thanks [@michenly](https://github.com/michenly)! - With the introduction of authenticated pages, we also now provide the ability to prevent pages from being indexed by bots. You can do so by passing `noindex` to the `Seo` component:
+
+  ```jsx
+  <Seo type="noindex" data={{title: 'Login'}} />
+  ```
+
+* [#1313](https://github.com/Shopify/hydrogen/pull/1313) [`ed1933e3`](https://github.com/Shopify/hydrogen/commit/ed1933e339927322d8008034982b05ff4590e6d8) Thanks [@frandiox](https://github.com/frandiox)! - **Breaking change**: The `routes` property in `hydrogen.config.js` file has been simplified. It is now a string that represents the path to the routes from the project root:
+
+  ```diff
+  // hydrogen.config.js
+
+  export default defineConfig({
+  -  routes: import('./src/routes/**/*.server.[jt](s|sx)'),
+  +  routes: '/src/routes',
+  });
+  ```
+
+  Its default value is `/src/routes` so this property can be removed when using this directory.
+
+  In the object syntax version, `dirPrefix` is removed and `files` becomes a string:
+
+  ```diff
+  // hydrogen.config.js
+
+  export default defineConfig({
+    routes: {
+  -   files: import('./src/routes/**/*.server.[jt](s|sx)'),
+  -   dirPrefix: './src/routes',
+  +   files: '/src/routes',
+      basePath: '/',
+    },
+  });
+  ```
+
+- [#1332](https://github.com/Shopify/hydrogen/pull/1332) [`5ec1bc62`](https://github.com/Shopify/hydrogen/commit/5ec1bc62cf9e4348aa389d4154f8c80dccfb96bb) Thanks [@frandiox](https://github.com/frandiox)! - A new `gql` utility is exported from `@shopify/hydrogen` that replaces `graphql-tag` dependency when using `useShopQuery`. It helps reducing bundle size in production when compared to the original `graphql-tag`.
+
+  Before:
+
+  ```js
+  import gql from 'graphql-tag';
+
+  // ...
+
+  useShopQuery({
+    query: gql`...`,
+    // ...
+  });
+  ```
+
+  After:
+
+  ```js
+  import {gql} from '@shopify/hydrogen';
+
+  // ...
+
+  useShopQuery({
+    query: gql`...`,
+    // ...
+  });
+  ```
+
+* [#1340](https://github.com/Shopify/hydrogen/pull/1340) [`631832ec`](https://github.com/Shopify/hydrogen/commit/631832ecaef26b918e774515ada6b80668ec5e4e) Thanks [@jplhomer](https://github.com/jplhomer)! - **Breaking change**: The `response.send()` function has been removed. Use `export async function api()` to send custom responses instead.
+
+### Patch Changes
+
+- [#1371](https://github.com/Shopify/hydrogen/pull/1371) [`84a2fd09`](https://github.com/Shopify/hydrogen/commit/84a2fd09b7150b1d5e1f92b786f4a6af09e18739) Thanks [@frehner](https://github.com/frehner)! - Made updates to `<Image/>`:
+
+  - Fixed some TypeScript type issues with Image.
+  - `data.url` and `alt` are now required props in Typescript, but won't break the actual component if you don't pass them.
+
+* [#1348](https://github.com/Shopify/hydrogen/pull/1348) [`211093e5`](https://github.com/Shopify/hydrogen/commit/211093e5f1a9e2ad115eb667746bfa2c6dd05b82) Thanks [@developit](https://github.com/developit)! - Fix HTML double-decoding in flight response
+
+- [#1345](https://github.com/Shopify/hydrogen/pull/1345) [`331ff3c0`](https://github.com/Shopify/hydrogen/commit/331ff3c0f58143df3e7c542116f9a94838710352) Thanks [@frandiox](https://github.com/frandiox)! - Reduce the amount of user app files downloaded in the browser.
+
+* [#1322](https://github.com/Shopify/hydrogen/pull/1322) [`36bd77c4`](https://github.com/Shopify/hydrogen/commit/36bd77c4619ec071ea11b764bb16b5670b0afa6b) Thanks [@frandiox](https://github.com/frandiox)! - Fix server hanging in Node.js environment when not using Hydrogen Middleware.
+
+- [#1360](https://github.com/Shopify/hydrogen/pull/1360) [`d9b0d03b`](https://github.com/Shopify/hydrogen/commit/d9b0d03b64d2207b314d15fc0acf6a5143610b92) Thanks [@blittle](https://github.com/blittle)! - Fix a problem where encoded html content props passed from server to client components would get double decoded, and break hydration on app load.
+
+* [#1355](https://github.com/Shopify/hydrogen/pull/1355) [`c45a45e8`](https://github.com/Shopify/hydrogen/commit/c45a45e895b8407da04c6b4608e7f16170452c24) Thanks [@jplhomer](https://github.com/jplhomer)! - Ensure all Hydrogen components are exported properly
+
+- [#1339](https://github.com/Shopify/hydrogen/pull/1339) [`fef4cb84`](https://github.com/Shopify/hydrogen/commit/fef4cb8496d985d37b6113865ac1252f78058aaa) Thanks [@jplhomer](https://github.com/jplhomer)! - Use `import.meta.env.DEV` instead of `process.env.LOCAL_DEV` to hash asset filenames and show performance metrics debugging
+
+* [#1320](https://github.com/Shopify/hydrogen/pull/1320) [`7e9df897`](https://github.com/Shopify/hydrogen/commit/7e9df897465012cd0cf374a1a35deb2ca8a16fc3) Thanks [@jplhomer](https://github.com/jplhomer)! - Properly log errors during flight responses
+
+- [#1363](https://github.com/Shopify/hydrogen/pull/1363) [`0941d3be`](https://github.com/Shopify/hydrogen/commit/0941d3be12b52edc045b898864435f591fc2c42e) Thanks [@frandiox](https://github.com/frandiox)! - Remove some server utilities from client build.
+
+## 0.21.0
+
+### Minor Changes
+
+- [#1327](https://github.com/Shopify/hydrogen/pull/1327) [`ce56311f`](https://github.com/Shopify/hydrogen/commit/ce56311fc1b63df22f77b199980439548f76997a) Thanks [@frehner](https://github.com/frehner)! - **Breaking Change**: `<Money />` updates and `<UnitPrice />` Removed.
+
+  - `<UnitPrice/>` has been removed
+  - `<Money/>` has two new props: `measurement` and `measurementSeparator` which do the work that `UnitPrice` used to do
+  - The TypeScript types for `<Money/>` have been improved and should provide a better typed experience now
+
+* [#1216](https://github.com/Shopify/hydrogen/pull/1216) [`771786a6`](https://github.com/Shopify/hydrogen/commit/771786a6475c4caadb1abe5f6644e2b5c2abc021) Thanks [@wizardlyhel](https://github.com/wizardlyhel)! - Fixes an issue where cached sub-requests were not revalidating properly.
+
+- [#1304](https://github.com/Shopify/hydrogen/pull/1304) [`aa196150`](https://github.com/Shopify/hydrogen/commit/aa19615024de4fe16d548429665a863e9aae0248) Thanks [@frehner](https://github.com/frehner)! - Removed `<ProductTitle/>` and `<ProductDescription/>` components. To migrate, use `{product.title}` and `{product.description}` instead.
+
+* [#1335](https://github.com/Shopify/hydrogen/pull/1335) [`0d90f92b`](https://github.com/Shopify/hydrogen/commit/0d90f92b448b0c4d99be3e5f5fa25d0b70a8315e) Thanks [@blittle](https://github.com/blittle)! - **Breaking Change**
+
+  The `<ProductMetafield />` component has been removed. Instead, directly use the `<Metafield>` component.
+
+### Patch Changes
+
+- [#1311](https://github.com/Shopify/hydrogen/pull/1311) [`3e3fd72f`](https://github.com/Shopify/hydrogen/commit/3e3fd72f7016c0993deceefc121306cf957ef564) Thanks [@jplhomer](https://github.com/jplhomer)! - Client components no longer need to use `@shopify/hydrogen/client` as the import path. All Hydrogen components can now be imported from `@shopify/hydrogen` regardless of their context.
+
+* [#1259](https://github.com/Shopify/hydrogen/pull/1259) [`110e9aca`](https://github.com/Shopify/hydrogen/commit/110e9aca385d553e3a87fea406f8bd8a43a0788f) Thanks [@blittle](https://github.com/blittle)! - You can now easily disable streaming on any page conditionally with the `enableStreaming` option inside `hydrogen.config.js`:
+
+  ```ts
+  import {CookieSessionStorage} from '@shopify/hydrogen';
+  import {defineConfig} from '@shopify/hydrogen/config';
+
+  export default defineConfig({
+    routes: import.meta.globEager('./src/routes/**/*.server.[jt](s|sx)'),
+    shopify: {
+      defaultLocale: 'en-us',
+      storeDomain: 'hydrogen-preview.myshopify.com',
+      storefrontToken: '3b580e70970c4528da70c98e097c2fa0',
+      storefrontApiVersion: '2022-07',
+    },
+    enableStreaming: (req) => req.headers.get('user-agent') !== 'custom bot',
+  });
+  ```
+
+  By default all pages are stream rendered except for SEO bots. There shouldn't be many reasons to disable streaming, unless there is a custom bot not covered by Hydrogen's bot detection.
+
+- [#1318](https://github.com/Shopify/hydrogen/pull/1318) [`668a24da`](https://github.com/Shopify/hydrogen/commit/668a24daebf180747a002c8020c2e712f5d9a458) Thanks [@blittle](https://github.com/blittle)! - Buffer RSC flight responses. There isn't any benefit to streaming them, because we start a transition on page navigation. Buffering also fixes caching problems on the flight response.
+
+* [#1293](https://github.com/Shopify/hydrogen/pull/1293) [`e378ed61`](https://github.com/Shopify/hydrogen/commit/e378ed6199553f64d9e73ad27f9409ef501aa724) Thanks [@jplhomer](https://github.com/jplhomer)! - Reverts [#1272](https://github.com/Shopify/hydrogen/pull/1272) and properly escapes terminating script sequences
+
+- [#1283](https://github.com/Shopify/hydrogen/pull/1283) [`eea82cb0`](https://github.com/Shopify/hydrogen/commit/eea82cb02064471d274e534c557caa5d3527bc93) Thanks [@jplhomer](https://github.com/jplhomer)! - Hydrogen has been updated to use the latest stable version of React.
+
+  To update an existing Hydrogen app:
+
+  ```bash
+  yarn add react@latest react-dom@latest
+  ```
+
+## 0.20.0
+
+### Minor Changes
+
+- [#1257](https://github.com/Shopify/hydrogen/pull/1257) [`5cd7a672`](https://github.com/Shopify/hydrogen/commit/5cd7a6727befe1e06f35b9ec68d4c81a8858d46f) Thanks [@frandiox](https://github.com/frandiox)! - Support for CSS Modules has been improved. It now behaves closer to the default behavior in Vite where styles are collected automatically.
+
+  Remove the `StyleTag` component that was needed before:
+
+  ```diff
+  export default function MyComponent() {
+    return (
+      <div>
+  -      <myStyles.StyleTag />
+        <h1>Title</h1>
+      </div>
+    );
+  }
+  ```
+
+  Optionally, update your wildcard imports to default or named imports:
+
+  ```diff
+  -import * as myStyles from './my.module.css';
+  +import myStyles from './my.module.css';
+  // Or
+  +import {red, green, blue} from './my.module.css';
+  ```
+
+* [#1271](https://github.com/Shopify/hydrogen/pull/1271) [`9d0359b8`](https://github.com/Shopify/hydrogen/commit/9d0359b87b0cfa04f12ffa9376e5b8ad72c560a3) Thanks [@frehner](https://github.com/frehner)! - ## `<Image/>`
+
+  The `<Image/>` component and related utility functions were reworked and the following changes apply:
+
+  - `useImageUrl` is no longer available; use `shopifyImageLoader` instead, which is available to run both server- and client-side.
+  - The TypeScript experience with `<Image/>` is improved; props will be validated better, and `loader` and `loaderOptions` will be better typed
+  - When using the `src` prop, `width` and `height` are now required
+  - When using the `data` prop, `data.width` and `data.height` or `width` and `height` props are required
+  - The `src` and `data` props are mutually exclusive
+  - The `loader` prop now receives a singular param as an object
+  - `options` has been merged with `loaderOptions`. When using the `data` prop, `loaderOptions` will be the options for Shopify CDN images. When using the `src` prop, `loaderOptions` will be whatever you define them to be.
+  - The TypeScript type `ImageSizeOptions` is now named `ShopifyLoaderOptions`
+  - The TypeScript type `ImageLoaderOptions` is now named `ShopifyLoaderParams`
+  - The `priority` prop was removed; use the HTML-standard `loading` prop instead
+
+  ## `<Video/>`
+
+  - The `<Video/>` component's `options` props was renamed to `imagePreviewOptions` to add clarity as to what the options were for.
+  - `imagePreviewOptions` matches the (newly updated) shape of `<Image/>`'s `loaderOptions`
+
+- [#1290](https://github.com/Shopify/hydrogen/pull/1290) [`437b1616`](https://github.com/Shopify/hydrogen/commit/437b1616fcfa15d8b4b2c033b364b2f74b99d6e4) Thanks [@jplhomer](https://github.com/jplhomer)! - Allow cart queries to be customized by adding a new `cartFragment` prop to `CartProvider`. [Learn more](https://shopify.dev/api/hydrogen/components/cart/cartprovider#cart-fragment).
+
+### Patch Changes
+
+- [#1247](https://github.com/Shopify/hydrogen/pull/1247) [`ee64873e`](https://github.com/Shopify/hydrogen/commit/ee64873ece372f9be2d6eb08b0594a91f4ed135a) Thanks [@frandiox](https://github.com/frandiox)! - Improve the way client components are discovered in order to reduce bundle sizes.
+
+* [#1276](https://github.com/Shopify/hydrogen/pull/1276) [`c6ce6a43`](https://github.com/Shopify/hydrogen/commit/c6ce6a43bbb944b67aec5fdc7e5566768846dac5) Thanks [@frandiox](https://github.com/frandiox)! - Fix page loading in Firefox during development ([known bug](https://bugzilla.mozilla.org/show_bug.cgi?id=1737882)).
+
+- [#1286](https://github.com/Shopify/hydrogen/pull/1286) [`53270249`](https://github.com/Shopify/hydrogen/commit/5327024995ff7b8823ddb8ea835b3a5b95175841) Thanks [@jplhomer](https://github.com/jplhomer)! - Fix some sourcemap warnings in server console
+
 ## 0.19.0
 
 ### Minor Changes

package/config.d.ts

@@ -0,0 +1 @@
+export * from './dist/esnext/config';

package/dist/esnext/client.d.ts

@@ -6,6 +6,7 @@ export * from './foundation/ServerPropsProvider';
 export * from './foundation/useUrl';
 export { Head } from './foundation/Head';
 export * from './utilities';
+export { gql } from './utilities/graphql-tag';
 export { ClientAnalytics } from './foundation/Analytics';
 export { useRouteParams } from './foundation/useRouteParams/useRouteParams';
 export { useNavigate } from './foundation/useNavigate/useNavigate';

package/dist/esnext/client.js

@@ -6,6 +6,7 @@ export * from './foundation/ServerPropsProvider';
 export * from './foundation/useUrl';
 export { Head } from './foundation/Head';
 export * from './utilities';
+export { gql } from './utilities/graphql-tag';
 export { ClientAnalytics } from './foundation/Analytics';
 export { useRouteParams } from './foundation/useRouteParams/useRouteParams';
 export { useNavigate } from './foundation/useNavigate/useNavigate';

package/dist/esnext/components/CartEstimatedCost/CartEstimatedCost.client.d.ts

@@ -11,4 +11,4 @@ export interface CartEstimatedCostProps {
  * cost associated with the `amountType` prop. If no `amountType` prop is specified, then it defaults to `totalAmount`.
  * If `children` is a function, then it will pass down the render props provided by the parent component.
  */
-export declare function CartEstimatedCost<TTag extends keyof JSX.IntrinsicElements>(props: Omit<React.ComponentProps<typeof Money>, 'data'> & CartEstimatedCostProps): JSX.Element | null;
+export declare function CartEstimatedCost(props: Omit<React.ComponentProps<typeof Money>, 'data'> & CartEstimatedCostProps): JSX.Element | null;

package/dist/esnext/components/CartLineImage/CartLineImage.client.d.ts

@@ -1,12 +1,9 @@
-import React from 'react';
-import { Image } from '../Image';
-import { ImageSizeOptions } from '../../utilities';
-declare type PropsWeControl = 'data' | 'options';
+import { type ShopifyImageProps } from '../Image';
+import type { Simplify } from 'type-fest';
+declare type PropsWeControl = 'data';
 /**
  * The `CartLineImage` component renders an `Image` component for the cart line merchandise's image.
  * It must be a descendent of a `CartLineProvider` component.
  */
-export declare function CartLineImage(props: Omit<React.ComponentProps<typeof Image>, PropsWeControl> & {
-    options?: ImageSizeOptions;
-}): JSX.Element | null;
+export declare function CartLineImage(props: Simplify<Omit<ShopifyImageProps, PropsWeControl>>): JSX.Element | null;
 export {};

package/dist/esnext/components/CartLineImage/CartLineImage.client.js

@@ -7,6 +7,5 @@ import { Image } from '../Image';
  */
 export function CartLineImage(props) {
     const cartLine = useCartLine();
-    const { options, ...passthroughProps } = props;
-    return cartLine.merchandise.image ? (React.createElement(Image, { ...passthroughProps, data: cartLine.merchandise.image, options: options })) : null;
+    return cartLine.merchandise.image ? (React.createElement(Image, { ...props, data: cartLine.merchandise.image })) : null;
 }

package/dist/esnext/components/CartLinePrice/CartLinePrice.client.d.ts

@@ -8,5 +8,5 @@ interface CartLinePriceProps {
  * The `CartLinePrice` component renders a `Money` component for the cart line merchandise's price or
  * compare at price. It must be a descendent of a `CartLineProvider` component.
  */
-export declare function CartLinePrice<TTag extends keyof JSX.IntrinsicElements>(props: Omit<React.ComponentProps<typeof Money>, 'data'> & CartLinePriceProps): JSX.Element | null;
+export declare function CartLinePrice(props: Omit<React.ComponentProps<typeof Money>, 'data'> & CartLinePriceProps): JSX.Element | null;
 export {};

package/dist/esnext/components/CartProvider/CartProvider.client.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { CartBuyerIdentityInput, CountryCode } from '../../storefront-api-types';
 import { CartFragmentFragment } from './graphql/CartFragment';
 /**
  * The `CartProvider` component creates a context for using a cart. It creates a cart object and callbacks
@@ -9,7 +10,7 @@ import { CartFragmentFragment } from './graphql/CartFragment';
  * The `CartProvider` component must be a descendent of the `ShopifyProvider` component.
  * You must use this component if you want to use the `useCart` hook or related hooks, or if you would like to use the `AddToCartButton` component.
  */
-export declare function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLineRemove, onLineUpdate, onNoteUpdate, onBuyerIdentityUpdate, onAttributesUpdate, onDiscountCodesUpdate, data: cart, }: {
+export declare function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLineRemove, onLineUpdate, onNoteUpdate, onBuyerIdentityUpdate, onAttributesUpdate, onDiscountCodesUpdate, data: cart, cartFragment, customerAccessToken, countryCode, }: {
     /** Any `ReactNode` elements. */
     children: React.ReactNode;
     numCartLines?: number;
@@ -29,8 +30,12 @@ export declare function CartProvider({ children, numCartLines, onCreate, onLineA
     onAttributesUpdate?: () => void;
     /** A callback that is invoked when the process to update the cart discount codes begins, but before the discount codes are updated in the Storefront API. */
     onDiscountCodesUpdate?: () => void;
-    /**
-     * An object with fields that correspond to the Storefront API's [Cart object](https://shopify.dev/api/storefront/latest/objects/cart).
-     */
+    /** An object with fields that correspond to the Storefront API's [Cart object](https://shopify.dev/api/storefront/latest/objects/cart). */
     data?: CartFragmentFragment;
+    /** A fragment used to query the Storefront API's [Cart object](https://shopify.dev/api/storefront/latest/objects/cart) for all queries and mutations. A default value is used if no argument is provided. */
+    cartFragment?: string;
+    /** A customer access token that's accessible on the server if there's a customer login. */
+    customerAccessToken?: CartBuyerIdentityInput['customerAccessToken'];
+    /** The ISO country code for i18n. */
+    countryCode?: CountryCode;
 }): JSX.Element;

package/dist/esnext/components/CartProvider/CartProvider.client.js

@@ -1,11 +1,11 @@
 import React, { useEffect, useCallback, useReducer, useMemo, useRef, } from 'react';
-import { flattenConnection } from '../../utilities';
-import { CartLineAdd, CartCreate, CartLineRemove, CartLineUpdate, CartNoteUpdate, CartBuyerIdentityUpdate, CartAttributesUpdate, CartDiscountCodesUpdate, CartQuery, } from './cart-queries';
+import { flattenConnection } from '../../utilities/flattenConnection';
+import { CartLineAdd, CartCreate, CartLineRemove, CartLineUpdate, CartNoteUpdate, CartBuyerIdentityUpdate, CartAttributesUpdate, CartDiscountCodesUpdate, CartQuery, defaultCartFragment, } from './cart-queries';
+import { CountryCode, } from '../../storefront-api-types';
 import { useCartFetch } from './hooks.client';
 import { CartContext } from './context';
 import { CART_ID_STORAGE_KEY } from './constants';
-import { useServerProps } from '../../foundation/useServerProps';
-import { ClientAnalytics } from '../../foundation/Analytics';
+import { ClientAnalytics } from '../../foundation/Analytics/ClientAnalytics';
 function cartReducer(state, action) {
     switch (action.type) {
         case 'cartFetch': {
@@ -150,10 +150,7 @@ function cartReducer(state, action) {
  * The `CartProvider` component must be a descendent of the `ShopifyProvider` component.
  * You must use this component if you want to use the `useCart` hook or related hooks, or if you would like to use the `AddToCartButton` component.
  */
-export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLineRemove, onLineUpdate, onNoteUpdate, onBuyerIdentityUpdate, onAttributesUpdate, onDiscountCodesUpdate, data: cart, }) {
-    var _a;
-    const { serverProps } = useServerProps();
-    const countryCode = (_a = serverProps === null || serverProps === void 0 ? void 0 : serverProps.country) === null || _a === void 0 ? void 0 : _a.isoCode;
+export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLineRemove, onLineUpdate, onNoteUpdate, onBuyerIdentityUpdate, onAttributesUpdate, onDiscountCodesUpdate, data: cart, cartFragment = defaultCartFragment, customerAccessToken, countryCode = CountryCode.Us, }) {
     const initialStatus = cart
         ? { status: 'idle', cart: cartFromGraphQL(cart) }
         : { status: 'uninitialized' };
@@ -162,7 +159,7 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
     const cartFetch = useCallback(async (cartId) => {
         dispatch({ type: 'cartFetch' });
         const { data } = await fetchCart({
-            query: CartQuery,
+            query: CartQuery(cartFragment),
             variables: {
                 id: cartId,
                 numCartLines,
@@ -175,9 +172,9 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
             return;
         }
         dispatch({ type: 'resolve', cart: cartFromGraphQL(data.cart) });
-    }, [fetchCart, numCartLines, countryCode]);
+    }, [fetchCart, cartFragment, numCartLines, countryCode]);
     const cartCreate = useCallback(async (cart) => {
-        var _a, _b;
+        var _a, _b, _c;
         dispatch({ type: 'cartCreate' });
         onCreate === null || onCreate === void 0 ? void 0 : onCreate();
         if (countryCode && !((_a = cart.buyerIdentity) === null || _a === void 0 ? void 0 : _a.countryCode)) {
@@ -186,8 +183,14 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
             }
             cart.buyerIdentity.countryCode = countryCode;
         }
+        if (customerAccessToken && !((_b = cart.buyerIdentity) === null || _b === void 0 ? void 0 : _b.customerAccessToken)) {
+            if (cart.buyerIdentity == null) {
+                cart.buyerIdentity = {};
+            }
+            cart.buyerIdentity.customerAccessToken = customerAccessToken;
+        }
         const { data, error } = await fetchCart({
-            query: CartCreate,
+            query: CartCreate(cartFragment),
             variables: {
                 input: cart,
                 numCartLines,
@@ -200,7 +203,7 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
                 error,
             });
         }
-        if ((_b = data === null || data === void 0 ? void 0 : data.cartCreate) === null || _b === void 0 ? void 0 : _b.cart) {
+        if ((_c = data === null || data === void 0 ? void 0 : data.cartCreate) === null || _c === void 0 ? void 0 : _c.cart) {
             if (cart.lines) {
                 ClientAnalytics.publish(ClientAnalytics.eventNames.ADD_TO_CART, true, {
                     addedCartLines: cart.lines,
@@ -213,14 +216,21 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
             });
             window.localStorage.setItem(CART_ID_STORAGE_KEY, data.cartCreate.cart.id);
         }
-    }, [onCreate, fetchCart, numCartLines, countryCode]);
+    }, [
+        onCreate,
+        countryCode,
+        fetchCart,
+        cartFragment,
+        numCartLines,
+        customerAccessToken,
+    ]);
     const addLineItem = useCallback(async (lines, state) => {
         var _a;
         if (state.status === 'idle') {
             dispatch({ type: 'addLineItem' });
             onLineAdd === null || onLineAdd === void 0 ? void 0 : onLineAdd();
             const { data, error } = await fetchCart({
-                query: CartLineAdd,
+                query: CartLineAdd(cartFragment),
                 variables: {
                     cartId: state.cart.id,
                     lines,
@@ -245,14 +255,14 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
                 });
             }
         }
-    }, [fetchCart, numCartLines, onLineAdd, countryCode]);
+    }, [onLineAdd, fetchCart, cartFragment, numCartLines, countryCode]);
     const removeLineItem = useCallback(async (lines, state) => {
         var _a;
         if (state.status === 'idle') {
             dispatch({ type: 'removeLineItem', lines });
             onLineRemove === null || onLineRemove === void 0 ? void 0 : onLineRemove();
             const { data, error } = await fetchCart({
-                query: CartLineRemove,
+                query: CartLineRemove(cartFragment),
                 variables: {
                     cartId: state.cart.id,
                     lines,
@@ -277,14 +287,14 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
                 });
             }
         }
-    }, [fetchCart, onLineRemove, numCartLines, countryCode]);
+    }, [onLineRemove, fetchCart, cartFragment, numCartLines, countryCode]);
     const updateLineItem = useCallback(async (lines, state) => {
         var _a;
         if (state.status === 'idle') {
             dispatch({ type: 'updateLineItem', lines });
             onLineUpdate === null || onLineUpdate === void 0 ? void 0 : onLineUpdate();
             const { data, error } = await fetchCart({
-                query: CartLineUpdate,
+                query: CartLineUpdate(cartFragment),
                 variables: {
                     cartId: state.cart.id,
                     lines,
@@ -309,14 +319,14 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
                 });
             }
         }
-    }, [fetchCart, onLineUpdate, numCartLines, countryCode]);
+    }, [onLineUpdate, fetchCart, cartFragment, numCartLines, countryCode]);
     const noteUpdate = useCallback(async (note, state) => {
         var _a;
         if (state.status === 'idle') {
             dispatch({ type: 'noteUpdate' });
             onNoteUpdate === null || onNoteUpdate === void 0 ? void 0 : onNoteUpdate();
             const { data, error } = await fetchCart({
-                query: CartNoteUpdate,
+                query: CartNoteUpdate(cartFragment),
                 variables: {
                     cartId: state.cart.id,
                     note,
@@ -337,14 +347,14 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
                 });
             }
         }
-    }, [fetchCart, onNoteUpdate, numCartLines, countryCode]);
+    }, [onNoteUpdate, fetchCart, cartFragment, numCartLines, countryCode]);
     const buyerIdentityUpdate = useCallback(async (buyerIdentity, state) => {
         var _a;
         if (state.status === 'idle') {
             dispatch({ type: 'buyerIdentityUpdate' });
             onBuyerIdentityUpdate === null || onBuyerIdentityUpdate === void 0 ? void 0 : onBuyerIdentityUpdate();
             const { data, error } = await fetchCart({
-                query: CartBuyerIdentityUpdate,
+                query: CartBuyerIdentityUpdate(cartFragment),
                 variables: {
                     cartId: state.cart.id,
                     buyerIdentity,
@@ -365,14 +375,14 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
                 });
             }
         }
-    }, [fetchCart, onBuyerIdentityUpdate, numCartLines, countryCode]);
+    }, [onBuyerIdentityUpdate, fetchCart, cartFragment, numCartLines, countryCode]);
     const cartAttributesUpdate = useCallback(async (attributes, state) => {
         var _a;
         if (state.status === 'idle') {
             dispatch({ type: 'cartAttributesUpdate' });
             onAttributesUpdate === null || onAttributesUpdate === void 0 ? void 0 : onAttributesUpdate();
             const { data, error } = await fetchCart({
-                query: CartAttributesUpdate,
+                query: CartAttributesUpdate(cartFragment),
                 variables: {
                     cartId: state.cart.id,
                     attributes,
@@ -393,14 +403,14 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
                 });
             }
         }
-    }, [fetchCart, onAttributesUpdate, numCartLines, countryCode]);
+    }, [onAttributesUpdate, fetchCart, cartFragment, numCartLines, countryCode]);
     const discountCodesUpdate = useCallback(async (discountCodes, state) => {
         var _a;
         if (state.status === 'idle') {
             dispatch({ type: 'discountCodesUpdate' });
             onDiscountCodesUpdate === null || onDiscountCodesUpdate === void 0 ? void 0 : onDiscountCodesUpdate();
             const { data, error } = await fetchCart({
-                query: CartDiscountCodesUpdate,
+                query: CartDiscountCodesUpdate(cartFragment),
                 variables: {
                     cartId: state.cart.id,
                     discountCodes,
@@ -425,7 +435,7 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
                 });
             }
         }
-    }, [fetchCart, onDiscountCodesUpdate, numCartLines, countryCode]);
+    }, [onDiscountCodesUpdate, fetchCart, cartFragment, numCartLines, countryCode]);
     const didFetchCart = useRef(false);
     useEffect(() => {
         if (localStorage.getItem(CART_ID_STORAGE_KEY) &&
@@ -439,9 +449,9 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
         if (state.status !== 'idle') {
             return;
         }
-        buyerIdentityUpdate({ countryCode }, state);
+        buyerIdentityUpdate({ countryCode, customerAccessToken }, state);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [countryCode]);
+    }, [countryCode, customerAccessToken]);
     const cartContextValue = useMemo(() => {
         return {
             ...('cart' in state
@@ -485,11 +495,13 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
             discountCodesUpdate(discountCodes) {
                 discountCodesUpdate(discountCodes, state);
             },
+            cartFragment,
         };
     }, [
         state,
         cart,
         cartCreate,
+        cartFragment,
         addLineItem,
         removeLineItem,
         updateLineItem,

package/dist/esnext/components/CartProvider/cart-queries.d.ts

@@ -1,9 +1,10 @@
-export declare const CartLineAdd = "\nmutation CartLineAdd($cartId: ID!, $lines: [CartLineInput!]!, $numCartLines: Int = 250, $country: CountryCode = ZZ) @inContext(country: $country) {\n  cartLinesAdd(cartId: $cartId, lines: $lines) {\n    cart {\n      ...CartFragment\n    }\n  }\n}\n\nfragment CartFragment on Cart {\n  id\n  checkoutUrl\n  buyerIdentity {\n    countryCode\n    customer {\n      id\n      email\n      firstName\n      lastName\n      displayName\n    }\n    email\n    phone\n  }\n  lines(first: $numCartLines) {\n    edges {\n      node {\n        id\n        quantity\n        attributes {\n          key\n          value\n        }\n        merchandise {\n          ... on ProductVariant {\n            id\n            availableForSale\n            compareAtPriceV2 {\n              ...MoneyFragment\n            }\n            priceV2 {\n              ...MoneyFragment\n            }\n            requiresShipping\n            title\n            image {\n              ...ImageFragment\n            }\n            product {\n              handle\n              title\n            }\n            selectedOptions {\n              name\n              value\n            }\n          }\n        }\n      }\n    }\n  }\n  estimatedCost {\n    subtotalAmount {\n      ...MoneyFragment\n    }\n    totalAmount {\n      ...MoneyFragment\n    }\n    totalDutyAmount {\n      ...MoneyFragment\n    }\n    totalTaxAmount {\n      ...MoneyFragment\n    }\n  }\n  note\n  attributes {\n    key\n    value\n  }\n  discountCodes {\n    code\n  }\n}\n\nfragment MoneyFragment on MoneyV2 {\n  currencyCode\n  amount\n}\nfragment ImageFragment on Image {\n  id\n  url\n  altText\n  width\n  height\n}\n";
-export declare const CartCreate = "\nmutation CartCreate($input: CartInput!, $numCartLines: Int = 250, $country: CountryCode = ZZ) @inContext(country: $country) {\n  cartCreate(input: $input) {\n    cart {\n      ...CartFragment\n    }\n  }\n}\n\nfragment CartFragment on Cart {\n  id\n  checkoutUrl\n  buyerIdentity {\n    countryCode\n    customer {\n      id\n      email\n      firstName\n      lastName\n      displayName\n    }\n    email\n    phone\n  }\n  lines(first: $numCartLines) {\n    edges {\n      node {\n        id\n        quantity\n        attributes {\n          key\n          value\n        }\n        merchandise {\n          ... on ProductVariant {\n            id\n            availableForSale\n            compareAtPriceV2 {\n              ...MoneyFragment\n            }\n            priceV2 {\n              ...MoneyFragment\n            }\n            requiresShipping\n            title\n            image {\n              ...ImageFragment\n            }\n            product {\n              handle\n              title\n            }\n            selectedOptions {\n              name\n              value\n            }\n          }\n        }\n      }\n    }\n  }\n  estimatedCost {\n    subtotalAmount {\n      ...MoneyFragment\n    }\n    totalAmount {\n      ...MoneyFragment\n    }\n    totalDutyAmount {\n      ...MoneyFragment\n    }\n    totalTaxAmount {\n      ...MoneyFragment\n    }\n  }\n  note\n  attributes {\n    key\n    value\n  }\n  discountCodes {\n    code\n  }\n}\n\nfragment MoneyFragment on MoneyV2 {\n  currencyCode\n  amount\n}\nfragment ImageFragment on Image {\n  id\n  url\n  altText\n  width\n  height\n}\n";
-export declare const CartLineRemove = "\nmutation CartLineRemove($cartId: ID!, $lines: [ID!]!, $numCartLines: Int = 250, $country: CountryCode = ZZ) @inContext(country: $country) {\n  cartLinesRemove(cartId: $cartId, lineIds: $lines) {\n    cart {\n      ...CartFragment\n    }\n  }\n}\n\nfragment CartFragment on Cart {\n  id\n  checkoutUrl\n  buyerIdentity {\n    countryCode\n    customer {\n      id\n      email\n      firstName\n      lastName\n      displayName\n    }\n    email\n    phone\n  }\n  lines(first: $numCartLines) {\n    edges {\n      node {\n        id\n        quantity\n        attributes {\n          key\n          value\n        }\n        merchandise {\n          ... on ProductVariant {\n            id\n            availableForSale\n            compareAtPriceV2 {\n              ...MoneyFragment\n            }\n            priceV2 {\n              ...MoneyFragment\n            }\n            requiresShipping\n            title\n            image {\n              ...ImageFragment\n            }\n            product {\n              handle\n              title\n            }\n            selectedOptions {\n              name\n              value\n            }\n          }\n        }\n      }\n    }\n  }\n  estimatedCost {\n    subtotalAmount {\n      ...MoneyFragment\n    }\n    totalAmount {\n      ...MoneyFragment\n    }\n    totalDutyAmount {\n      ...MoneyFragment\n    }\n    totalTaxAmount {\n      ...MoneyFragment\n    }\n  }\n  note\n  attributes {\n    key\n    value\n  }\n  discountCodes {\n    code\n  }\n}\n\nfragment MoneyFragment on MoneyV2 {\n  currencyCode\n  amount\n}\nfragment ImageFragment on Image {\n  id\n  url\n  altText\n  width\n  height\n}\n";
-export declare const CartLineUpdate = "\nmutation CartLineUpdate($cartId: ID!, $lines: [CartLineUpdateInput!]!, $numCartLines: Int = 250, $country: CountryCode = ZZ) @inContext(country: $country) {\n  cartLinesUpdate(cartId: $cartId, lines: $lines) {\n    cart {\n      ...CartFragment\n    }\n  }\n}\n\nfragment CartFragment on Cart {\n  id\n  checkoutUrl\n  buyerIdentity {\n    countryCode\n    customer {\n      id\n      email\n      firstName\n      lastName\n      displayName\n    }\n    email\n    phone\n  }\n  lines(first: $numCartLines) {\n    edges {\n      node {\n        id\n        quantity\n        attributes {\n          key\n          value\n        }\n        merchandise {\n          ... on ProductVariant {\n            id\n            availableForSale\n            compareAtPriceV2 {\n              ...MoneyFragment\n            }\n            priceV2 {\n              ...MoneyFragment\n            }\n            requiresShipping\n            title\n            image {\n              ...ImageFragment\n            }\n            product {\n              handle\n              title\n            }\n            selectedOptions {\n              name\n              value\n            }\n          }\n        }\n      }\n    }\n  }\n  estimatedCost {\n    subtotalAmount {\n      ...MoneyFragment\n    }\n    totalAmount {\n      ...MoneyFragment\n    }\n    totalDutyAmount {\n      ...MoneyFragment\n    }\n    totalTaxAmount {\n      ...MoneyFragment\n    }\n  }\n  note\n  attributes {\n    key\n    value\n  }\n  discountCodes {\n    code\n  }\n}\n\nfragment MoneyFragment on MoneyV2 {\n  currencyCode\n  amount\n}\nfragment ImageFragment on Image {\n  id\n  url\n  altText\n  width\n  height\n}\n";
-export declare const CartNoteUpdate = "\nmutation CartNoteUpdate($cartId: ID!, $note: String, $numCartLines: Int = 250, $country: CountryCode = ZZ) @inContext(country: $country) {\n  cartNoteUpdate(cartId: $cartId, note: $note) {\n    cart {\n      ...CartFragment\n    }\n  }\n}\n\nfragment CartFragment on Cart {\n  id\n  checkoutUrl\n  buyerIdentity {\n    countryCode\n    customer {\n      id\n      email\n      firstName\n      lastName\n      displayName\n    }\n    email\n    phone\n  }\n  lines(first: $numCartLines) {\n    edges {\n      node {\n        id\n        quantity\n        attributes {\n          key\n          value\n        }\n        merchandise {\n          ... on ProductVariant {\n            id\n            availableForSale\n            compareAtPriceV2 {\n              ...MoneyFragment\n            }\n            priceV2 {\n              ...MoneyFragment\n            }\n            requiresShipping\n            title\n            image {\n              ...ImageFragment\n            }\n            product {\n              handle\n              title\n            }\n            selectedOptions {\n              name\n              value\n            }\n          }\n        }\n      }\n    }\n  }\n  estimatedCost {\n    subtotalAmount {\n      ...MoneyFragment\n    }\n    totalAmount {\n      ...MoneyFragment\n    }\n    totalDutyAmount {\n      ...MoneyFragment\n    }\n    totalTaxAmount {\n      ...MoneyFragment\n    }\n  }\n  note\n  attributes {\n    key\n    value\n  }\n  discountCodes {\n    code\n  }\n}\n\nfragment MoneyFragment on MoneyV2 {\n  currencyCode\n  amount\n}\nfragment ImageFragment on Image {\n  id\n  url\n  altText\n  width\n  height\n}\n";
-export declare const CartBuyerIdentityUpdate = "\nmutation CartBuyerIdentityUpdate(\n  $cartId: ID!\n  $buyerIdentity: CartBuyerIdentityInput!\n  $numCartLines: Int = 250\n  $country: CountryCode = ZZ\n) @inContext(country: $country) {\n  cartBuyerIdentityUpdate(cartId: $cartId, buyerIdentity: $buyerIdentity) {\n    cart {\n      ...CartFragment\n    }\n  }\n}\n\nfragment CartFragment on Cart {\n  id\n  checkoutUrl\n  buyerIdentity {\n    countryCode\n    customer {\n      id\n      email\n      firstName\n      lastName\n      displayName\n    }\n    email\n    phone\n  }\n  lines(first: $numCartLines) {\n    edges {\n      node {\n        id\n        quantity\n        attributes {\n          key\n          value\n        }\n        merchandise {\n          ... on ProductVariant {\n            id\n            availableForSale\n            compareAtPriceV2 {\n              ...MoneyFragment\n            }\n            priceV2 {\n              ...MoneyFragment\n            }\n            requiresShipping\n            title\n            image {\n              ...ImageFragment\n            }\n            product {\n              handle\n              title\n            }\n            selectedOptions {\n              name\n              value\n            }\n          }\n        }\n      }\n    }\n  }\n  estimatedCost {\n    subtotalAmount {\n      ...MoneyFragment\n    }\n    totalAmount {\n      ...MoneyFragment\n    }\n    totalDutyAmount {\n      ...MoneyFragment\n    }\n    totalTaxAmount {\n      ...MoneyFragment\n    }\n  }\n  note\n  attributes {\n    key\n    value\n  }\n  discountCodes {\n    code\n  }\n}\n\nfragment MoneyFragment on MoneyV2 {\n  currencyCode\n  amount\n}\nfragment ImageFragment on Image {\n  id\n  url\n  altText\n  width\n  height\n}\n";
-export declare const CartAttributesUpdate = "\nmutation CartAttributesUpdate($attributes: [AttributeInput!]!, $cartId: ID!, $numCartLines: Int = 250, $country: CountryCode = ZZ) @inContext(country: $country) {\n  cartAttributesUpdate(attributes: $attributes, cartId: $cartId) {\n    cart {\n      ...CartFragment\n    }\n  }\n}\n\nfragment CartFragment on Cart {\n  id\n  checkoutUrl\n  buyerIdentity {\n    countryCode\n    customer {\n      id\n      email\n      firstName\n      lastName\n      displayName\n    }\n    email\n    phone\n  }\n  lines(first: $numCartLines) {\n    edges {\n      node {\n        id\n        quantity\n        attributes {\n          key\n          value\n        }\n        merchandise {\n          ... on ProductVariant {\n            id\n            availableForSale\n            compareAtPriceV2 {\n              ...MoneyFragment\n            }\n            priceV2 {\n              ...MoneyFragment\n            }\n            requiresShipping\n            title\n            image {\n              ...ImageFragment\n            }\n            product {\n              handle\n              title\n            }\n            selectedOptions {\n              name\n              value\n            }\n          }\n        }\n      }\n    }\n  }\n  estimatedCost {\n    subtotalAmount {\n      ...MoneyFragment\n    }\n    totalAmount {\n      ...MoneyFragment\n    }\n    totalDutyAmount {\n      ...MoneyFragment\n    }\n    totalTaxAmount {\n      ...MoneyFragment\n    }\n  }\n  note\n  attributes {\n    key\n    value\n  }\n  discountCodes {\n    code\n  }\n}\n\nfragment MoneyFragment on MoneyV2 {\n  currencyCode\n  amount\n}\nfragment ImageFragment on Image {\n  id\n  url\n  altText\n  width\n  height\n}\n";
-export declare const CartDiscountCodesUpdate = "\nmutation CartDiscountCodesUpdate($cartId: ID!, $discountCodes: [String!], $numCartLines: Int = 250, $country: CountryCode = ZZ) @inContext(country: $country) {\n  cartDiscountCodesUpdate(cartId: $cartId, discountCodes: $discountCodes) {\n    cart {\n      ...CartFragment\n    }\n  }\n}\n\nfragment CartFragment on Cart {\n  id\n  checkoutUrl\n  buyerIdentity {\n    countryCode\n    customer {\n      id\n      email\n      firstName\n      lastName\n      displayName\n    }\n    email\n    phone\n  }\n  lines(first: $numCartLines) {\n    edges {\n      node {\n        id\n        quantity\n        attributes {\n          key\n          value\n        }\n        merchandise {\n          ... on ProductVariant {\n            id\n            availableForSale\n            compareAtPriceV2 {\n              ...MoneyFragment\n            }\n            priceV2 {\n              ...MoneyFragment\n            }\n            requiresShipping\n            title\n            image {\n              ...ImageFragment\n            }\n            product {\n              handle\n              title\n            }\n            selectedOptions {\n              name\n              value\n            }\n          }\n        }\n      }\n    }\n  }\n  estimatedCost {\n    subtotalAmount {\n      ...MoneyFragment\n    }\n    totalAmount {\n      ...MoneyFragment\n    }\n    totalDutyAmount {\n      ...MoneyFragment\n    }\n    totalTaxAmount {\n      ...MoneyFragment\n    }\n  }\n  note\n  attributes {\n    key\n    value\n  }\n  discountCodes {\n    code\n  }\n}\n\nfragment MoneyFragment on MoneyV2 {\n  currencyCode\n  amount\n}\nfragment ImageFragment on Image {\n  id\n  url\n  altText\n  width\n  height\n}\n";
-export declare const CartQuery = "\nquery CartQuery($id: ID!, $numCartLines: Int = 250, $country: CountryCode = ZZ) @inContext(country: $country) {\n  cart(id: $id) {\n    ...CartFragment\n  }\n}\n\nfragment CartFragment on Cart {\n  id\n  checkoutUrl\n  buyerIdentity {\n    countryCode\n    customer {\n      id\n      email\n      firstName\n      lastName\n      displayName\n    }\n    email\n    phone\n  }\n  lines(first: $numCartLines) {\n    edges {\n      node {\n        id\n        quantity\n        attributes {\n          key\n          value\n        }\n        merchandise {\n          ... on ProductVariant {\n            id\n            availableForSale\n            compareAtPriceV2 {\n              ...MoneyFragment\n            }\n            priceV2 {\n              ...MoneyFragment\n            }\n            requiresShipping\n            title\n            image {\n              ...ImageFragment\n            }\n            product {\n              handle\n              title\n            }\n            selectedOptions {\n              name\n              value\n            }\n          }\n        }\n      }\n    }\n  }\n  estimatedCost {\n    subtotalAmount {\n      ...MoneyFragment\n    }\n    totalAmount {\n      ...MoneyFragment\n    }\n    totalDutyAmount {\n      ...MoneyFragment\n    }\n    totalTaxAmount {\n      ...MoneyFragment\n    }\n  }\n  note\n  attributes {\n    key\n    value\n  }\n  discountCodes {\n    code\n  }\n}\n\nfragment MoneyFragment on MoneyV2 {\n  currencyCode\n  amount\n}\nfragment ImageFragment on Image {\n  id\n  url\n  altText\n  width\n  height\n}\n";
+export declare const CartLineAdd: (cartFragment: string) => string;
+export declare const CartCreate: (cartFragment: string) => string;
+export declare const CartLineRemove: (cartFragment: string) => string;
+export declare const CartLineUpdate: (cartFragment: string) => string;
+export declare const CartNoteUpdate: (cartFragment: string) => string;
+export declare const CartBuyerIdentityUpdate: (cartFragment: string) => string;
+export declare const CartAttributesUpdate: (cartFragment: string) => string;
+export declare const CartDiscountCodesUpdate: (cartFragment: string) => string;
+export declare const CartQuery: (cartFragment: string) => string;
+export declare const defaultCartFragment = "\nfragment CartFragment on Cart {\n  id\n  checkoutUrl\n  buyerIdentity {\n    countryCode\n    customer {\n      id\n      email\n      firstName\n      lastName\n      displayName\n    }\n    email\n    phone\n  }\n  lines(first: $numCartLines) {\n    edges {\n      node {\n        id\n        quantity\n        attributes {\n          key\n          value\n        }\n        merchandise {\n          ... on ProductVariant {\n            id\n            availableForSale\n            compareAtPriceV2 {\n              ...MoneyFragment\n            }\n            priceV2 {\n              ...MoneyFragment\n            }\n            requiresShipping\n            title\n            image {\n              ...ImageFragment\n            }\n            product {\n              handle\n              title\n            }\n            selectedOptions {\n              name\n              value\n            }\n          }\n        }\n      }\n    }\n  }\n  estimatedCost {\n    subtotalAmount {\n      ...MoneyFragment\n    }\n    totalAmount {\n      ...MoneyFragment\n    }\n    totalDutyAmount {\n      ...MoneyFragment\n    }\n    totalTaxAmount {\n      ...MoneyFragment\n    }\n  }\n  note\n  attributes {\n    key\n    value\n  }\n  discountCodes {\n    code\n  }\n}\n\nfragment MoneyFragment on MoneyV2 {\n  currencyCode\n  amount\n}\nfragment ImageFragment on Image {\n  id\n  url\n  altText\n  width\n  height\n}\n";