useReactiveVar

import { useReactiveVar } from '@apollo/client';

export function Cart() {
  const cartItems = useReactiveVar(cartItemsVar);

  return (
    <div class="cart">
      <Header>My Cart</Header>
      {cartItems.length === 0 ? (
        <p>No items in your cart</p>
      ) : (
        <Fragment>
          {cartItems.map(productId => (
            <CartItem key={productId} />
          ))}
        </Fragment>
      )}
    </div>
  );
}