feat: regen docs

This commit is contained in:
Michelle Vinci 2021-11-09 18:20:09 -08:00
parent 58afc97bae
commit 74a7cfbd67
68 changed files with 69 additions and 146 deletions

View file

@ -1,4 +1,4 @@
<!-- This file is generated from the source code. Edit the files in /packages/cli and run 'yarn generate-docs' at the root of this repo. --> <!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/cli and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
## `@shopify/hydrogen-cli` ## `@shopify/hydrogen-cli`

View file

@ -1,4 +1,4 @@
<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/AddToCartButton and run 'yarn generate-docs' at the root of this repo. --> <!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/AddToCartButton and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
The `AddToCartButton` component renders a button that adds an item to the cart when pressed. The `AddToCartButton` component renders a button that adds an item to the cart when pressed.
It must be a descendent of the `CartProvider` component. It must be a descendent of the `CartProvider` component.

View file

@ -1,4 +1,4 @@
<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/BuyNowButton and run 'yarn generate-docs' at the root of this repo. --> <!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/BuyNowButton and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
The `BuyNowButton` component renders a button that adds an item to the cart and redirects the customer to checkout. The `BuyNowButton` component renders a button that adds an item to the cart and redirects the customer to checkout.

View file

@ -1,8 +1,4 @@
--- <!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/CartCheckoutButton and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
gid: c7df6e06-3c6c-4c35-b6fe-82bfac8b6b95
title: CartCheckoutButton
description: Use the CartCheckoutButton to render a button that redirects to checkoutUrl for the cart.
---
The `CartCheckoutButton` component renders a button that redirects to the checkout URL for the cart. The `CartCheckoutButton` component renders a button that redirects to the checkout URL for the cart.

View file

@ -1,4 +1,4 @@
<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/CartEstimatedCost and run 'yarn generate-docs' at the root of this repo. --> <!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/CartEstimatedCost and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
The [CartEstimatedCost](/api/storefront/reference/cart/cartestimatedcost) component renders a `Money` component with the The [CartEstimatedCost](/api/storefront/reference/cart/cartestimatedcost) component renders a `Money` component with the
cost associated with the `amountType` prop. If no `amountType` prop is specified, then it defaults to `totalAmount`. cost associated with the `amountType` prop. If no `amountType` prop is specified, then it defaults to `totalAmount`.

View file

@ -1,4 +1,4 @@
<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/CartLineAttributes and run 'yarn generate-docs' at the root of this repo. --> <!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/CartLineAttributes and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
The `CartLineAttributes` component takes a function as a child and calls that function for each of the The `CartLineAttributes` component takes a function as a child and calls that function for each of the
cart line's attributes. It must be a descendent of a `CartLineProvider` component. cart line's attributes. It must be a descendent of a `CartLineProvider` component.

View file

@ -1,4 +1,4 @@
<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/CartLineImage and run 'yarn generate-docs' at the root of this repo. --> <!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/CartLineImage and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
The `CartLineImage` component renders an `Image` component for the cart line merchandise's image. The `CartLineImage` component renders an `Image` component for the cart line merchandise's image.
It must be a descendent of a `CartLineProvider` component. It must be a descendent of a `CartLineProvider` component.

View file

@ -1,4 +1,4 @@
<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/CartLinePrice and run 'yarn generate-docs' at the root of this repo. --> <!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/CartLinePrice and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
The `CartLinePrice` component renders a `Money` component for the cart line merchandise's price or The `CartLinePrice` component renders a `Money` component for the cart line merchandise's price or
compare at price. It must be a descendent of a `CartLineProvider` component. compare at price. It must be a descendent of a `CartLineProvider` component.

View file

