@shopify/hydrogen 0.18.0 → 0.21.0

package/CHANGELOG.md

@@ -1,5 +1,205 @@
 # Changelog
 
+## 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
+
+- [#1053](https://github.com/Shopify/hydrogen/pull/1053) [`c407f304`](https://github.com/Shopify/hydrogen/commit/c407f304352e0b781fa8a729674153ee9b971977) Thanks [@blittle](https://github.com/blittle)! - The selected country is now persisted a part of the session. This means that the page can be refreshed and the country will still be selected. There are a few breaking changes:
+
+  1. `useCountry()` hook now only returns the currently selected country. The `setCountry()` method has been removed.
+  2. The `useCountry()` hook expects a `countryCode` and `countryName` to be a part of the user session.
+  3. The example `/countries` API route has been updated to accept a `POST` request to update the selected country. The CountrySelector components need to be updated to use that route.
+
+  ```diff
+  // src/routes/countries.server.jsx
+
+  -export async function api(request, {queryShop}) {
+  +export async function api(request, {queryShop, session}) {
+  +  if (request.method === 'POST') {
+  +    const {isoCode, name} = await request.json();
+  +
+  +    await session.set('countryCode', isoCode);
+  +    await session.set('countryName', name);
+  +
+  +    return 'success';
+  +  }
+
+     const {
+       data: {
+         localization: {availableCountries},
+       },
+     } = await queryShop({
+        query: QUERY,
+     });
+     return availableCountries.sort((a, b) => a.name.localeCompare(b.name));
+  }
+  ```
+
+  ```diff
+  // src/components/CountrySelector.client.jsx
+
+  export default function CountrySelector() {
+    const [listboxOpen, setListboxOpen] = useState(false);
+
+  - const [selectedCountry, setSelectedCountry] = useCountry();
+  + const [selectedCountry] = useCountry();
+
+  + const setSelectedCountry = useCallback(
+  +   ({isoCode, name}) => {
+  +     fetch(`/countries`, {
+  +       body: JSON.stringify({isoCode, name}),
+  +       method: 'POST',
+  +     })
+  +       .then(() => {
+  +         window.location.reload();
+  +       })
+  +       .catch((error) => {
+  +         console.error(error);
+  +       });
+  +   },
+  +   [],
+  + );
+
+    return (
+        ...
+    );
+  }
+  ```
+
+  4. Each server component page that depends on the selected country pulls it from the session with `useSession()`, rather than `serverProps`.
+
+  ```diff
+  // src/routes/products/[handle].server.jsx
+  + import { useSession } from '@shopify/hydrogen';
+
+  - export default function Product({country = {isoCode: 'US'}}) {
+  + export default function Product() {
+      const {handle} = useRouteParams();
+  +   const {countryCode = 'US'} = useSession();
+      ...
+    }
+  ```
+
+### Patch Changes
+
+- [#1264](https://github.com/Shopify/hydrogen/pull/1264) [`dc966e86`](https://github.com/Shopify/hydrogen/commit/dc966e86b35ffc8a41d8d62e129884926b8db8bc) Thanks [@arlyxiao](https://github.com/arlyxiao)! - Add more bots into user agents
+
+* [#1245](https://github.com/Shopify/hydrogen/pull/1245) [`07866e82`](https://github.com/Shopify/hydrogen/commit/07866e8277dfa3195ef1896b16a58df495a9155f) Thanks [@0x15f](https://github.com/0x15f)! - [#1245](https://github.com/Shopify/hydrogen/pull/1245) - Support optional `priority` prop on Image component. When `true`, the image will be eagerly loaded. Defaults to `false`.
+
+- [#1272](https://github.com/Shopify/hydrogen/pull/1272) [`c1888652`](https://github.com/Shopify/hydrogen/commit/c188865255c5f20d9db285e375c57127030e23e6) Thanks [@wizardlyhel](https://github.com/wizardlyhel)! - Remove flight chunk
+
 ## 0.18.0
 
 ### Minor Changes

package/config.d.ts

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

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

@@ -9,7 +9,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, }: {
     /** Any `ReactNode` elements. */
     children: React.ReactNode;
     numCartLines?: number;
@@ -33,4 +33,6 @@ export declare function CartProvider({ children, numCartLines, onCreate, onLineA
      * 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;
 }): JSX.Element;

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

@@ -1,6 +1,6 @@
 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 { CartLineAdd, CartCreate, CartLineRemove, CartLineUpdate, CartNoteUpdate, CartBuyerIdentityUpdate, CartAttributesUpdate, CartDiscountCodesUpdate, CartQuery, defaultCartFragment, } from './cart-queries';
 import { useCartFetch } from './hooks.client';
 import { CartContext } from './context';
 import { CART_ID_STORAGE_KEY } from './constants';
@@ -150,7 +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, }) {
+export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLineRemove, onLineUpdate, onNoteUpdate, onBuyerIdentityUpdate, onAttributesUpdate, onDiscountCodesUpdate, data: cart, cartFragment = defaultCartFragment, }) {
     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;
@@ -162,7 +162,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,7 +175,7 @@ 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;
         dispatch({ type: 'cartCreate' });
@@ -187,7 +187,7 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
             cart.buyerIdentity.countryCode = countryCode;
         }
         const { data, error } = await fetchCart({
-            query: CartCreate,
+            query: CartCreate(cartFragment),
             variables: {
                 input: cart,
                 numCartLines,
@@ -213,14 +213,14 @@ 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]);
     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 +245,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 +277,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 +309,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 +337,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 +365,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 +393,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 +425,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) &&
@@ -485,11 +485,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";