Hydrogen hooks overview

Hydrogen contains a set of Shopify-specific commerce hooks that help accelerate your development process. This guide provides a complete reference of Hydrogen hooks.

Primitive hooks

Primitive hooks are the building blocks for different component types, including products, variants, and cart.

The useMoney hook takes a MoneyV2 object and returns a default-formatted string of the amount with the correct currency indicator, along with some of the parts provided by Intl.NumberFormat.

Global hooks

Hydrogen provides the following global hooks that you can use to fetch data from server components:

Hook name Description
useQuery A wrapper around useQuery from react-query. It supports Suspense calls on the server and on the client.
useServerState Manage a server state when using Hydrogen as a React Server Component framework.
useShop Access values within shopify.config.js.
useShopQuery Make server-only GraphQL queries to the Storefront API.

Product and variant hooks

Products are the goods, digital downloads, services, and gift cards that a merchant sells. If a product has options, like size or color, then merchants can add a variant for each combination of options.

Each combination of option values for a product can be a variant for that product. For example, a t-shirt might be available for purchase in blue and green. The blue t-shirt and the green t-shirt are variants.

Hydrogen includes the following product and variant hooks:

Hook name Description
useProduct Returns the product object of the nearest ProductProvider.
useProductOptions Returns an object that enables you to keep track of the selected variant and/or selling plan state, as well as callbacks for modifying the state.

Cart hooks

A cart contains the merchandise that a customer intends to purchase and the estimated cost associated with the cart. When a customer is ready to purchase their items, they can proceed to checkout.

Hydrogen includes the following cart hooks:

Hook name Description
useCart Provides access to the Storefront API's Cart object.
useCartAttributesUpdateCallback Returns a callback that can be used to update the cart's attributes.
useCartBuyerIdentityUpdateCallback Returns a callback that can be used to update the cart's buyer identity.
useCartCheckoutUrl Returns a string of the checkout URL for the cart.
useCartCreateCallback Returns a callback that can be used to create a cart.
useCartDiscountCodesUpdateCallback Returns a callback that can be used to update the cart's discount codes.
useCartLine Provides access to the Storefront API's CartLine object.
useCartLinesAddCallback Returns a callback that can be used to add lines to a cart. If a cart doesn't already exist, then it will create the cart for you.
useCartLinesRemoveCallback Returns a callback that can be used to remove lines from a cart.
useCartLinesTotalQuantity Returns the total amount of items in the cart.
useCartLinesUpdateCallback Returns a callback that can be used to update lines in a cart.
useCartNoteUpdateCallback Returns a callback that can be used to update the cart's note.

Localization hooks

Localization can help merchants expand their business to a global audience by creating shopping experiences in local languages and currencies.

Hydrogen includes the following localization hooks:

Hook name Description
useAvailableCountries Returns an array of the available countries used for localization purposes.
useCountry Returns a tuple of the current localization country and a function for updating it.

Metafield hooks

Metafields allow you to attach specialized information to Shopify resources, such as part numbers or release dates. Merchants and other apps can retrieve and edit the data that's stored in metafields from the Shopify admin.

Hydrogen includes the following metafield hooks:

Hook name Description
useParsedMetafields Returns an array of parsed metafields.

Next steps

On this page