Fetch and read a cart

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.

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 request context.

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.

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.

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 component:

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.

If you need to read a cart from any component, optionally create a reusable useCart hook.

• 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.