> ## 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.

# Product Listing

# Product Listing

The `useProducts` hook fetches a paginated list of products from the Shopify Storefront API.

## Usage

```tsx theme={null}
import { useProducts } from 'react-native-stackfront-sdk';
import { FlashList } from '@shopify/flash-list';

function ProductGrid() {
  const { data, loading, refetch } = useProducts({ first: 20 });

  if (loading && !data) return <Loading />;

  const products = data?.edges ?? [];

  return (
    <FlashList
      data={products}
      renderItem={({ item }) => <ProductCard product={item.node} />}
      estimatedItemSize={300}
      onEndReached={() => {
        if (data?.pageInfo?.hasNextPage) {
          const lastCursor = products[products.length - 1]?.cursor;
          // Refetch with cursor for next page
        }
      }}
      onRefresh={refetch}
      refreshing={loading}
    />
  );
}
```

## Hook API

```ts theme={null}
function useProducts(options?: {
  first?: number;   // items per page (default 20)
  after?: string;   // cursor for pagination
}): {
  data: unknown;           // GraphQL connection shape
  loading: boolean;
  error: Error | null;
  refetch: () => Promise<void>;
}
```

## Query Fields

Each product edge returns:

* `id` — Shopify GID
* `title`, `handle`, `description`
* `availableForSale`
* `priceRange` — `{ minVariantPrice, maxVariantPrice }`
* `images(first: 1)` — primary image
* `variants(first: 1)` — first variant with price

For the full field set, see the `GET_PRODUCTS` operation in the [GraphQL Reference](/docs/services-reference#graphql-operations).