Actually getting OptimisticCart to work.

[PatNei]

Hi, I am fairly new to Hydrogen and somewhat to Remix/React. I am experimenting with the useOptimisticCart hook that has been released recently and have run into some problems (might be related to a lack of understanding).
I have upgraded using the upgrade/migration guide you have provided
My code consists of a header that is called in the layout.tsx which is called from the root.tsx, it contains a CartMenu based on the Popover from shadcn

CartPopover.tsx

export const CartMenu = ({ children }: { children: ReactNode }) => {
	return (
		<Popover>
			<PopoverTrigger>
				<CartIcon numberOfLines={0} />
			</PopoverTrigger>
			<PopoverContent className="mr-[5dvw] mt-1 max-h-[80dvh]">
				{children}
			</PopoverContent>
		</Popover>
	);
};

Header.tsx

export function Header({
	header,
	cart,
	className,
}: HeaderProps & { className?: string }) {
	const { shop, menu } = header;
	const primaryDomainUrl = header.shop.primaryDomain.url;
	const { publicStoreDomain } = useRootLoaderData();
	const optimisticCart = useOptimisticCart(cart);
	console.log(optimisticCart);
	return (
		<div className={`flex min-w-full max-w-full h-full ${className}`}>
			<NavigationMenu className="min-w-full max-w-full h-full flex content-start justify-between">
				<NavigationMenuList className="flex flex-col content-start text-start justify-start">
					<NavigationMenuItem>
						<NavigationMenuLink>
							<NavLink
								prefetch="intent"
								to="/"
								className={getHeaderNavLinkStyle}
								end
							> ...
							</NavLink>
						</NavigationMenuLink>
					</NavigationMenuItem>
					<NavigationMenuItem className="">
						<p>Some text</p>
					</NavigationMenuItem>
					<NavigationMenuItem className="flex gap-2">
						...
					</NavigationMenuItem>
				</NavigationMenuList>
				<NavigationMenuList className="flex">
					<NavigationMenuItem>
						<CartMenu>
							{optimisticCart?.lines?.nodes ? (
								optimisticCart.lines.nodes.map((line) => {
									return <div key={line.id}>{line.merchandise.title}</div>;
								})
							) : (
								<div>Cart is empty...</div>
							)}
						</CartMenu>
					</NavigationMenuItem>
				</NavigationMenuList>
			</NavigationMenu>
		</div>
	);
}

The main issue is that the code always returns the <div>Cart is empty..</div> element.

The console log however prints (firefox)

This indicates that

• at some point the lines array is not empty and the promise is fulfilled.
• It also indicates that wares gets added to the cart correctly at some point (also it is possible to get them rendered using the Suspense Await components).

Now I assume it is due to the nature of promises, that it gets logged to the console after the UI is rendered, but shouldn't it cause a re-render when the promise returns. And is the idea of the OptimisticCart that it renders immediately and we don't have to wait for the promise to return?

The result is the same no matter where I specify the code even directly in the root.tsx.

I feel like I might be doing some basic thing wrong, but I have been stuck on this since it was released and am at my wits end.

Link to my repository if it is of any help!

Best regards!

Edit 1:
Adding a console.log() we can see that it enters the mapping function at some point, but doesn't render anything as it logs the line.id.

<CartMenu>
	{optimisticCart?.lines?.nodes ? (
		optimisticCart.lines.nodes.map((line) => {
			console.log(line.id);
			return <div key={line.id}>{line.merchandise.title}</div>;
		})
	) : (
		<div>Cart is empty...</div>
	)}
</CartMenu>

[frandiox]

Maybe you're missing passing selectedVariant in AddToCartButton here? That's at least one difference from our template 🤔

cc @blittle

[blittle]

Yes, I think this is the problem. You need to pass the selectedVariant, that's how we know which variant to render optimistically.

[mikeskr]

Hello, I'm having difficulty implementing the OptimisticCart hook with the demo-store. I believe it's because the cart data is shaped differently. specifically the demo store is using edges while the skeleton is using nodes.

I think the issue is specifically with this line:
const cartLines = optimisticCart.lines.nodes;

Thanks!