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 are the building blocks for different component types, including products, variants, and cart.
Hydrogen provides the following global hooks that you can use to fetch data from server components:
|useQuery||A wrapper around
|useServerState||Manage a server state when using Hydrogen as a React Server Component framework.|
|useShop||Access values within
|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:
|useProduct||Returns the product object of the nearest
|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.|
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:
|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 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:
|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.|
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:
|useParsedMetafields||Returns an array of parsed metafields.|