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.

import {
  ordersQueryKeys,
  useOrder,
  useOrderChanges,
  useOrderPreview,
  useRequestOrderEdit,
  useUpdateOrder,
} 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.

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

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.

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.

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.

const { mutateAsync, isPending } = useUpdateOrder(orderId)

const handleUpdate = async () => {
  await mutateAsync({
    email: "customer@example.com",
  })
}

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.

const { mutateAsync } = useRequestOrderEdit(orderId)

const handleRequest = async () => {
  const { order_preview } = await mutateAsync({})
}

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).

import { useQueryClient } from "@tanstack/react-query"
import { ordersQueryKeys } from "@medusajs/dashboard/hooks"

const Widget = () => {
  const queryClient = useQueryClient()

  const refreshPreview = (id: string) => {
    queryClient.invalidateQueries({
      queryKey: ordersQueryKeys.preview(id),
    })
  }

  // ...
}