Customer Hooks - Admin Components

The customer hooks fetch customers and their addresses from the Medusa backend. Use them to show customer data in your admin customizations.

import {
  customersQueryKeys,
  useCustomer,
  useCustomerAddress,
  useCustomers,
  useListCustomerAddresses,
} from "@medusajs/dashboard/hooks"

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

useCustomers#

Fetches a paginated list of customers. Pass query parameters to filter, paginate, or select the fields of the returned customers.

const { customers, count, isPending } = useCustomers({
  limit: 20,
})

Parameters#

Returns#

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

useCustomer#

Fetches a single customer by ID.

const { customer, isPending } = useCustomer(customerId, {
  fields: "+groups.id",
})

Parameters#

Returns#

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

useListCustomerAddresses#

Fetches the list of addresses of a customer.

const { addresses, count } =
  useListCustomerAddresses(customerId)

Parameters#

Returns#

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

useCustomerAddress#

Fetches a single address of a customer.

const { address } = useCustomerAddress(
  customerId,
  addressId
)

Parameters#

Returns#

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

customersQueryKeys#

A TanStack Query key factory for customer queries. Use it to invalidate cached customer data after you change a customer.

It provides all, lists(), list(query), details(), and detail(id, query).

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

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

  const refreshCustomer = (id: string) => {
    queryClient.invalidateQueries({
      queryKey: customersQueryKeys.detail(id),
    })
  }

  // ...
}