> ## Documentation Index
> Fetch the complete documentation index at: https://docs.stackfront.digital/llms.txt
> Use this file to discover all available pages before exploring further.

# Single Product

# Single Product

The `useProduct` hook fetches a single product by its handle (the URL-friendly slug).

## Usage

```tsx theme={null}
import { useProduct, useCart } from 'react-native-stackfront-sdk';

function ProductScreen({ handle }: { handle: string }) {
  const { data: product, loading, error } = useProduct(handle);
  const { addLine } = useCart();

  if (loading) return <Loading />;
  if (error) return <Error message={error.message} />;
  if (!product) return <NotFound />;

  return (
    <ScrollView>
      <ImageSlider images={product.images?.edges?.map(e => e.node)} />
      <Text style={typography.h1}>{product.title}</Text>
      <Text>{product.description}</Text>
      <Price price={product.priceRange?.minVariantPrice} />
      {product.variants?.edges?.map(({ node }) => (
        <VariantRow key={node.id} variant={node} onSelect={() => addLine(node.id, 1)} />
      ))}
    </ScrollView>
  );
}
```

## Hook API

```ts theme={null}
function useProduct(handle: string): {
  data: unknown;           // full product shape
  loading: boolean;
  error: Error | null;
  refetch: () => Promise<void>;
}
```

## Query Fields

The `GET_PRODUCT` query returns detailed product data:

* Basic fields: `id`, `title`, `handle`, `description`, `descriptionHtml`
* `availableForSale`, `tags`, `productType`, `vendor`
* `priceRange` — min/max variant prices
* `images(first: 10)` — all images with `url`, `altText`, `width`, `height`
* `variants(first: 20)` — all variants with `id`, `title`, `price`, `compareAtPrice`, `selectedOptions`, `image`
* `options` — product options with `name` and `values`
* `seo` — `{ title, description }`

## Fetching by ID

If you only have a product's Shopify GID, use the service method directly:

```ts theme={null}
const { products } = useStackfront();
const product = await products.getProductById('gid://shopify/Product/123');
```

## Adding to Cart

Combine with `useCart()` to add a variant:

```ts theme={null}
const { addLine } = useCart();
addLine(variantId, 1);
```

See [Cart & Checkout](/docs/cart/overview) for details.