Skip to main content

​
Product Listing

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

​
Usage

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

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.