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

# Collections

# Collections

The `useCollections` hook fetches the store's collection list. Each collection can then be expanded to show its products.

## Usage

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

function CollectionGrid() {
  const { data, loading } = useCollections({ first: 20 });

  if (loading) return <Loading />;

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

  return (
    <FlashList
      data={collections}
      renderItem={({ item }) => (
        <CollectionCard
          title={item.node.title}
          description={item.node.description}
          image={item.node.image}
          onPress={() => navigateToProducts(item.node.handle)}
        />
      )}
      estimatedItemSize={200}
    />
  );
}
```

## Hook API

```ts theme={null}
function useCollections(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>;
}
```

## Collection Products

To display products within a collection, use the service method directly:

```ts theme={null}
const { products } = useStackfront();
const collection = await products.getCollection('summer-collection');
// collection.products?.edges contains the product list
```

## Query Fields

Each collection edge returns:

* `id`, `title`, `handle`, `description`
* `image` — optional collection image (`url`, `altText`)

When fetching a single collection with `getCollection(handle)`, the response also includes:

* `products(first: 20)` — product edges with `id`, `title`, `handle`, `description`, `availableForSale`, `priceRange`, `images(first: 1)`, `variants(first: 1)`