Add the raw product returned from the Storefront API to also return from useProduct

.changeset/few-yaks-admire.md

@@ -0,0 +1,18 @@
+---
+'@shopify/hydrogen-react': patch
+---
+
+Add the raw product returned from the Storefront API to also return from `useProduct()`:
+
+```ts
+function SomeComponent() {
+  const {product} = useProduct();
+
+  return (
+    <div>
+      <h2>{product.title}</h2>
+      <h3>{product.description}</h3>
+    </div>
+  );
+}
+```

packages/hydrogen-react/src/ProductProvider.test.tsx

@@ -43,6 +43,17 @@ describe('<ProductProvider />', () => {
     ]);
   });
 
+  it('returns full product', () => {
+    const product = getProduct({variants: VARIANTS});
+    const {result} = renderHook(() => useProduct(), {
+      wrapper: ({children}) => (
+        <ProductProvider data={product}>{children}</ProductProvider>
+      ),
+    });
+
+    expect(result.current.product).toEqual(product);
+  });
+
   it('provides setSelectedOption callback', async () => {
     const user = userEvent.setup();
 

packages/hydrogen-react/src/ProductProvider.tsx

@@ -167,6 +167,7 @@ export function ProductProvider({
 
   const value = useMemo<ProductHookValue>(
     () => ({
+      product,
       variants,
       variantsConnection: product.variants,
       options,
@@ -183,10 +184,9 @@ export function ProductProvider({
       sellingPlanGroupsConnection: product.sellingPlanGroups,
     }),
     [
+      product,
       isOptionInStock,
       options,
-      product.sellingPlanGroups,
-      product.variants,
       selectedOptions,
       selectedSellingPlan,
       selectedSellingPlanAllocation,
@@ -335,6 +335,8 @@ export interface OptionWithValues {
 
 type ProductHookValue = PartialDeep<
   {
+    /** The raw product from the Storefront API */
+    product: Product;
     /** An array of the variant `nodes` from the `VariantConnection`. */
     variants: ProductVariantType[];
     variantsConnection?: ProductVariantConnection;