useFetchProduct

A client-side React hook that fetches a WooCommerce product by its database ID and optionally fetches a specific product variation. Used by components that need to load product data on the client after initial render.

Source: hooks/useFetchProduct/useFetchProduct.ts

import { useFetchProduct } from '@/hooks/useFetchProduct';

function ProductDetails({ productId, variationId }: { productId: number; variationId?: number }) {
  const { product, variation } = useFetchProduct(productId, variationId);

  if (!product) return <div>Loading...</div>;

  return (
    <div>
      <h1>{product.name}</h1>
      <p>{variation?.name || product.name}</p>
    </div>
  );
}

The Product type is a union of ProductInterface, InventoriedProduct, ProductWithVariations, and ProductWithPricing, giving access to fields like name, price, stockStatus, variations, and more.

1. On mount - Fetches the product from /api/product/{productId} with force-cache and a 1-day revalidation period.

2. When variationId is provided - Also fetches the variation from /api/product/{productId}/{variationId} with the same caching strategy.

3. When productId changes - Re-fetches the product data.

4. When variationId changes - Re-fetches only the variation data.

The generated spec file (useFetchProduct.spec.ts) mocks apiCall and verifies:

• Product is fetched on mount
• Both product and variation are undefined initially
• Variation is fetched when variationId is provided
• Variation is not fetched when variationId is omitted