Orders

Queries and Mutations listed here are used to send requests to the Store Order API Routes.

Orders are purchases made by customers, typically through a storefront. Orders are placed and created using cart hooks. The listed hooks allow retrieving and claiming orders.

Related Guide: How to retrieve order details in a storefront.

Mutations

useRequestOrderAccess

This hook allows the logged-in customer to claim ownership of one or more orders. This generates a token that can be used later on to verify the claim using the useGrantOrderAccess hook. This also emits the event order-update-token.created. So, if you have a notification provider installed that handles this event and sends the customer a notification, such as an email, the customer should receive instructions on how to finalize their claim ownership.

Example

import React from "react"
import { useRequestOrderAccess } from "medusa-react"

const ClaimOrder = () => {
  const claimOrder = useRequestOrderAccess()

  const handleClaimOrder = (
    orderIds: string[]
  ) => {
    claimOrder.mutate({
      order_ids: orderIds
    }, {
      onSuccess: () => {
        // successful
      },
      onError: () => {
        // an error occurred.
      }
    })
  }
  
  // ...
}

export default ClaimOrder

Mutation Function Parameters

StorePostCustomersCustomerOrderClaimReqStorePostCustomersCustomerOrderClaimReqRequired

The details of the orders to claim.

useGrantOrderAccess

This hook verifies the claim order token provided to the customer when they request ownership of an order.

Example

import React from "react"
import { useGrantOrderAccess } from "medusa-react"

const ClaimOrder = () => {
  const confirmOrderRequest = useGrantOrderAccess()

  const handleOrderRequestConfirmation = (
    token: string
  ) => {
    confirmOrderRequest.mutate({
      token
    }, {
      onSuccess: () => {
        // successful
      },
      onError: () => {
        // an error occurred.
      }
    })
  }
  
  // ...
}

export default ClaimOrder

Mutation Function Parameters

StorePostCustomersCustomerAcceptClaimReqStorePostCustomersCustomerAcceptClaimReqRequired

The details necessary to grant order access.

---

Queries

useOrder

This hook retrieves an Order's details.

Example

import React from "react"
import { useOrder } from "medusa-react"

type Props = {
  orderId: string
}

const Order = ({ orderId }: Props) => {
  const { 
    order, 
    isLoading, 
  } = useOrder(orderId)

  return (
    <div>
      {isLoading && <span>Loading...</span>}
      {order && <span>{order.display_id}</span>}
      
    </div>
  )
}

export default Order

Hook Parameters

idstringRequired

The order's ID.

Query Returned Data

orderOrderRequired

Order details.

useCartOrder

This hook retrieves an order's details by the ID of the cart that was used to create the order.

Example

import React from "react"
import { useCartOrder } from "medusa-react"

type Props = {
  cartId: string
}

const Order = ({ cartId }: Props) => {
  const { 
    order, 
    isLoading, 
  } = useCartOrder(cartId)

  return (
    <div>
      {isLoading && <span>Loading...</span>}
      {order && <span>{order.display_id}</span>}
      
    </div>
  )
}

export default Order

Hook Parameters

cartIdstringRequired

The cart's ID.

Query Returned Data

orderOrderRequired

Order details.

useOrders

This hook looks up an order using filters. If the filters don't narrow down the results to a single order, a 404 response is returned with no orders.

Example

import React from "react"
import { useOrders } from "medusa-react"

type Props = {
  displayId: number
  email: string
}

const Order = ({
  displayId,
  email
}: Props) => {
  const { 
    order, 
    isLoading, 
  } = useOrders({
    display_id: displayId,
    email,
  })

  return (
    <div>
      {isLoading && <span>Loading...</span>}
      {order && <span>{order.display_id}</span>}
      
    </div>
  )
}

export default Order

Hook Parameters

queryStoreGetOrdersParamsRequired

Filters used to retrieve the order.

Query Returned Data

orderOrderRequired

Order details.