@ -1,4 +1,4 @@
<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/CartLineProductTitle and run 'yarn generate-docs' at the root of this repo. --> <!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/CartLineProductTitle and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
The `CartLineProductTitle` component renders a `span` element (or the type of HTML element specified by The `CartLineProductTitle` component renders a `span` element (or the type of HTML element specified by
the `as` prop) with the cart line merchandise's title. It must be a descendent of a `CartLineProvider` component. the `as` prop) with the cart line merchandise's title. It must be a descendent of a `CartLineProvider` component.

View file

@ -1,4 +1,4 @@
<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/CartLineProvider and run 'yarn generate-docs' at the root of this repo. --> <!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/CartLineProvider and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
The `useCartLine` hook provides access to the cart line object. It must be a descendent of a `CartProvider` component. The `useCartLine` hook provides access to the cart line object. It must be a descendent of a `CartProvider` component.

View file

@ -1,4 +1,4 @@
<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/CartLineQuantity and run 'yarn generate-docs' at the root of this repo. --> <!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/CartLineQuantity and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
The `CartLineQuantity` component renders a `span` element (or the type of HTML element The `CartLineQuantity` component renders a `span` element (or the type of HTML element
specified by the `as` prop) with the cart line's quantity. It must be a descendent of a `CartLineProvider` component. specified by the `as` prop) with the cart line's quantity. It must be a descendent of a `CartLineProvider` component.

View file

@ -1,4 +1,4 @@
<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/CartLineQuantityAdjustButton and run 'yarn generate-docs' at the root of this repo. --> <!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/CartLineQuantityAdjustButton and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
The `CartLineQuantityAdjustButton` component renders a button that adjusts the cart line's quantity when pressed. The `CartLineQuantityAdjustButton` component renders a button that adjusts the cart line's quantity when pressed.
It must be a descendent of a `CartLineProvider` component. It must be a descendent of a `CartLineProvider` component.

View file

@ -1,4 +1,4 @@
<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/CartLineSelectedOptions and run 'yarn generate-docs' at the root of this repo. --> <!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/CartLineSelectedOptions and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
The `CartLineSelectedOptions` component takes a function as a child and calls that function The `CartLineSelectedOptions` component takes a function as a child and calls that function
for each of the cart line merchandise's selected options. It must be a descendent of a `CartLineProvider` component. for each of the cart line merchandise's selected options. It must be a descendent of a `CartLineProvider` component.

View file

@ -1,4 +1,4 @@
<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/CartLines and run 'yarn generate-docs' at the root of this repo. --> <!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/CartLines and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
The `CartLines` component iterates over each cart line and renders its `children` within The `CartLines` component iterates over each cart line and renders its `children` within
a `CartLineProvider` for each cart line. It also provides render props in the case where `children` is a function. a `CartLineProvider` for each cart line. It also provides render props in the case where `children` is a function.

View file

@ -1,4 +1,4 @@
<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/CartProvider and run 'yarn generate-docs' at the root of this repo. --> <!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/CartProvider and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
## Example code ## Example code

View file

@ -1,4 +1,4 @@
<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/CartShopPayButton and run 'yarn generate-docs' at the root of this repo. --> <!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/CartShopPayButton and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
The `CartShopPayButton` component renders a `ShopPayButton` for the items in the cart. The `CartShopPayButton` component renders a `ShopPayButton` for the items in the cart.
It must be a descendent of a `CartProvider` component. It must be a descendent of a `CartProvider` component.

View file

@ -1,4 +1,4 @@
<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/ExternalVideo and run 'yarn generate-docs' at the root of this repo. --> <!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/ExternalVideo and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
The `ExternalVideo` component renders an embedded video for the Storefront The `ExternalVideo` component renders an embedded video for the Storefront
API's [`ExternalVideo` object](/api/storefront/reference/products/externalvideo). API's [`ExternalVideo` object](/api/storefront/reference/products/externalvideo).

View file

@ -1,4 +1,4 @@
<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/Image and run 'yarn generate-docs' at the root of this repo. --> <!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/Image and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
The `Image` component renders an image for the Storefront API's The `Image` component renders an image for the Storefront API's
[`Image` object](/api/storefront/reference/common-objects/image). [`Image` object](/api/storefront/reference/common-objects/image).

View file

@ -1,8 +1,4 @@
--- <!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/LocalizationProvider and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
gid: 2d9f4930-fafe-11eb-9a03-0242ac130003
title: LocalizationProvider
description: Use a LocalizationProvider component to automatically query the Storefront API's localization field for the ISO code, name of the country, and available countries, and keep this information in a context.
---
The `LocalizationProvider` component automatically queries the Storefront API's [`localization`](/api/storefront/reference/common-objects/queryroot) field for the `isoCode` and `name` of the `country` and `availableCountries` and keeps this information in a context. The `LocalizationProvider` component automatically queries the Storefront API's [`localization`](/api/storefront/reference/common-objects/queryroot) field for the `isoCode` and `name` of the `country` and `availableCountries` and keeps this information in a context.

View file

@ -1,4 +1,4 @@
<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/MediaFile and run 'yarn generate-docs' at the root of this repo. --> <!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/MediaFile and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
The `MediaFile` component renders the media for the Storefront API's The `MediaFile` component renders the media for the Storefront API's
[Media object](/api/storefront/reference/products/media). It renders an `Image`, a [Media object](/api/storefront/reference/products/media). It renders an `Image`, a

View file

@ -1,4 +1,4 @@
<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/Metafield and run 'yarn generate-docs' at the root of this repo. --> <!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/Metafield and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
The `Metafield` component renders the value of a Storefront The `Metafield` component renders the value of a Storefront
API's [Metafield object](/api/storefront/reference/common-objects/metafield). API's [Metafield object](/api/storefront/reference/common-objects/metafield).

View file

@ -1,4 +1,4 @@
<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/Model3D and run 'yarn generate-docs' at the root of this repo. --> <!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/Model3D and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
The `Model3D` component renders a 3D model (with the `model-viewer` tag) for The `Model3D` component renders a 3D model (with the `model-viewer` tag) for
the Storefront API's [`Model3d` object](/api/storefront/reference/products/model3d). the Storefront API's [`Model3d` object](/api/storefront/reference/products/model3d).

View file

@ -1,4 +1,4 @@
<!-- This file is generated from the source code. Edit the files in /Users/michellevinci/src/github.com/Shopify/hydrogen/packages/hydrogen/src/components/Money and run 'yarn generate-docs' at the root of this repo. --> <!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/Money and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
The `Money` component renders a string of the Storefront API's The `Money` component renders a string of the Storefront API's
[`MoneyV2` object](/api/storefront/reference/common-objects/moneyv2) according to the [`MoneyV2` object](/api/storefront/reference/common-objects/moneyv2) according to the

View file

@ -1,4 +1,4 @@
<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/ProductDescription and run 'yarn generate-docs' at the root of this repo. --> <!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/ProductDescription and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
The `ProductDescription` component renders a `RawHtml` component with The `ProductDescription` component renders a `RawHtml` component with
the product's [`descriptionHtml`](/api/storefront/reference/products/product). the product's [`descriptionHtml`](/api/storefront/reference/products/product).

View file

@ -1,4 +1,4 @@
<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/ProductMetafield and run 'yarn generate-docs' at the root of this repo. --> <!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/ProductMetafield and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
The `ProductMetafield` component renders a The `ProductMetafield` component renders a
[`Metafield`](/api/hydrogen/components/primitive/metafield) component with the product metafield. [`Metafield`](/api/hydrogen/components/primitive/metafield) component with the product metafield.

View file

@ -1,4 +1,4 @@
<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/ProductPrice and run 'yarn generate-docs' at the root of this repo. --> <!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/ProductPrice and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
The `ProductPrice` component renders a `Money` component with the product The `ProductPrice` component renders a `Money` component with the product
[`priceRange`](/api/storefront/reference/products/productpricerange)'s `maxVariantPrice` [`priceRange`](/api/storefront/reference/products/productpricerange)'s `maxVariantPrice`

View file

@ -1,4 +1,4 @@
<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/ProductProvider and run 'yarn generate-docs' at the root of this repo. --> <!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/ProductProvider and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
The `useProduct` hook returns the product object of the nearest `ProductProvider`. It must be a descendent of The `useProduct` hook returns the product object of the nearest `ProductProvider`. It must be a descendent of
a `ProductProvider` component. a `ProductProvider` component.

View file

@ -1,4 +1,4 @@
<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/ProductTitle and run 'yarn generate-docs' at the root of this repo. --> <!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/ProductTitle and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
The `ProductTitle` component renders a `span` element (or the type of The `ProductTitle` component renders a `span` element (or the type of
HTML element specified by the `as` prop) with the product's [`title`](/api/storefront/reference/products/product). HTML element specified by the `as` prop) with the product's [`title`](/api/storefront/reference/products/product).

View file

@ -1,4 +1,4 @@
<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/RawHtml and run 'yarn generate-docs' at the root of this repo. --> <!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/RawHtml and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
The `RawHtml` component renders an HTML string as HTML DOM elements. This should be used for The `RawHtml` component renders an HTML string as HTML DOM elements. This should be used for
displaying rich text-like descriptions associated with a product. displaying rich text-like descriptions associated with a product.

View file

@ -1,4 +1,4 @@
<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/SelectedVariantAddToCartButton and run 'yarn generate-docs' at the root of this repo. --> <!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/SelectedVariantAddToCartButton and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
The `SelectedVariantAddToCartButton` component renders a `AddToCartButton` for the product's The `SelectedVariantAddToCartButton` component renders a `AddToCartButton` for the product's
selected variant. Clicking this button automatically adds the selected variant to the cart. selected variant. Clicking this button automatically adds the selected variant to the cart.

View file

@ -1,4 +1,4 @@
<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/SelectedVariantBuyNowButton and run 'yarn generate-docs' at the root of this repo. --> <!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/SelectedVariantBuyNowButton and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
The `SelectedVariantBuyNowButton` component renders a `BuyNowButton` for the product's selected variant. The `SelectedVariantBuyNowButton` component renders a `BuyNowButton` for the product's selected variant.
Clicking this button automatically adds the selected variant to the cart and redirect the customer to checkout. Clicking this button automatically adds the selected variant to the cart and redirect the customer to checkout.

View file

@ -1,4 +1,4 @@
<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/SelectedVariantImage and run 'yarn generate-docs' at the root of this repo. --> <!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/SelectedVariantImage and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
The `SelectedVariantImage` component renders an `Image` component for the product's selected variant's image. The `SelectedVariantImage` component renders an `Image` component for the product's selected variant's image.
It must be a descendent of a `ProductProvider` component. It must be a descendent of a `ProductProvider` component.

View file

@ -1,4 +1,4 @@
<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/SelectedVariantMetafield and run 'yarn generate-docs' at the root of this repo. --> <!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/SelectedVariantMetafield and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
The `SelectedVariantMetafield` component renders a [`Metafield`](/api/hydrogen/components/primitive/metafield) The `SelectedVariantMetafield` component renders a [`Metafield`](/api/hydrogen/components/primitive/metafield)
component with the selected product's metafield. component with the selected product's metafield.

View file

@ -1,4 +1,4 @@
<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/SelectedVariantPrice and run 'yarn generate-docs' at the root of this repo. --> <!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/SelectedVariantPrice and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
The `SelectedVariantPrice` component renders a `Money` component for the product's selected variant's price or compare at price. The `SelectedVariantPrice` component renders a `Money` component for the product's selected variant's price or compare at price.
It must be a descendent of a `ProductProvider` component. It must be a descendent of a `ProductProvider` component.

View file

@ -1,4 +1,4 @@
<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/SelectedVariantShopPayButton and run 'yarn generate-docs' at the root of this repo. --> <!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/SelectedVariantShopPayButton and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
The `SelectedVariantShopPayButton` component renders a `ShopPayButton` for the product's selected variant. The `SelectedVariantShopPayButton` component renders a `ShopPayButton` for the product's selected variant.
It must be a descendent of a `ProductProvider` component. It must be a descendent of a `ProductProvider` component.

View file

@ -1,4 +1,4 @@
<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/SelectedVariantUnitPrice and run 'yarn generate-docs' at the root of this repo. --> <!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/SelectedVariantUnitPrice and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
The `SelectedVariantUnitPrice` component renders a `UnitPrice` component for the product's selected variant's unit price. The `SelectedVariantUnitPrice` component renders a `UnitPrice` component for the product's selected variant's unit price.
It must be a descendent of a `ProductProvider`. It must be a descendent of a `ProductProvider`.

View file

@ -1,4 +1,4 @@
<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/ShopPayButton and run 'yarn generate-docs' at the root of this repo. --> <!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/ShopPayButton and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
The `ShopPayButton` component renders a button that redirects to the Shop Pay checkout. The `ShopPayButton` component renders a button that redirects to the Shop Pay checkout.

View file

@ -1,4 +1,4 @@
<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/UnitPrice and run 'yarn generate-docs' at the root of this repo. --> <!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/UnitPrice and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
The `UnitPrice` component renders a string with a [UnitPrice](/themes/pricing-payments/unit-pricing) as the The `UnitPrice` component renders a string with a [UnitPrice](/themes/pricing-payments/unit-pricing) as the
[Storefront API's `MoneyV2` object](/api/storefront/reference/common-objects/moneyv2) with a reference unit from [Storefront API's `MoneyV2` object](/api/storefront/reference/common-objects/moneyv2) with a reference unit from

View file

@ -1,4 +1,4 @@
<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/Video and run 'yarn generate-docs' at the root of this repo. --> <!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/Video and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
The `Video` component renders a `video` for the Storefront API's [`Video` object](/api/storefront/reference/products/video). The `Video` component renders a `video` for the Storefront API's [`Video` object](/api/storefront/reference/products/video).

View file

@ -1,8 +1,4 @@
--- <!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/foundation/ShopifyProvider and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
gid: b4dc58a2-fafe-11eb-9a03-0242ac130003
title: ShopifyProvider
description: Use the ShopifyProvider component to wrap your entire app and provide support for hooks.
---
The `ShopifyProvider` component wraps your entire app and provides support for hooks. You should place it in your app's entry point component. For example, `<App>`. The `ShopifyProvider` component wraps your entire app and provides support for hooks. You should place it in your app's entry point component. For example, `<App>`.

View file

@ -1,4 +1,4 @@
<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/foundation/useServerState and run 'yarn generate-docs' at the root of this repo. --> <!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/foundation/useServerState and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
The `useServerState` hook allows you to [manage server state](/api/hydrogen/framework/server-state) when using Hydrogen as a React Server Component framework. The `useServerState` hook allows you to [manage server state](/api/hydrogen/framework/server-state) when using Hydrogen as a React Server Component framework.

View file

@ -1,4 +1,4 @@
<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/foundation/useShop and run 'yarn generate-docs' at the root of this repo. --> <!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/foundation/useShop and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
The `useShop` hook provides access to values within `shopify.config.js`.The `useShop` hook provides access to values within `shopify.config.js`. It must be a descendent of a `ShopifyProvider` component. The `useShop` hook provides access to values within `shopify.config.js`.The `useShop` hook provides access to values within `shopify.config.js`. It must be a descendent of a `ShopifyProvider` component.

View file

@ -1,4 +1,4 @@
<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/hooks/useAvailableCountries and run 'yarn generate-docs' at the root of this repo. --> <!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/hooks/useAvailableCountries and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
The `useAvailableCountries` hook returns an array of available countries used for localization. The `useAvailableCountries` hook returns an array of available countries used for localization.
It must be a descendent of a `LocalizationProvider` component. It must be a descendent of a `LocalizationProvider` component.

View file

@ -1,4 +1,4 @@
<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/hooks/useCart and run 'yarn generate-docs' at the root of this repo. --> <!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/hooks/useCart and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
The `useCart` hook provides access to the cart object. It must be a descendent of a `CartProvider` component. The `useCart` hook provides access to the cart object. It must be a descendent of a `CartProvider` component.

View file

@ -1,4 +1,4 @@
<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/hooks/useCartAttributesUpdateCallback and run 'yarn generate-docs' at the root of this repo. --> <!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/hooks/useCartAttributesUpdateCallback and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
The `useCartAttributesUpdateCallback` hook returns a callback that can be used to update the cart's attributes. It must be a descendent of a `CartProvider` component. The `useCartAttributesUpdateCallback` hook returns a callback that can be used to update the cart's attributes. It must be a descendent of a `CartProvider` component.

View file

@ -1,4 +1,4 @@
<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/hooks/useCartBuyerIdentityUpdateCallback and run 'yarn generate-docs' at the root of this repo. --> <!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/hooks/useCartBuyerIdentityUpdateCallback and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
The `useCartBuyerIdentityUpdateCallback` hook returns a callback that can be used to update the cart's buyer identity. It must be a descendent of a `CartProvider` component. The `useCartBuyerIdentityUpdateCallback` hook returns a callback that can be used to update the cart's buyer identity. It must be a descendent of a `CartProvider` component.

View file

@ -1,4 +1,4 @@
<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/hooks/useCartCheckoutUrl and run 'yarn generate-docs' at the root of this repo. --> <!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/hooks/useCartCheckoutUrl and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
The `useCartCheckoutUrl` hook returns a string of the checkout URL for the cart. It must be a descendent of a `CartProvider` component. The `useCartCheckoutUrl` hook returns a string of the checkout URL for the cart. It must be a descendent of a `CartProvider` component.

View file

@ -1,4 +1,4 @@
<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/hooks/useCartCreateCallback and run 'yarn generate-docs' at the root of this repo. --> <!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/hooks/useCartCreateCallback and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
The `useCartCreateCallback` hook returns a callback that can be used to create a cart. It must be a descendent of a `CartProvider` component. The `useCartCreateCallback` hook returns a callback that can be used to create a cart. It must be a descendent of a `CartProvider` component.

View file

@ -1,4 +1,4 @@
<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/hooks/useCartDiscountCodesUpdateCallback and run 'yarn generate-docs' at the root of this repo. --> <!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/hooks/useCartDiscountCodesUpdateCallback and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
The `useCartDiscountCodesUpdateCallback` hook returns a callback that can be used to update the cart's discount codes. It must be a descendent of a `CartProvider` component. The `useCartDiscountCodesUpdateCallback` hook returns a callback that can be used to update the cart's discount codes. It must be a descendent of a `CartProvider` component.

View file

@ -1,4 +1,4 @@
<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/hooks/useCartLine and run 'yarn generate-docs' at the root of this repo. --> <!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/hooks/useCartLine and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
The `useCartLine` hook provides access to the cart line object. It must be a descendent of a `CartProvider` component. The `useCartLine` hook provides access to the cart line object. It must be a descendent of a `CartProvider` component.

View file

@ -1,4 +1,4 @@
<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/hooks/useCartLinesAddCallback and run 'yarn generate-docs' at the root of this repo. --> <!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/hooks/useCartLinesAddCallback and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
The `useCartLinesAddCallback` hook returns a callback that can be used to add lines to a cart. If a cart doesn't The `useCartLinesAddCallback` hook 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. It must be a descendent of a `CartProvider` component. already exist, then it will create the cart for you. It must be a descendent of a `CartProvider` component.

View file

@ -1,4 +1,4 @@
<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/hooks/useCartLinesRemoveCallback and run 'yarn generate-docs' at the root of this repo. --> <!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/hooks/useCartLinesRemoveCallback and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
The `useCartLinesRemoveCallback` hook returns a callback that can be used to remove lines from a cart. It must be a descendent of a `CartProvider` component. The `useCartLinesRemoveCallback` hook returns a callback that can be used to remove lines from a cart. It must be a descendent of a `CartProvider` component.

View file

@ -1,4 +1,4 @@
<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/hooks/useCartLinesTotalQuantity and run 'yarn generate-docs' at the root of this repo. --> <!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/hooks/useCartLinesTotalQuantity and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
The `useCartLinesTotalQuantity` hook returns the total amount of items in the cart. It must be a descendent of a `CartProvider` component. The `useCartLinesTotalQuantity` hook returns the total amount of items in the cart. It must be a descendent of a `CartProvider` component.

View file

@ -1,4 +1,4 @@
<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/hooks/useCartLinesUpdateCallback and run 'yarn generate-docs' at the root of this repo. --> <!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/hooks/useCartLinesUpdateCallback and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
The `useCartLinesUpdateCallback` hook returns a callback that can be used to update lines in a cart. It must be a descendent of a `CartProvider` component. The `useCartLinesUpdateCallback` hook returns a callback that can be used to update lines in a cart. It must be a descendent of a `CartProvider` component.

View file

@ -1,4 +1,4 @@
<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/hooks/useCartNoteUpdateCallback and run 'yarn generate-docs' at the root of this repo. --> <!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/hooks/useCartNoteUpdateCallback and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
The `useCartNoteUpdateCallback` hook returns a callback that can be used to update the cart's note. It must be a descendent of a `CartProvider` component. The `useCartNoteUpdateCallback` hook returns a callback that can be used to update the cart's note. It must be a descendent of a `CartProvider` component.

View file

@ -1,4 +1,4 @@
<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/hooks/useCountry and run 'yarn generate-docs' at the root of this repo. --> <!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/hooks/useCountry and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
The `useCountry` hook returns a tuple of the current localization country and a function for updating it. The `useCountry` hook returns a tuple of the current localization country and a function for updating it.
It must be a descendent of a `LocalizationProvider` component. It must be a descendent of a `LocalizationProvider` component.

View file

@ -1,4 +1,4 @@
<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/hooks/useMoney and run 'yarn generate-docs' at the root of this repo. --> <!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/hooks/useMoney and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
The `useMoney` hook takes a [`MoneyV2` object](/api/storefront/reference/common-objects/moneyv2) and returns a The `useMoney` hook takes a [`MoneyV2` object](/api/storefront/reference/common-objects/moneyv2) and returns a
default-formatted string of the amount with the correct currency indicator, along with some of the parts provided by default-formatted string of the amount with the correct currency indicator, along with some of the parts provided by

View file

@ -1,4 +1,4 @@
<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/hooks/useParsedMetafields and run 'yarn generate-docs' at the root of this repo. --> <!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/hooks/useParsedMetafields and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
The `useParsedMetafields` hook transforms a [MetafieldConnection](/api/storefront/reference/common-objects/metafieldconnection) The `useParsedMetafields` hook transforms a [MetafieldConnection](/api/storefront/reference/common-objects/metafieldconnection)
in an array of metafields whose `values` have been parsed according to the metafield `type`. in an array of metafields whose `values` have been parsed according to the metafield `type`.

View file

@ -1,4 +1,4 @@
<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/hooks/useProduct and run 'yarn generate-docs' at the root of this repo. --> <!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/hooks/useProduct and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
The `useProduct` hook returns the product object of the nearest `ProductProvider`. It must be a descendent of The `useProduct` hook returns the product object of the nearest `ProductProvider`. It must be a descendent of
a `ProductProvider` component. a `ProductProvider` component.

View file

@ -1,4 +1,4 @@
<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/hooks/useProductOptions and run 'yarn generate-docs' at the root of this repo. --> <!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/hooks/useProductOptions and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
The `useProductOptions` hook returns an object that enables you to keep track of the The `useProductOptions` hook 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. selected variant and/or selling plan state, as well as callbacks for modifying the state.
@ -25,7 +25,7 @@ export function MyComponent() {
value={selectedVariant?.id} value={selectedVariant?.id}
onChange={(e) => onChange={(e) =>
setSelectedVariant( setSelectedVariant(
variants.find((variant) => variant.id === e.target.value) variants.find((variant) => variant.id === e.target.value),
) )
} }
> >

View file

@ -1,4 +1,4 @@
<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/hooks/useProductOptions and run 'yarn generate-docs' at the root of this repo. --> <!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/hooks/useQuery and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
The `useQuery` hook is a wrapper around `useQuery` from `react-query`. It supports Suspense calls on the server and on the client. The `useQuery` hook is a wrapper around `useQuery` from `react-query`. It supports Suspense calls on the server and on the client.

View file

@ -1,30 +0,0 @@
The `useServerState` hook allows you to [manage server state](/api/hydrogen/framework/server-state) when using Hydrogen as a React Server Component framework.
## Return value
The `useServerState` hook returns an object with the following keys:
| Key | Description |
| ---------------- | -------------------------------------------------------------------------------------- |
| `serverState` | The current server state. |
| `setServerState` | A function used to modify server state. |
| `pending` | Whether a [transition is pending](https://github.com/reactwg/react-18/discussions/41). |
## `setServerState`
For convenience, `setServerState` accepts arguments in the following ways:
{% codeblock file %}
```js
// Update a top-level state property based on key
setServerState(key: string, value: any)
// Spread a new value object onto existing state
setServerState(newValue: object)
// Provide a callback function to update the state completely
setServerState((previousState) => object)
```
{% endcodeblock %}

View file

@ -1,35 +0,0 @@
The `useShop` hook provides access to values within `shopify.config.js`.
> Note:
> It must be a descendent of a `ShopifyProvider` component.
## Example code
{% codeblock file %}
```jsx
import {useShop} from '@shopify/hydrogen';
export default function MyPage() {
const {locale} = useShop();
return <h1>The locale is {locale}</h1>;
}
```
{% endcodeblock %}
## Return value
The `useShop` hook returns an object with the following keys:
| Key | Description |
| ---- | ----------- |
| `locale` | The locale set in `shopify.config.js`. |
| `storeDomain` | The store domain set in `shopify.config.js`. |
| `storefrontToken` | The Storefront API token set in `shopify.config.js`. |
| `graphqlApiVersion` | The GraphQL API version set in `shopify.config.js`. |
## Related components
- [`ShopifyProvider`](/api/hydrogen/components/global/shopifyprovider)

View file

@ -1,6 +1,6 @@
<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/hooks/useShopQuery and run 'yarn generate-docs' at the root of this repo. --> <!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/hooks/useShopQuery and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
The `useShopQuery` hook allows you to make server-only GraphQL queries to the Storefront API. The `useShop` hook provides access to values within `shopify.config.js`. It must be a descendent of a `ShopifyProvider` component. The `useShopQuery` hook allows you to make server-only GraphQL queries to the Storefront API. The `useShop` hook provides access to values within `shopify.config.js`. It must be a descendent of a `ShopifyProvider` component.
## Example code ## Example code

View file

@ -1,4 +1,4 @@
<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/utilities/flattenConnection and run 'yarn generate-docs' at the root of this repo. --> <!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/utilities/flattenConnection and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
The `flattenConnection` utility transforms a connection object from the Storefront API (for example, [Product-related connections](api/storefront/reference/products/product#connections)) into a flat array of nodes. The `flattenConnection` utility transforms a connection object from the Storefront API (for example, [Product-related connections](api/storefront/reference/products/product#connections)) into a flat array of nodes.

View file

@ -1,4 +1,4 @@
<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/utilities/isClient and run 'yarn generate-docs' at the root of this repo. --> <!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/utilities/isClient and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
The `isClient` utility is a function that returns a boolean indicating The `isClient` utility is a function that returns a boolean indicating
if the code was run on the client. if the code was run on the client.

View file

@ -1,4 +1,4 @@
<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/utilities/isServer and run 'yarn generate-docs' at the root of this repo. --> <!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/utilities/isServer and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
The `isServer` utility is a function that returns a `boolean` indicating The `isServer` utility is a function that returns a `boolean` indicating
if the code was run on the server. if the code was run on the server.

View file

@ -1,4 +1,4 @@
<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/utilities/parseMetafieldValue and run 'yarn generate-docs' at the root of this repo. --> <!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/utilities/parseMetafieldValue and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
The `parseMetafieldValue` function parses a [Metafield](/api/storefront/reference/common-objects/metafield)'s `value` from a string into a sensible type corresponding to the [Metafield](/api/storefront/reference/common-objects/metafield)'s `type`. The `parseMetafieldValue` function parses a [Metafield](/api/storefront/reference/common-objects/metafield)'s `value` from a string into a sensible type corresponding to the [Metafield](/api/storefront/reference/common-objects/metafield)'s `type`.
@ -67,7 +67,7 @@ export function Product({handle}) {
const metafields = flattenConnection(data.product.metafields); const metafields = flattenConnection(data.product.metafields);
const parsedMetafields = metafields.map((metafield) => const parsedMetafields = metafields.map((metafield) =>
parseMetafieldValue(metafield) parseMetafieldValue(metafield),
); );
return ( return (