Skip to main content

​
Single Product

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

​
Usage

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

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: 
const { products } = useStackfront();
const product = await products.getProductById('gid://shopify/Product/123');

​
Adding to Cart

Combine with useCart() to add a variant: 
const { addLine } = useCart();
addLine(variantId, 1);
See Cart & Checkout for details.