Order Hooks - Admin Components

The order hooks fetch an order, its changes, and its preview from the Medusa backend. They also update an order or request an order edit.

Code
1import {2  ordersQueryKeys,3  useOrder,4  useOrderChanges,5  useOrderPreview,6  useRequestOrderEdit,7  useUpdateOrder,8} from "@medusajs/dashboard/hooks"

These hooks are built on TanStack Query. Use them in your widgets and UI routes.

useOrder#

Fetches a single order by ID.

Code
1const { order, isPending } = useOrder(orderId, {2  fields: "+items.*",3})

Parameters#

Returns#

Along with the following, the hook returns the rest of TanStack Query's useQuery result.

useOrderChanges#

Fetches the list of changes applied to an order, such as edits, returns, or exchanges.

Code
const { order_changes } = useOrderChanges(orderId)

Parameters#

Returns#

Along with the following, the hook returns the rest of TanStack Query's useQuery result.

useOrderPreview#

Fetches a preview of the order with the latest pending change applied, such as an edit, return, exchange, or claim.

Code
const { order: preview } = useOrderPreview(orderId)

Parameters#

Returns#

Along with the following, the hook returns the rest of TanStack Query's useQuery result.

useUpdateOrder#

Updates an order. On success, the hook invalidates the order's detail and changes queries.

Code
1const { mutateAsync, isPending } = useUpdateOrder(orderId)2
3const handleUpdate = async () => {4  await mutateAsync({5    email: "customer@example.com",6  })7}

Parameters#

Returns#

Along with the following, the hook returns the rest of TanStack Query's useMutation result.

useRequestOrderEdit#

Requests an order edit, which moves the order edit into a requested state for confirmation. On success, the hook invalidates the order's details, preview, changes, and line items queries.

Code
1const { mutateAsync } = useRequestOrderEdit(orderId)2
3const handleRequest = async () => {4  const { order_preview } = await mutateAsync({})5}

Parameters#

Returns#

Along with the following, the hook returns the rest of TanStack Query's useMutation result.

ordersQueryKeys#

A TanStack Query key factory for order queries. Besides all, lists(), list(query), details(), and detail(id, query), it adds the order-specific keys preview(id), changes(id), lineItems(id, query), and shippingOptions(id).

Code
1import { useQueryClient } from "@tanstack/react-query"2import { ordersQueryKeys } from "@medusajs/dashboard/hooks"3
4const Widget = () => {5  const queryClient = useQueryClient()6
7  const refreshPreview = (id: string) => {8    queryClient.invalidateQueries({9      queryKey: ordersQueryKeys.preview(id),10    })11  }12
13  // ...14}