Hydrogen hooks overview
Hydrogen hooks are functions that allow you to use state and other methods inside Hydrogen components.
Framework hooks
Anchor link to section titled "Framework hooks"Framework hooks are hooks that are available in the Hydrogen framework.
| Hook name | Description |
|---|---|
| useNavigate | Imperatively navigates between routes. |
| useRouteParams | Retrieves the parameters of an active route. |
| useSession | Reads session data in server components. |
Primitive hooks
Anchor link to section titled "Primitive hooks"Primitive hooks are the building blocks for different component types, including products, variants, and cart.
| Hook name | Description |
|---|---|
| useLoadScript | Loads an external script tag on the client-side. |
| useMoney | 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
Anchor link to section titled "Global hooks"Global hooks are used to fetch data from server components.
| Hook name | Description |
|---|---|
| fetchSync | Makes API requests and is the recommended way to make simple fetch calls on the server. |
| useQuery | Executes an asynchronous operation like fetch in a way that supports Suspense. |
| useServerProps | Manages server props passed to your server components when using Hydrogen as a React Server Component framework. |
| useShop | Accesses values within the shopify property in the hydrogen.config.js file. |
| useShopQuery | Makes server-only GraphQL queries to the Storefront API. |
| useUrl | Retrieves the current URL in a server or client component. |
Product and variant hooks
Anchor link to section titled "Product and variant hooks"Product and variant hooks relate to 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.
| 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 relate to the merchandise that a customer intends to purchase.
| Hook name | Description |
|---|---|
| useCart | Provides access to the Storefront API's Cart object and related callbacks to manipulate the cart. |
| useCartLine | Provides access to the Storefront API's CartLine object. |
Localization hooks
Anchor link to section titled "Localization hooks"Localization hooks relate to creating shopping experiences for a global audience in local languages and currencies.
| Hook name | Description |
|---|---|
| useCountry | Returns a tuple of the current localization country and a function for updating it. |
Metafield hooks
Anchor link to section titled "Metafield hooks"Metafield hooks relate to attaching specialized information to Shopify resources, such as part numbers or release dates.
| Hook name | Description |
|---|---|
| useParsedMetafields | Returns an array of parsed metafields. |