Skip to main content

​
Collections

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

​
Usage

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

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: 
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)