Skip to main content

​
Orders

The useOrders hook fetches the order history for the currently logged-in customer.

​
Usage

import { useOrders } from 'react-native-stackfront-sdk';
import { FlashList } from '@shopify/flash-list';

function OrderHistory() {
  const { orders, loading, error, refetch } = useOrders();

  if (loading && orders.length === 0) return <Loading />;

  return (
    <FlashList
      data={orders}
      renderItem={({ item }) => (
        <OrderCard
          orderNumber={item.orderNumber}
          date={item.processedAt}
          total={item.totalPrice}
          status={`${item.financialStatus} / ${item.fulfillmentStatus}`}
          items={item.lineItems?.edges?.map(e => e.node)}
        />
      )}
      estimatedItemSize={120}
      onRefresh={refetch}
      refreshing={loading}
    />
  );
}

​
Hook API

function useOrders(): {
  orders: unknown[];           // array of order nodes
  loading: boolean;
  error: Error | null;
  refetch: () => Promise<void>;
}
The hook only fetches when a customer access token is present. If the user is not logged in, orders remains an empty array.

​
Order Shape

Each order contains:
  • id, name, orderNumber
  • processedAt — ISO date string
  • financialStatus — PAID, PENDING, REFUNDED, etc.
  • fulfillmentStatus — FULFILLED, UNFULFILLED, etc.
  • totalPrice — { amount, currencyCode }
  • lineItems(first: 50) — product line items with title, quantity, variant (including id, title, image, price)

​
Service API

const { customer } = useStackfront();
const orders = await customer.getOrders(); // returns array of order nodes
Throws 'Not authenticated' if no access token is set.