Fetch and read a cart
This guide shows you how to fetch and read a cart inside your Hydrogen app.
Step 1: Define the cart queryAnchor link to section titled "Step 1: Define the cart query"
Define a query to fetch a cart from the Storefront API. The
cart query is used when you already have an existing cart. In Step 3, you'll learn how to retrieve the persisted cart ID from the session cookies.
For a list of all queryable fields, refer to the Cart object.
Step 2: Define a cart fetcherAnchor link to section titled "Step 2: Define a cart fetcher"
With the query in place, you can now define a
getCart fetcher function that will make a request to the Storefront API. For convenience, you can use Hydrogen's built-in Storefront client that's available on the
The cart query requires a cart identifier, so you make sure your fetcher takes a
cartId as a parameter. Pass both the cart query and
cartId to the storefront client.
To learn more about the Storefront API client and its options, refer to Data fetching.
Step 3: Fetch the cart inside the loader (server-side)Anchor link to section titled "Step 3: Fetch the cart inside the loader (server-side)"
After you've defined a cart fetcher, call the
getCart fetcher inside the Remix loader function if a persisted
cart.id is available. Otherwise, a value of
null is returned to indicate that a cart isn't yet available.
Learn how to persist the cart ID with the Add products to a cart guide.
The root layout loader is a perfect entry point for the cart query because it exposes the cart to all sub-routes and components within the app tree. In another step, you'll learn how to read the cart from deeply nested components.
By deferring the cart query using Remix, you can prevent the request from blocking the UI rendering for components that don't depend on the cart.
Step 4: Read the cart at the root componentAnchor link to section titled "Step 4: Read the cart at the root component"
Using Remix's useLoaderData hook, you can read the data returned by the loader.
Because you deferred the
getCart request, the value returned from the loader will be a Promise instead of a resolved value. To resolve the promise, use the Remix
Step 5: Read the cart from nested componentsAnchor link to section titled "Step 5: Read the cart from nested components"
You might need access to the cart from deeply nested components. Using Remix's useMatches hook, access any loader data anywhere within the route tree.
Step 6: Create a reusable Anchor link to section titled "Step 6: Create a reusable useCart hook (optional)"
useCart hook (optional)
If you need to read a cart from any component, optionally create a reusable
- Add products to a cart on the server-side using a form element and a route action to handle Storefront API requests.
- Learn how to update existing cart line items in Hydrogen.
- Remove line items from a cart on the server-side, using a form element and a Remix route action that handles Storefront API requests.