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.

Code
1import {2  productVariantQueryKeys,3  useInfiniteVariants,4  useVariants,5} 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.

Code
1const { variants, count } = useVariants({2  limit: 20,3})

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.

Code
1const { data, fetchNextPage, hasNextPage } =2  useInfiniteVariants({ limit: 20 })3
4const variants = data?.pages.flatMap(5  (page) => page.variants6)

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.

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