Skip to main content
Skip to main content

Product Variants

Queries listed here are used to send requests to the Admin Product Variant API Routes.

All hooks listed require authentication.

Product variants are the actual salable item in your store. Each variant is a combination of the different option values available on the product.

Related Guide: How to manage product variants.

Queries

useAdminVariants

This hook retrieves a list of product variants. The product variant can be filtered by fields such as id or title passed in the query parameter. The product variant can also be paginated.

Example

To list product variants:

import React from "react"
import { useAdminVariants } from "medusa-react"

const Variants = () => {
const { variants, isLoading } = useAdminVariants()

return (
<div>
{isLoading && <span>Loading...</span>}
{variants && !variants.length && (
<span>No Variants</span>
)}
{variants && variants.length > 0 && (
<ul>
{variants.map((variant) => (
<li key={variant.id}>{variant.title}</li>
))}
</ul>
)}
</div>
)
}

export default Variants

To specify relations that should be retrieved within the product variants:

import React from "react"
import { useAdminVariants } from "medusa-react"

const Variants = () => {
const { variants, isLoading } = useAdminVariants({
expand: "options"
})

return (
<div>
{isLoading && <span>Loading...</span>}
{variants && !variants.length && (
<span>No Variants</span>
)}
{variants && variants.length > 0 && (
<ul>
{variants.map((variant) => (
<li key={variant.id}>{variant.title}</li>
))}
</ul>
)}
</div>
)
}

export default Variants

By default, only the first 100 records are retrieved. You can control pagination by specifying the limit and offset properties:

import React from "react"
import { useAdminVariants } from "medusa-react"

const Variants = () => {
const {
variants,
limit,
offset,
isLoading
} = useAdminVariants({
expand: "options",
limit: 50,
offset: 0
})

return (
<div>
{isLoading && <span>Loading...</span>}
{variants && !variants.length && (
<span>No Variants</span>
)}
{variants && variants.length > 0 && (
<ul>
{variants.map((variant) => (
<li key={variant.id}>{variant.title}</li>
))}
</ul>
)}
</div>
)
}

export default Variants

Hook Parameters

Filters and pagination configurations to apply on the retrieved product variants.

Query Returned Data

limitnumberRequired
The maximum number of items that can be returned in the list.
offsetnumberRequired
The number of items skipped before the returned items in the list.
countnumberRequired
The total number of items available.
variantsPricedVariant[]Required
An array of product variant details.

useAdminVariant

This hook retrieves a product variant's details.

Example

A simple example that retrieves a product variant by its ID:

import React from "react"
import { useAdminVariant } from "medusa-react"

type Props = {
variantId: string
}

const Variant = ({ variantId }: Props) => {
const { variant, isLoading } = useAdminVariant(
variantId
)

return (
<div>
{isLoading && <span>Loading...</span>}
{variant && <span>{variant.title}</span>}
</div>
)
}

export default Variant

To specify relations that should be retrieved:

import React from "react"
import { useAdminVariant } from "medusa-react"

type Props = {
variantId: string
}

const Variant = ({ variantId }: Props) => {
const { variant, isLoading } = useAdminVariant(
variantId, {
expand: "options"
}
)

return (
<div>
{isLoading && <span>Loading...</span>}
{variant && <span>{variant.title}</span>}
</div>
)
}

export default Variant

Hook Parameters

idstringRequired
The product variant's ID.
Configurations to apply on the retrieved product variant.

Query Returned Data

variantPricedVariantRequired
Product variant's details.

useAdminVariantsInventory

This hook retrieves the available inventory of a product variant.

Example

import React from "react"
import { useAdminVariantsInventory } from "medusa-react"

type Props = {
variantId: string
}

const VariantInventory = ({ variantId }: Props) => {
const { variant, isLoading } = useAdminVariantsInventory(
variantId
)

return (
<div>
{isLoading && <span>Loading...</span>}
{variant && variant.inventory.length === 0 && (
<span>Variant doesn't have inventory details</span>
)}
{variant && variant.inventory.length > 0 && (
<ul>
{variant.inventory.map((inventory) => (
<li key={inventory.id}>{inventory.title}</li>
))}
</ul>
)}
</div>
)
}

export default VariantInventory

Hook Parameters

idstringRequired
The product variant's ID.

Query Returned Data

variantVariantInventoryRequired
The product variant's inventory details.
Was this section helpful?