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
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
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
id
stringRequiredQuery Returned Data
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
cartId
stringRequiredQuery Returned Data
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