---
title: Read data from a cart
description: Use a cart handler and read a visitor's cart.
source_url:
  html: 'https://shopify.dev/docs/storefronts/headless/legacy/hydrogen/cart/read'
  md: 'https://shopify.dev/docs/storefronts/headless/legacy/hydrogen/cart/read.md'
api_name: hydrogen
---

Legacy Hydrogen

These pages refer to Hydrogen versions 2026-04 and earlier. For versions 2026-10 and later, refer to the latest [Hydrogen docs](https://shopify.dev/docs/storefronts/hydrogen). If you're not using the latest version of Hydrogen, then we recommend that you migrate your storefront. To learn more, refer to [Migrate to the latest version of Hydrogen](https://shopify.dev/docs/storefronts/hydrogen/migrate).

# Read data from a cart

**Note:**

This guide might not be compatible with features introduced in Hydrogen version 2025-05 and above. Check the [2026-04 reference](https://shopify.dev/docs/api/hydrogen/2026-04) if you encounter any issues.

This guide shows you how to read a user's cart.

***

## Requirements

* You've completed the [quickstart guide](https://shopify.dev/docs/storefronts/headless/legacy/hydrogen/getting-started).
* You've [set up a cart handler](https://shopify.dev/docs/storefronts/headless/legacy/hydrogen/cart/setup).

***

## Step 1: Get a visitor's cart

Use the `cart`, created from [`createCartHandler`](https://shopify.dev/docs/api/hydrogen/2026-04/utilities/cart/createcarthandler), to get a user's cart. You don't need to provide a cart ID because it's already handled by the cart handler. `cart.get()` returns a promise. Use Remix's [defer](https://remix.run/docs/en/main/utils/defer) so that the cart data is deferred, and [streamed to the browser](https://remix.run/docs/en/1.17.1/guides/streaming#streaming).

## File

## /app/root.jsx

##### JavaScript

```jsx
export async function loader({context}) {
  const {cart} = context;

  return defer({
    cart: cart.get(),
  });
}
```

##### TypeScript

```jsx
export async function loader({context}: LoaderArgs) {
  const {cart} = context;

  return defer({
    cart: cart.get(),
  });
}
```

***

## Step 2: Server render the content of the cart

You can get the content of the cart using Remix's [`useMatches`](https://remix.run/docs/en/main/hooks/use-matches) hook, because you made it available in the root loader. Since the data is deferred, you'll need to wait for the data.

## File

## /app/components/CartDrawer.jsx

##### JavaScript

```jsx
function CartDrawer() {
  const [root] = useMatches();

  // Cart data is deferred
  // Use Suspense to unblock UI rendering and Await to resolve when data arrives
  return (
    <Suspense fallback={<CartLoading />}>
      <Await resolve={root.data?.cart}>
        {(cart) => <Cart cart={cart} />}
      </Await>
    </Suspense>
  );
}
```

##### TypeScript

```jsx
function CartDrawer() {
  const [root] = useMatches();

  // Cart data is deferred
  // Use Suspense to unblock UI rendering and Await to resolve when data arrives
  return (
    <Suspense fallback={<CartLoading />}>
      <Await resolve={root.data?.cart}>
        {(cart) => <Cart cart={cart} />}
      </Await>
    </Suspense>
  );
}
```

***

## Next steps

* Learn how to [manage items in a cart](https://shopify.dev/docs/storefronts/headless/legacy/hydrogen/cart/manage).
* Learn how to [render the cart client side](https://shopify.dev/docs/storefronts/headless/legacy/hydrogen/cart/render-client-side).

***