Improve the types for useOptimisticCart() (#2269)

* Improve the types for `useOptimisticCart()` * Fixes
Shopify · Jul 9, 2024 · 66236ca · 66236ca
1 parent ba5f528
commit 66236ca
Show file tree

Hide file tree

Showing 12 changed files with 45 additions and 27 deletions.
diff --git a/.changeset/old-snails-care.md b/.changeset/old-snails-care.md
@@ -0,0 +1,5 @@
+---
+'@shopify/hydrogen': patch
+---
+
+Improve the types for `useOptimisticCart()`
diff --git a/examples/legacy-customer-account-flow/app/components/PageLayout.tsx b/examples/legacy-customer-account-flow/app/components/PageLayout.tsx
@@ -64,7 +64,7 @@ function CartAside({cart}: {cart: PageLayoutProps['cart']}) {
       <Suspense fallback={<p>Loading cart ...</p>}>
         <Await resolve={cart}>
           {(cart) => {
-            return <CartMain cart={cart!} layout="aside" />;
+            return <CartMain cart={cart} layout="aside" />;
           }}
         </Await>
       </Suspense>

diff --git a/examples/legacy-customer-account-flow/app/routes/cart.tsx b/examples/legacy-customer-account-flow/app/routes/cart.tsx
@@ -105,7 +105,7 @@ export default function Cart() {
           errorElement={<div>An error occurred</div>}
         >
           {(cart) => {
-            return <CartMain layout="page" cart={cart!} />;
+            return <CartMain layout="page" cart={cart} />;
           }}
         </Await>
       </Suspense>

diff --git a/examples/multipass/app/components/Cart.tsx b/examples/multipass/app/components/Cart.tsx
@@ -17,7 +17,7 @@ import {MultipassCheckoutButton} from './MultipassCheckoutButton';
 /***********************************************/
 
 type CartMainProps = {
-  cart: CartApiQueryFragment;
+  cart: CartApiQueryFragment | null;
   layout: 'page' | 'aside';
 };
 
@@ -42,10 +42,10 @@ function CartDetails({
   layout,
   cart,
 }: {
-  cart: OptimisticCart<CartApiQueryFragment>;
+  cart: OptimisticCart<CartApiQueryFragment | null>;
   layout: 'page' | 'aside';
 }) {
-  const cartHasItems = !!cart && cart.totalQuantity > 0;
+  const cartHasItems = cart?.totalQuantity && cart?.totalQuantity > 0;
 
   return (
     <div className="cart-details">
@@ -135,7 +135,7 @@ function CartLineItem({
   );
 }
 
-function CartCheckoutActions({checkoutUrl}: {checkoutUrl: string}) {
+function CartCheckoutActions({checkoutUrl}: {checkoutUrl?: string}) {
   if (!checkoutUrl) return null;
 
   /***********************************************/
@@ -155,7 +155,7 @@ export function CartSummary({
   children = null,
 }: {
   children?: React.ReactNode;
-  cost: CartApiQueryFragment['cost'];
+  cost?: OptimisticCart<CartApiQueryFragment | null>['cost'];
   layout: CartMainProps['layout'];
 }) {
   const className =
@@ -295,7 +295,7 @@ export function CartEmpty({
 function CartDiscounts({
   discountCodes,
 }: {
-  discountCodes: CartApiQueryFragment['discountCodes'];
+  discountCodes?: CartApiQueryFragment['discountCodes'];
 }) {
   const codes: string[] =
     discountCodes

diff --git a/examples/multipass/app/components/PageLayout.tsx b/examples/multipass/app/components/PageLayout.tsx
@@ -64,7 +64,7 @@ function CartAside({cart}: {cart: PageLayoutProps['cart']}) {
       <Suspense fallback={<p>Loading cart ...</p>}>
         <Await resolve={cart}>
           {(cart) => {
-            return <CartMain cart={cart!} layout="aside" />;
+            return <CartMain cart={cart} layout="aside" />;
           }}
         </Await>
       </Suspense>

diff --git a/examples/multipass/app/routes/cart.tsx b/examples/multipass/app/routes/cart.tsx
@@ -105,7 +105,7 @@ export default function Cart() {
           errorElement={<div>An error occurred</div>}
         >
           {(cart) => {
-            return <CartMain layout="page" cart={cart!} />;
+            return <CartMain layout="page" cart={cart} />;
           }}
         </Await>
       </Suspense>

diff --git a/packages/hydrogen/src/cart/optimistic/useOptimisticCart.tsx b/packages/hydrogen/src/cart/optimistic/useOptimisticCart.tsx
@@ -8,25 +8,39 @@ import {
   getOptimisticLineId,
   isOptimisticLineId,
 } from './optimistic-cart.helper';
+import type {PartialDeep} from 'type-fest';
 import type {CartReturn} from '../queries/cart-types';
 
 export type OptimisticCartLine<T = CartLine> = T & {isOptimistic?: boolean};
 
-export type OptimisticCart<T = CartReturn> = Omit<T, 'lines'> & {
-  isOptimistic?: boolean;
-  lines: {
-    nodes: Array<OptimisticCartLine>;
-  };
-};
+export type OptimisticCart<T = CartReturn> = T extends undefined | null
+  ? // This is the null/undefined case, where the cart has yet to be created.
+    // But we still need to provide an optimistic cart object.
+    {
+      isOptimistic?: boolean;
+      lines: {
+        nodes: Array<OptimisticCartLine>;
+      };
+    } & Omit<PartialDeep<CartReturn>, 'lines'>
+  : Omit<T, 'lines'> & {
+      isOptimistic?: boolean;
+      lines: {
+        nodes: Array<OptimisticCartLine>;
+      };
+    };
 
 /**
  * @param cart The cart object from `context.cart.get()` returned by a server loader.
  *
  * @returns A new cart object augmented with optimistic state. Each cart line item that is optimistically added includes an `isOptimistic` property. Also if the cart has _any_ optimistic state, a root property `isOptimistic` will be set to `true`.
  */
-export function useOptimisticCart<DefaultCart = CartReturn>(
-  cart?: DefaultCart,
-): OptimisticCart<DefaultCart> {
+export function useOptimisticCart<
+  DefaultCart = {
+    lines?: {
+      nodes: Array<{id: string; quantity: number; merchandise: {is: string}}>;
+    };
+  },
+>(cart?: DefaultCart): OptimisticCart<DefaultCart> {
   const fetchers = useFetchers();
 
   if (!fetchers || !fetchers.length) return cart as OptimisticCart<DefaultCart>;

diff --git a/templates/skeleton/app/components/CartMain.tsx b/templates/skeleton/app/components/CartMain.tsx
@@ -8,7 +8,7 @@ import {CartSummary} from './CartSummary';
 export type CartLayout = 'page' | 'aside';
 
 export type CartMainProps = {
-  cart: CartApiQueryFragment;
+  cart: CartApiQueryFragment | null;
   layout: CartLayout;
 };
 
@@ -26,7 +26,7 @@ export function CartMain({layout, cart: originalCart}: CartMainProps) {
     cart &&
     Boolean(cart?.discountCodes?.filter((code) => code.applicable)?.length);
   const className = `cart-main ${withDiscount ? 'with-discount' : ''}`;
-  const cartHasItems = !!cart && cart.totalQuantity > 0;
+  const cartHasItems = cart?.totalQuantity! > 0;
 
   return (
     <div className={className}>

diff --git a/templates/skeleton/app/components/CartSummary.tsx b/templates/skeleton/app/components/CartSummary.tsx
@@ -3,7 +3,7 @@ import type {CartLayout} from '~/components/CartMain';
 import {CartForm, Money, type OptimisticCart} from '@shopify/hydrogen';
 
 type CartSummaryProps = {
-  cart: OptimisticCart<CartApiQueryFragment>;
+  cart: OptimisticCart<CartApiQueryFragment | null>;
   layout: CartLayout;
 };
 
@@ -29,7 +29,7 @@ export function CartSummary({cart, layout}: CartSummaryProps) {
     </div>
   );
 }
-function CartCheckoutActions({checkoutUrl}: {checkoutUrl: string}) {
+function CartCheckoutActions({checkoutUrl}: {checkoutUrl?: string}) {
   if (!checkoutUrl) return null;
 
   return (
@@ -45,7 +45,7 @@ function CartCheckoutActions({checkoutUrl}: {checkoutUrl: string}) {
 function CartDiscounts({
   discountCodes,
 }: {
-  discountCodes: CartApiQueryFragment['discountCodes'];
+  discountCodes?: CartApiQueryFragment['discountCodes'];
 }) {
   const codes: string[] =
     discountCodes

diff --git a/templates/skeleton/app/components/PageLayout.tsx b/templates/skeleton/app/components/PageLayout.tsx
@@ -60,7 +60,7 @@ function CartAside({cart}: {cart: PageLayoutProps['cart']}) {
       <Suspense fallback={<p>Loading cart ...</p>}>
         <Await resolve={cart}>
           {(cart) => {
-            return <CartMain cart={cart!} layout="aside" />;
+            return <CartMain cart={cart} layout="aside" />;
           }}
         </Await>
       </Suspense>

diff --git a/templates/skeleton/app/components/Search.tsx b/templates/skeleton/app/components/Search.tsx
@@ -309,7 +309,6 @@ export function PredictiveSearchForm({
       {...props}
       className={className}
       onSubmit={(event) => {
-        debugger;
         event.preventDefault();
         event.stopPropagation();
         if (!inputRef?.current || inputRef.current.value === '') {

diff --git a/templates/skeleton/app/routes/cart.tsx b/templates/skeleton/app/routes/cart.tsx
@@ -93,7 +93,7 @@ export default function Cart() {
           errorElement={<div>An error occurred</div>}
         >
           {(cart) => {
-            return <CartMain layout="page" cart={cart!} />;
+            return <CartMain layout="page" cart={cart} />;
           }}
         </Await>
       </Suspense>