Customer Orders

Once a customer has signed in, it is possible to query for their orders.

When querying for multiple orders, we retrieve only the orderHeaders, for performance reasons. This field includes a limited subset of order details that can be used for displaying a list of orders.

useCustomerOrdersQuery()

This hook can be used to query for orderHeaders. When using it, you must pass in the graphql query and optionally any variables for that query.

Arguments

Takes an object with the following keys:

query: DocumentNode The orderHeaders query. For the hook to work, this must at minimum include the orderHeaders field. The default query is located at template-trend/src/components/MyPages/Orders/CustomerOrders.gql.

variables?: { first?: number, offset?: number } The variables to use with the query.

first can be used to limit the number of results to return. If not given, the query will return all orders.
offset can be useful for pagination.

Returns

Returns an object with the following keys:

loading: boolean Whether or not the query is loading.

orders: OrderHeader[] An array of orders. Will be an empty array if no orders are found.

totalOrders: number|undefined The total number of orders. Undefined only if totalOrders was not part of the query.

result: QueryResult The full result of the query. Contains all properties that the Apollo Query render prop function normally would.

Example usage:

Copy

Copied

const { orders, loading, totalOrders } = useCustomerOrdersQuery({
  // Pass in the graphql query
  query: CustomerOrdersQuery,
  variables: {
    // Limit to 5 orders
    first: 5,
  },
});

if (loading) return <div>Loading…</div>;

if (totalOrders === 0) return <div>No orders found</div>;

return orders.map((order) => {
  // Map over the orders and display the data
  return <div key={order.id}>{order.orderDate}</div>;
});

useOrderDetailQuery()

This hook can be used to get the full details for a specific order, by id.

Arguments

The hook takes an object with the following keys

query: DocumentNode The order detail query. Must at a minimum include the order field. The default query is located at template-trend/src/components/MyPages/Orders/OrderDetail/OrderDetail.gql

id: number The order id.