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

queryAdminGetVariantsParams

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.

queryAdminGetVariantParams

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.