Product Variant Hooks - Admin Components

The product variant hooks fetch product variants across all products from the Medusa backend. To fetch the variants of a single product, use useProductVariants instead.

import {
  productVariantQueryKeys,
  useInfiniteVariants,
  useVariants,
} from "@medusajs/dashboard/hooks"

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

useVariants#

Fetches a paginated list of product variants.

const { variants, count } = useVariants({
  limit: 20,
})

Parameters#

Returns#

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

useInfiniteVariants#

Fetches product variants page by page, which is useful for infinite scrolling or "load more" lists. The hook manages the offset internally and defaults limit to 50.

const { data, fetchNextPage, hasNextPage } =
  useInfiniteVariants({ limit: 20 })

const variants = data?.pages.flatMap(
  (page) => page.variants
)

Parameters#

Returns#

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

productVariantQueryKeys#

A TanStack Query key factory for product variant queries. It provides all, lists(), list(query), details(), and detail(id, query).

useInfiniteVariants appends "__infinite" to the list key, so its cache entries are separate from the ones of useVariants. Invalidating lists() invalidates both.

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

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

  const refreshVariants = () => {
    queryClient.invalidateQueries({
      queryKey: productVariantQueryKeys.lists(),
    })
  }

  // ...
}