Shopify Hydrogen — Framework React

// app/routes/products.$handle.tsx (Hydrogen v2 + Remix)
import { json, type LoaderArgs } from '@shopify/remix-oxygen'
import { useLoaderData } from '@remix-run/react'
import { Image, Money, ProductProvider } from '@shopify/hydrogen'

const PRODUCT_QUERY = `#graphql
  query Product($handle: String!) {
    product(handle: $handle) {
      id title descriptionHtml
      featuredImage { url altText width height }
      priceRange { minVariantPrice { amount currencyCode } }
      variants(first: 100) { nodes { id title availableForSale } }
    }
  }
`

export async function loader({ params, context }: LoaderArgs) {
  const { product } = await context.storefront.query(PRODUCT_QUERY, {
    variables: { handle: params.handle },
    cache: context.storefront.CacheLong(), // cache no edge
  })
  if (!product) throw new Response('Not found', { status: 404 })
  return json({ product })
}

export default function Product() {
  const { product } = useLoaderData<typeof loader>()
  return (
    <ProductProvider data={product}>
      <Image data={product.featuredImage} sizes="(max-width: 768px) 100vw, 50vw" />
      <h1>{product.title}</h1>
      <Money data={product.priceRange.minVariantPrice} />
      {/* AddToCart pode usar useCart() hook do Hydrogen */}
    </ProductProvider>
  )
}