@shopify/hydrogen 0.17.3 → 0.20.0

package/CHANGELOG.md

@@ -1,5 +1,264 @@
 # Changelog
 
+## 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
+
+- [#1065](https://github.com/Shopify/hydrogen/pull/1065) [`81ae47fd`](https://github.com/Shopify/hydrogen/commit/81ae47fdb01be06af155a61e574d43c73122c414) Thanks [@frandiox](https://github.com/frandiox)! - A new config file `hydrogen.config.js` replaces the existing `shopify.config.js` in your Hydrogen app.
+
+  ## Introducing `hydrogen.config.js`
+
+  Hydrogen apps now expect a `hydrogen.config.js` in the root folder. This config file accepts Shopify storefront credentials, routes, session configuration, and more.
+
+  To migrate existing apps, you should create a `hydrogen.config.js` (or `hydrogen.config.ts`) file in your Hydrogen app:
+
+  ```js
+  import {defineConfig} from '@shopify/hydrogen/config';
+  import {
+    CookieSessionStorage,
+    PerformanceMetricsServerAnalyticsConnector,
+  } from '@shopify/hydrogen';
+
+  export default defineConfig({
+    routes: import.meta.globEager('./src/routes/**/*.server.[jt](s|sx)'),
+    shopify: {
+      storeDomain: 'YOUR_STORE.myshopify.com',
+      storefrontToken: 'YOUR_STOREFRONT_TOKEN',
+      storefrontApiVersion: '2022-07',
+    },
+    session: CookieSessionStorage('__session', {
+      path: '/',
+      httpOnly: true,
+      secure: process.env.NODE_ENV === 'production',
+      sameSite: 'strict',
+      maxAge: 60 * 60 * 24 * 30,
+    }),
+    serverAnalyticsConnectors: [PerformanceMetricsServerAnalyticsConnector],
+  });
+  ```
+
+  Then, update your `App.server.jsx` to remove previous arguments from `renderHydrogen()`:
+
+  ```diff
+  import renderHydrogen from '@shopify/hydrogen/entry-server';
+
+  -function App({routes}) {
+  +function App() {
+    return (
+      <Suspense fallback={<LoadingFallback />}>
+  -      <ShopifyProvider shopifyConfig={shopifyConfig}>
+  +      <ShopifyProvider>
+          <CartProvider>
+            <DefaultSeo />
+            <Router>
+  -            <FileRoutes routes={routes} />
+  +            <FileRoutes />
+              <Route path="*" page={<NotFound />} />
+            </Router>
+          </CartProvider>
+          <PerformanceMetrics />
+          {process.env.LOCAL_DEV && <PerformanceMetricsDebug />}
+        </ShopifyProvider>
+      </Suspense>
+    );
+  }
+
+  -const routes = import.meta.globEager('./routes/**/*.server.[jt](s|sx)');
+  -
+  -export default renderHydrogen(App, {
+  -  routes,
+  -  shopifyConfig,
+  -  session: CookieSessionStorage('__session', {
+  -    path: '/',
+  -    httpOnly: true,
+  -    secure: process.env.NODE_ENV === 'production',
+  -    sameSite: 'strict',
+  -    maxAge: 60 * 60 * 24 * 30,
+  -  }),
+  -  serverAnalyticsConnectors: [PerformanceMetricsServerAnalyticsConnector],
+  -});
+  +export default renderHydrogen(App);
+  ```
+
+  Next, update `vite.config.js` in your app to remove references to `shopifyConfig`:
+
+  ```diff
+  import {defineConfig} from 'vite';
+  import hydrogen from '@shopify/hydrogen/plugin';
+  -import shopifyConfig from './shopify.config';
+
+  // https://vitejs.dev/config/
+  export default defineConfig({
+  -  plugins: [hydrogen(shopifyConfig)],
+  +  plugins: [hydrogen()],
+  ```
+
+  Finally, delete `shopify.config.js` from your app.
+
+  [Read more about the `hydrogen.config.js` file](https://shopify.dev/custom-storefronts/hydrogen/framework/hydrogen-config)
+
+* [#1214](https://github.com/Shopify/hydrogen/pull/1214) [`58ef6d69`](https://github.com/Shopify/hydrogen/commit/58ef6d69f1148e7bc8452fa77e7e8f54396c6105) Thanks [@frehner](https://github.com/frehner)! - Upgraded SFAPI version to 2022-07
+
+- [#1232](https://github.com/Shopify/hydrogen/pull/1232) [`d3956d62`](https://github.com/Shopify/hydrogen/commit/d3956d623adb86371ab214b102b53c62ea9ce26c) Thanks [@arlyxiao](https://github.com/arlyxiao)! - Upgrade body-parser in hydrogen package
+
+### Patch Changes
+
+- [#1211](https://github.com/Shopify/hydrogen/pull/1211) [`f3d26511`](https://github.com/Shopify/hydrogen/commit/f3d26511b1b0b94de1a43f76a0be9d99b5f2a8f7) Thanks [@wizardlyhel](https://github.com/wizardlyhel)! - Build chunks are inside assets folder
+
+* [#1215](https://github.com/Shopify/hydrogen/pull/1215) [`a0ed7c06`](https://github.com/Shopify/hydrogen/commit/a0ed7c06d045a0063a356097dafcc25e5361aad1) Thanks [@frehner](https://github.com/frehner)! - `useMoney` now returns two additional properties: `withoutTrailingZeros` and `withoutTrailingZerosAndCurrency`
+
+  `<Money />` now has two additional and optional props: `withoutMoney` and `withoutCurrency`.
+
+- [#1242](https://github.com/Shopify/hydrogen/pull/1242) [`c277c688`](https://github.com/Shopify/hydrogen/commit/c277c68836d6d75d509cc68c74e3ccd33706a0c7) Thanks [@blittle](https://github.com/blittle)! - Prevent JSON parsing from prototype poisoning vulnerabilities
+
+* [#1210](https://github.com/Shopify/hydrogen/pull/1210) [`a844d26e`](https://github.com/Shopify/hydrogen/commit/a844d26ef258c28fded5293054389b719f0b86f4) Thanks [@blittle](https://github.com/blittle)! - Add eslint back and fix stale product options
+
 ## 0.17.3
 
 ### Patch Changes

package/config.d.ts

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

package/config.js

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

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

@@ -27,9 +27,9 @@ export function AddToCartButton(props) {
                 setAddingItem(true);
                 linesAdd([
                     {
-                        quantity: quantity,
+                        quantity,
                         merchandiseId: variantId,
-                        attributes: attributes,
+                        attributes,
                     },
                 ]);
             } }, children),

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/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,7 +1,7 @@
 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 { useCartFetch } from './hooks';
+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';
 import { useServerProps } from '../../foundation/useServerProps';
@@ -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,
@@ -197,7 +197,7 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
         if (error) {
             dispatch({
                 type: 'reject',
-                error: error,
+                error,
             });
         }
         if ((_b = data === null || data === void 0 ? void 0 : data.cartCreate) === null || _b === void 0 ? void 0 : _b.cart) {
@@ -213,17 +213,17 @@ 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: lines,
+                    lines,
                     numCartLines,
                     country: countryCode,
                 },
@@ -231,7 +231,7 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
             if (error) {
                 dispatch({
                     type: 'reject',
-                    error: error,
+                    error,
                 });
             }
             if ((_a = data === null || data === void 0 ? void 0 : data.cartLinesAdd) === null || _a === void 0 ? void 0 : _a.cart) {
@@ -245,17 +245,17 @@ 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: lines,
+                    lines,
                     numCartLines,
                     country: countryCode,
                 },
@@ -277,17 +277,17 @@ 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: lines,
+                    lines,
                     numCartLines,
                     country: countryCode,
                 },
@@ -295,7 +295,7 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
             if (error) {
                 dispatch({
                     type: 'reject',
-                    error: error,
+                    error,
                 });
             }
             if ((_a = data === null || data === void 0 ? void 0 : data.cartLinesUpdate) === null || _a === void 0 ? void 0 : _a.cart) {
@@ -309,17 +309,17 @@ 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: note,
+                    note,
                     numCartLines,
                     country: countryCode,
                 },
@@ -327,7 +327,7 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
             if (error) {
                 dispatch({
                     type: 'reject',
-                    error: error,
+                    error,
                 });
             }
             if ((_a = data === null || data === void 0 ? void 0 : data.cartNoteUpdate) === null || _a === void 0 ? void 0 : _a.cart) {
@@ -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,
@@ -355,7 +355,7 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
             if (error) {
                 dispatch({
                     type: 'reject',
-                    error: error,
+                    error,
                 });
             }
             if ((_a = data === null || data === void 0 ? void 0 : data.cartBuyerIdentityUpdate) === null || _a === void 0 ? void 0 : _a.cart) {
@@ -365,17 +365,17 @@ 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: attributes,
+                    attributes,
                     numCartLines,
                     country: countryCode,
                 },
@@ -383,7 +383,7 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
             if (error) {
                 dispatch({
                     type: 'reject',
-                    error: error,
+                    error,
                 });
             }
             if ((_a = data === null || data === void 0 ? void 0 : data.cartAttributesUpdate) === null || _a === void 0 ? void 0 : _a.cart) {
@@ -393,17 +393,17 @@ 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: discountCodes,
+                    discountCodes,
                     numCartLines,
                     country: countryCode,
                 },
@@ -411,7 +411,7 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
             if (error) {
                 dispatch({
                     type: 'reject',
-                    error: error,
+                    error,
                 });
             }
             if ((_a = data === null || data === void 0 ? void 0 : data.cartDiscountCodesUpdate) === null || _a === void 0 ? void 0 : _a.cart) {
@@ -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) &&
@@ -440,6 +440,7 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
             return;
         }
         buyerIdentityUpdate({ countryCode }, state);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [countryCode]);
     const cartContextValue = useMemo(() => {
         return {
@@ -484,11 +485,13 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
             discountCodesUpdate(discountCodes) {
                 discountCodesUpdate(discountCodes, state);
             },
+            cartFragment,
         };
     }, [
         state,
         cart,
         cartCreate,
+        cartFragment,
         addLineItem,
         removeLineItem,
         updateLineItem,