How can I access cart to determine whether product is already in cart?

[w3nda]

In my product card component, I want to be able to access the cart and determine if the product is already in cart. if it is I want to disable the "add to cart" button as you can only add the product once.

I'm using shopify hydrogen with remix, is there any way to do this?

[wizardlyhel]

You can store a list of product_id or variant_id parsed from cart query result in a provider. Create a convenient hook to access that list. Using the hook, check if the current product_id or variant_id is in that list you have stored. If it is, you can disable add to cart button.

[w3nda]

Wouldn't that mean I would have to wrap a provider that will have to wait for cart promise to resolve before rendering the app?

[w3nda]

I ended up using this approach but changing the way I fetch the cart so leaving this here for whoever needs it.
Why would I need it?

1. You want to access the cart from anywhere
2. You want to listen to it's changes

Steps

1. Start with moving the cart from loadDeferredData to loadCriticalData.
2. Make sure you await cart.get and return it, that way you will always have access to the data without the need to await the promise.
   It should look like this:

async function loadCriticalData({context}: LoaderFunctionArgs) {
  const {storefront, cart} = context;

  const [header] = await Promise.all([
    storefront.query(HEADER_QUERY, {
      cache: storefront.CacheLong(),
      variables: {
        headerMenuHandle: 'main-menu', // Adjust to your header menu handle
      },
    }),
    // Add other queries here, so that they are loaded in parallel
  ]);

  // getting the cart data now allows easier interaction across the app
  const resolvedCart = await cart.get();

  return {
    header,
    cart: resolvedCart,
  };
}

3. Create a provider, pass the cart to it

import {useOptimisticCart} from '@shopify/hydrogen';
import React, {createContext, useContext} from 'react';
import {type CartApiQueryFragment} from 'storefrontapi.generated';

const CartContext = createContext<{
  cart: CartApiQueryFragment | null;
  loading: boolean;
}>({
  cart: null,
  loading: false,
});

export const useCart = () => {
  return useContext(CartContext);
};

type CartProviderProps = {
  cart: CartApiQueryFragment | null;
  children: React.ReactNode;
};

export const CartProvider = ({
  cart: originalCart,
  children,
}: CartProviderProps) => {
  const optimisticCart = useOptimisticCart(originalCart);

  return (
    <CartContext.Provider
      value={{
        cart: optimisticCart,
        loading: false,
      }}
    >
      {children}
    </CartContext.Provider>
  );
};

[wizardlyhel]

The solution you have will make the initial server rendering be dependent on the cart query. Typically, cart query is slower because it is a dynamic query.

There are multiple ways to wait for a deferred promise on the client side:

1. You can use the <Suspense> <Await> pattern

export default function Cart() {
  const rootData = useRootLoaderData();
  const cartPromise = rootData.cart;

  return (
    <div className="cart">
      <h1>Cart</h1>
      <Suspense fallback={<p>Loading cart ...</p>}>
        <Await
          resolve={cartPromise}
          errorElement={<div>An error occurred</div>}
        >
          {(cart) => {
            return <CartMain layout="page" cart={cart} />;
          }}
        </Await>
      </Suspense>
    </div>
  );
}

2. You can use useEffect to make sure the passed in deferred cart promise is resolved

import {type CartReturn} from '@shopify/hydrogen';

export function Cart({
  cart: deferredCart,
}: {
  cart: Awaited<CartReturn>;
}) {
  const [cart, setCart] = useState<Cart>();
  useEffect(() => {
    if (!deferredCart) return;

    Promise.resolve(deferredCart).then((updatedCart) => {
      setCart(updatedCart)
    });

    return () => {};
  }, [setCart, deferredCart]);