ProductProvider
The ProductProvider component sets up a context with product details. Descendents of
this component can use the useProduct hook.
Example code
Anchor link to section titled "Example code"
| Name | Type | Description |
|---|---|---|
| children | ReactNode |
A ReactNode element. |
| data | PartialDeep<ProductType> |
An object with fields that correspond to the Storefront API's Product object. |
| initialVariantId? | Parameters<typeof useProductOption>['0']['initialvariantid'] |
The initially selected variant. The following logic applies to initialVariantId:
|
Component type
Anchor link to section titled "Component type"The ProductProvider component is a client component, which means that it renders on the client. For more information about component types, refer to React Server Components.
Storefront API data
Anchor link to section titled "Storefront API data"The data prop is an object with fields that correspond to the Storefront API's Product object:
The Product object includes variables that you will need to provide values for when performing your query.
| Variable | Description |
|---|---|
$numProductMedia |
The number of Media objects to query for in a MediaConnection. |
$numProductMetafields |
The number of Metafields objects to query for in a MetafieldConnection. |
$numProductVariants |
The number of ProductVariant objects to query for in a ProductVariantConnection. |
$numProductVariantMetafields |
The number of Metafield objects to query for in a variant's MetafieldConnection. |
$numProductVariantSellingPlanAllocations |
The number of SellingPlanAllocations to query for in a variant's SellingPlanAllocationConnection. |
$numProductSellingPlanGroups |
The number of SellingPlanGroups objects to query for in a SellingPlanGroupConnection. |
$numProductSellingPlans |
The number of SellingPlan objects to query for in a SellingPlanConnection. |
$includeReferenceMetafieldDetails |
A boolean indicating if the reference metafield details should be queried. |
Example query
Anchor link to section titled "Example query"