---
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/hydrogen/cart/read'
  md: 'https://shopify.dev/docs/storefronts/headless/hydrogen/cart/read.md'
---

ExpandOn this page

* [Requirements](https://shopify.dev/docs/storefronts/headless/hydrogen/cart/read.md#requirements)
* [Step 1: Get a visitor's cart](https://shopify.dev/docs/storefronts/headless/hydrogen/cart/read.md#step-1-get-a-visitors-cart)
* [Step 2: Server render the content of the cart](https://shopify.dev/docs/storefronts/headless/hydrogen/cart/read.md#step-2-server-render-the-content-of-the-cart)
* [Next steps](https://shopify.dev/docs/storefronts/headless/hydrogen/cart/read.md#next-steps)

# Read data from a cart

Note

This guide might not be compatible with features introduced in Hydrogen version 2025-05 and above. Check the latest [documentation](https://shopify.dev/docs/api/hydrogen) 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/hydrogen/getting-started).
* You've [set up a cart handler](https://shopify.dev/docs/storefronts/headless/hydrogen/cart/setup).

***

## Step 1: Get a visitor's cart

Use the `cart`, created from [`createCartHandler`](https://shopify.dev/docs/api/hydrogen/latest/utilities/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/hydrogen/cart/manage).
* Learn how to [render the cart client side](https://shopify.dev/docs/storefronts/headless/hydrogen/cart/render-client-side).

***

* [Requirements](https://shopify.dev/docs/storefronts/headless/hydrogen/cart/read.md#requirements)
* [Step 1: Get a visitor's cart](https://shopify.dev/docs/storefronts/headless/hydrogen/cart/read.md#step-1-get-a-visitors-cart)
* [Step 2: Server render the content of the cart](https://shopify.dev/docs/storefronts/headless/hydrogen/cart/read.md#step-2-server-render-the-content-of-the-cart)
* [Next steps](https://shopify.dev/docs/storefronts/headless/hydrogen/cart/read.md#next-steps)