Shopify · frehner · Jun 7, 2022 · May 9, 2022 · May 9, 2022 · May 9, 2022
diff --git a/.changeset/wet-dingos-kick.md b/.changeset/wet-dingos-kick.md
@@ -0,0 +1,8 @@
+---
+'@shopify/hydrogen': minor
+---
+
+Updated Cart queries in two ways, one of which requires you to be using Storefront API `2022-07`:
+
+1. [`CartLine`](https://shopify.dev/api/storefront/2022-04/objects/CartLine#fields) now uses [`CartLineEstimatedCost`'s `totalAmount`](https://shopify.dev/api/storefront/2022-04/objects/CartLineEstimatedCost) field for calculating the Line's total, instead of doing it manually.
+2. Cart now uses [`totalQuantiy`](https://shopify.dev/api/storefront/2022-07/objects/Cart#field-cart-totalquantity) for calculating how many items are in the cart, instead of doing this manually. **Note that this feature is only available in Storefront API `2022-07` and newer.**
diff --git a/packages/hydrogen/graphql.schema.json b/packages/hydrogen/graphql.schema.json
diff --git a/packages/hydrogen/src/components/CartLinePrice/CartLinePrice.client.tsx b/packages/hydrogen/src/components/CartLinePrice/CartLinePrice.client.tsx
@@ -17,21 +17,21 @@ export function CartLinePrice<TTag extends keyof JSX.IntrinsicElements>(
   const cartLine = useCartLine();
   const {priceType = 'regular', ...passthroughProps} = props;
 
-  const price =
+  const moneyV2 =
     priceType === 'regular'
-      ? cartLine.merchandise.priceV2
-      : cartLine.merchandise.compareAtPriceV2;
+      ? cartLine.estimatedCost.totalAmount
+      : cartLine.estimatedCost.compareAtAmount;
 
-  if (price == null) {
+  if (moneyV2 == null) {
     return null;
   }
 
   return (
     <Money<TTag>
       {...passthroughProps}
       data={{
-        amount: `${parseFloat(price.amount) * cartLine.quantity}`,
-        currencyCode: price.currencyCode,
+        amount: `${moneyV2.amount}`,
+        currencyCode: moneyV2.currencyCode,
       }}
     />
   );

diff --git a/packages/hydrogen/src/components/CartLinePrice/tests/CartLinePrice.test.tsx b/packages/hydrogen/src/components/CartLinePrice/tests/CartLinePrice.test.tsx
@@ -10,9 +10,9 @@ describe('<CartLinePrice />', () => {
   it('renders <Money /> with the regular price by default', () => {
     const line = {
       ...CART_LINE,
-      merchandise: {
-        ...CART_LINE.merchandise,
-        priceV2: {
+      estimatedCost: {
+        ...CART_LINE.estimatedCost,
+        totalAmount: {
           amount: '50',
           currencyCode: CurrencyCode.Usd,
         },
@@ -33,9 +33,9 @@ describe('<CartLinePrice />', () => {
   it('renders <Money /> with the compareAt price when `priceType` is `compareAt`', () => {
     const line = {
       ...CART_LINE,
-      merchandise: {
-        ...CART_LINE.merchandise,
-        compareAtPriceV2: {
+      estimatedCost: {
+        ...CART_LINE.estimatedCost,
+        compareAtAmount: {
           amount: '60',
           currencyCode: CurrencyCode.Usd,
         },
@@ -53,30 +53,6 @@ describe('<CartLinePrice />', () => {
     });
   });
 
-  it('factors in quantity for the amount passed to <Money />', () => {
-    const line = {
-      ...CART_LINE,
-      quantity: 2,
-      merchandise: {
-        ...CART_LINE.merchandise,
-        priceV2: {
-          amount: '50',
-          currencyCode: CurrencyCode.Usd,
-        },
-      },
-    };
-
-    const wrapper = mountWithProviders(
-      <CartLineProvider line={line}>
-        <CartLinePrice />
-      </CartLineProvider>
-    );
-
-    expect(wrapper).toContainReactComponent(Money, {
-      data: {amount: '100', currencyCode: CurrencyCode.Usd},
-    });
-  });
-
   it('allows passthrough props', () => {
     const line = {
       ...CART_LINE,

diff --git a/packages/hydrogen/src/components/CartLineProvider/tests/fixtures.ts b/packages/hydrogen/src/components/CartLineProvider/tests/fixtures.ts
@@ -19,4 +19,14 @@ export const CART_LINE = {
     selectedOptions: [{name: 'size', value: 'large'}],
     title: 'Product Name - Large',
   },
+  estimatedCost: {
+    totalAmount: {
+      amount: '123',
+      currencyCode: CurrencyCode.Usd,
+    },
+    compareAtAmount: {
+      amount: '125',
+      currencyCode: CurrencyCode.Usd,
+    },
+  },
 };
diff --git a/packages/hydrogen/src/components/CartProvider/CartProvider.client.tsx b/packages/hydrogen/src/components/CartProvider/CartProvider.client.tsx
@@ -680,12 +680,7 @@ export function CartProvider({
           }),
       status: state.status,
       error: 'error' in state ? state.error : undefined,
-      totalQuantity:
-        'cart' in state
-          ? state.cart.lines.reduce((previous, current) => {
-              return previous + current.quantity;
-            }, 0)
-          : 0,
+      totalQuantity: 'cart' in state ? state?.cart?.totalQuantity ?? 0 : 0,
       cartCreate,
       linesAdd(lines: CartLineInput[]) {
         if ('cart' in state && state.cart.id) {

diff --git a/packages/hydrogen/src/components/CartProvider/cart-queries.ts b/packages/hydrogen/src/components/CartProvider/cart-queries.ts
@@ -10,6 +10,7 @@ mutation CartLineAdd($cartId: ID!, $lines: [CartLineInput!]!, $numCartLines: Int
 fragment CartFragment on Cart {
   id
   checkoutUrl
+  totalQuantity
   buyerIdentity {
     countryCode
     customer {
@@ -31,6 +32,16 @@ fragment CartFragment on Cart {
           key
           value
         }
+        estimatedCost {
+          totalAmount {
+            amount
+            currencyCode
+          }
+          compareAtAmount {
+            amount
+            currencyCode
+          }
+        }
         merchandise {
           ... on ProductVariant {
             id
@@ -108,6 +119,7 @@ mutation CartCreate($input: CartInput!, $numCartLines: Int = 250, $country: Coun
 fragment CartFragment on Cart {
   id
   checkoutUrl
+  totalQuantity
   buyerIdentity {
     countryCode
     customer {
@@ -129,6 +141,16 @@ fragment CartFragment on Cart {
           key
           value
         }
+        estimatedCost {
+          totalAmount {
+            amount
+            currencyCode
+          }
+          compareAtAmount {
+            amount
+            currencyCode
+          }
+        }
         merchandise {
           ... on ProductVariant {
             id
@@ -206,6 +228,7 @@ mutation CartLineRemove($cartId: ID!, $lines: [ID!]!, $numCartLines: Int = 250,
 fragment CartFragment on Cart {
   id
   checkoutUrl
+  totalQuantity
   buyerIdentity {
     countryCode
     customer {
@@ -227,6 +250,16 @@ fragment CartFragment on Cart {
           key
           value
         }
+        estimatedCost {
+          totalAmount {
+            amount
+            currencyCode
+          }
+          compareAtAmount {
+            amount
+            currencyCode
+          }
+        }
         merchandise {
           ... on ProductVariant {
             id
@@ -304,6 +337,7 @@ mutation CartLineUpdate($cartId: ID!, $lines: [CartLineUpdateInput!]!, $numCartL
 fragment CartFragment on Cart {
   id
   checkoutUrl
+  totalQuantity
   buyerIdentity {
     countryCode
     customer {
@@ -325,6 +359,16 @@ fragment CartFragment on Cart {
           key
           value
         }
+        estimatedCost {
+          totalAmount {
+            amount
+            currencyCode
+          }
+          compareAtAmount {
+            amount
+            currencyCode
+          }
+        }
         merchandise {
           ... on ProductVariant {
             id
@@ -402,6 +446,7 @@ mutation CartNoteUpdate($cartId: ID!, $note: String, $numCartLines: Int = 250, $
 fragment CartFragment on Cart {
   id
   checkoutUrl
+  totalQuantity
   buyerIdentity {
     countryCode
     customer {
@@ -423,6 +468,16 @@ fragment CartFragment on Cart {
           key
           value
         }
+        estimatedCost {
+          totalAmount {
+            amount
+            currencyCode
+          }
+          compareAtAmount {
+            amount
+            currencyCode
+          }
+        }
         merchandise {
           ... on ProductVariant {
             id
@@ -505,6 +560,7 @@ mutation CartBuyerIdentityUpdate(
 fragment CartFragment on Cart {
   id
   checkoutUrl
+  totalQuantity
   buyerIdentity {
     countryCode
     customer {
@@ -526,6 +582,16 @@ fragment CartFragment on Cart {
           key
           value
         }
+        estimatedCost {
+          totalAmount {
+            amount
+            currencyCode
+          }
+          compareAtAmount {
+            amount
+            currencyCode
+          }
+        }
         merchandise {
           ... on ProductVariant {
             id
@@ -603,6 +669,7 @@ mutation CartAttributesUpdate($attributes: [AttributeInput!]!, $cartId: ID!, $nu
 fragment CartFragment on Cart {
   id
   checkoutUrl
+  totalQuantity
   buyerIdentity {
     countryCode
     customer {
@@ -624,6 +691,16 @@ fragment CartFragment on Cart {
           key
           value
         }
+        estimatedCost {
+          totalAmount {
+            amount
+            currencyCode
+          }
+          compareAtAmount {
+            amount
+            currencyCode
+          }
+        }
         merchandise {
           ... on ProductVariant {
             id
@@ -701,6 +778,7 @@ mutation CartDiscountCodesUpdate($cartId: ID!, $discountCodes: [String!], $numCa
 fragment CartFragment on Cart {
   id
   checkoutUrl
+  totalQuantity
   buyerIdentity {
     countryCode
     customer {
@@ -722,6 +800,16 @@ fragment CartFragment on Cart {
           key
           value
         }
+        estimatedCost {
+          totalAmount {
+            amount
+            currencyCode
+          }
+          compareAtAmount {
+            amount
+            currencyCode
+          }
+        }
         merchandise {
           ... on ProductVariant {
             id
@@ -797,6 +885,7 @@ query CartQuery($id: ID!, $numCartLines: Int = 250, $country: CountryCode = ZZ)
 fragment CartFragment on Cart {
   id
   checkoutUrl
+  totalQuantity
   buyerIdentity {
     countryCode
     customer {
@@ -818,6 +907,16 @@ fragment CartFragment on Cart {
           key
           value
         }
+        estimatedCost {
+          totalAmount {
+            amount
+            currencyCode
+          }
+          compareAtAmount {
+            amount
+            currencyCode
+          }
+        }
         merchandise {
           ... on ProductVariant {
             id

diff --git a/packages/hydrogen/src/components/CartProvider/graphql/CartAttributesUpdateMutation.ts b/packages/hydrogen/src/components/CartProvider/graphql/CartAttributesUpdateMutation.ts
@@ -18,7 +18,7 @@ export type CartAttributesUpdateMutation = {__typename?: 'Mutation'} & {
       cart?: Types.Maybe<
         {__typename?: 'Cart'} & Pick<
           Types.Cart,
-          'id' | 'checkoutUrl' | 'note'
+          'id' | 'checkoutUrl' | 'totalQuantity' | 'note'
         > & {
             buyerIdentity: {__typename?: 'CartBuyerIdentity'} & Pick<
               Types.CartBuyerIdentity,
@@ -44,6 +44,16 @@ export type CartAttributesUpdateMutation = {__typename?: 'Mutation'} & {
                           'key' | 'value'
                         >
                       >;
+                      estimatedCost: {__typename?: 'CartLineEstimatedCost'} & {
+                        totalAmount: {__typename?: 'MoneyV2'} & Pick<
+                          Types.MoneyV2,
+                          'amount' | 'currencyCode'
+                        >;
+                        compareAtAmount: {__typename?: 'MoneyV2'} & Pick<
+                          Types.MoneyV2,
+                          'amount' | 'currencyCode'
+                        >;
+                      };
                       merchandise: {__typename?: 'ProductVariant'} & Pick<
                         Types.ProductVariant,
                         'id' | 'availableForSale' | 'requiresShipping' | 'title'

diff --git a/packages/hydrogen/src/components/CartProvider/graphql/CartBuyerIdentityUpdateMutation.ts b/packages/hydrogen/src/components/CartProvider/graphql/CartBuyerIdentityUpdateMutation.ts
@@ -18,7 +18,7 @@ export type CartBuyerIdentityUpdateMutation = {__typename?: 'Mutation'} & {
       cart?: Types.Maybe<
         {__typename?: 'Cart'} & Pick<
           Types.Cart,
-          'id' | 'checkoutUrl' | 'note'
+          'id' | 'checkoutUrl' | 'totalQuantity' | 'note'
         > & {
             buyerIdentity: {__typename?: 'CartBuyerIdentity'} & Pick<
               Types.CartBuyerIdentity,
@@ -44,6 +44,16 @@ export type CartBuyerIdentityUpdateMutation = {__typename?: 'Mutation'} & {
                           'key' | 'value'
                         >
                       >;
+                      estimatedCost: {__typename?: 'CartLineEstimatedCost'} & {
+                        totalAmount: {__typename?: 'MoneyV2'} & Pick<
+                          Types.MoneyV2,
+                          'amount' | 'currencyCode'
+                        >;
+                        compareAtAmount: {__typename?: 'MoneyV2'} & Pick<
+                          Types.MoneyV2,
+                          'amount' | 'currencyCode'
+                        >;
+                      };
                       merchandise: {__typename?: 'ProductVariant'} & Pick<
                         Types.ProductVariant,
                         'id' | 'availableForSale' | 'requiresShipping' | 'title'