Products
Queries and Mutations listed here are used to send requests to the Admin Product API Routes.
All hooks listed require authentication.
Products are saleable items in a store. This also includes saleable gift cards in a store.
Related Guide: How to manage products.
Mutations
useAdminCreateProduct
This hook creates a new Product. This hook can also be used to create a gift card if the is_giftcard
field is set to true
.
Example
import React from "react"
import { useAdminCreateProduct } from "medusa-react"
type CreateProductData = {
title: string
is_giftcard: boolean
discountable: boolean
options: {
title: string
}[]
variants: {
title: string
prices: {
amount: number
currency_code :string
}[]
options: {
value: string
}[]
}[],
collection_id: string
categories: {
id: string
}[]
type: {
value: string
}
tags: {
value: string
}[]
}
const CreateProduct = () => {
const createProduct = useAdminCreateProduct()
// ...
const handleCreate = (productData: CreateProductData) => {
createProduct.mutate(productData, {
onSuccess: ({ product }) => {
console.log(product.id)
}
})
}
// ...
}
export default CreateProduct
Mutation Function Parameters
The details of the product to create.
Mutation Function Returned Data
The product's details.
useAdminUpdateProduct
This hook updates a Product's details.
Example
import React from "react"
import { useAdminUpdateProduct } from "medusa-react"
type Props = {
productId: string
}
const Product = ({ productId }: Props) => {
const updateProduct = useAdminUpdateProduct(
productId
)
// ...
const handleUpdate = (
title: string
) => {
updateProduct.mutate({
title,
}, {
onSuccess: ({ product }) => {
console.log(product.id)
}
})
}
// ...
}
export default Product
Hook Parameters
id
stringRequiredMutation Function Parameters
The details to update of the product.
Mutation Function Returned Data
The product's details.
useAdminDeleteProduct
This hook deletes a product and its associated product variants and options.
Example
import React from "react"
import { useAdminDeleteProduct } from "medusa-react"
type Props = {
productId: string
}
const Product = ({ productId }: Props) => {
const deleteProduct = useAdminDeleteProduct(
productId
)
// ...
const handleDelete = () => {
deleteProduct.mutate(void 0, {
onSuccess: ({ id, object, deleted}) => {
console.log(id)
}
})
}
// ...
}
export default Product
Hook Parameters
id
stringRequiredMutation Function Returned Data
The details of deleting a product.
useAdminCreateVariant
This hook creates a product variant associated with a product. Each product variant must have a unique combination of product option values.
Example
import React from "react"
import { useAdminCreateVariant } from "medusa-react"
type CreateVariantData = {
title: string
prices: {
amount: number
currency_code: string
}[]
options: {
option_id: string
value: string
}[]
}
type Props = {
productId: string
}
const CreateProductVariant = ({ productId }: Props) => {
const createVariant = useAdminCreateVariant(
productId
)
// ...
const handleCreate = (
variantData: CreateVariantData
) => {
createVariant.mutate(variantData, {
onSuccess: ({ product }) => {
console.log(product.variants)
}
})
}
// ...
}
export default CreateProductVariant
Hook Parameters
productId
stringRequiredMutation Function Parameters
The details of the product variant to create.
Mutation Function Returned Data
The product's details.
useAdminUpdateVariant
This hook updates a product variant's details.
Example
import React from "react"
import { useAdminUpdateVariant } from "medusa-react"
type Props = {
productId: string
variantId: string
}
const ProductVariant = ({
productId,
variantId
}: Props) => {
const updateVariant = useAdminUpdateVariant(
productId
)
// ...
const handleUpdate = (title: string) => {
updateVariant.mutate({
variant_id: variantId,
title,
}, {
onSuccess: ({ product }) => {
console.log(product.variants)
}
})
}
// ...
}
export default ProductVariant
Hook Parameters
productId
stringRequiredMutation Function Parameters
Mutation Function Returned Data
The product's details.
useAdminDeleteVariant
This hook deletes a product variant.
Example
import React from "react"
import { useAdminDeleteVariant } from "medusa-react"
type Props = {
productId: string
variantId: string
}
const ProductVariant = ({
productId,
variantId
}: Props) => {
const deleteVariant = useAdminDeleteVariant(
productId
)
// ...
const handleDelete = () => {
deleteVariant.mutate(variantId, {
onSuccess: ({ variant_id, object, deleted, product }) => {
console.log(product.variants)
}
})
}
// ...
}
export default ProductVariant
Hook Parameters
productId
stringRequiredMutation Function Parameters
string
stringRequiredMutation Function Returned Data
The details of deleting a product's variant.
useAdminCreateProductOption
This hook adds a product option to a product.
Example
import React from "react"
import { useAdminCreateProductOption } from "medusa-react"
type Props = {
productId: string
}
const CreateProductOption = ({ productId }: Props) => {
const createOption = useAdminCreateProductOption(
productId
)
// ...
const handleCreate = (
title: string
) => {
createOption.mutate({
title
}, {
onSuccess: ({ product }) => {
console.log(product.options)
}
})
}
// ...
}
export default CreateProductOption
Hook Parameters
productId
stringRequiredMutation Function Parameters
The details of the product option to create.
Mutation Function Returned Data
The product's details.
useAdminUpdateProductOption
This hook updates a product option's details.
Example
import React from "react"
import { useAdminUpdateProductOption } from "medusa-react"
type Props = {
productId: string
optionId: string
}
const ProductOption = ({
productId,
optionId
}: Props) => {
const updateOption = useAdminUpdateProductOption(
productId
)
// ...
const handleUpdate = (
title: string
) => {
updateOption.mutate({
option_id: optionId,
title,
}, {
onSuccess: ({ product }) => {
console.log(product.options)
}
})
}
// ...
}
export default ProductOption
Hook Parameters
productId
stringRequiredMutation Function Parameters
Mutation Function Returned Data
The product's details.
useAdminDeleteProductOption
This hook deletes a product option. If there are product variants that use this product option, they must be deleted before deleting the product option.
Example
import React from "react"
import { useAdminDeleteProductOption } from "medusa-react"
type Props = {
productId: string
optionId: string
}
const ProductOption = ({
productId,
optionId
}: Props) => {
const deleteOption = useAdminDeleteProductOption(
productId
)
// ...
const handleDelete = () => {
deleteOption.mutate(optionId, {
onSuccess: ({ option_id, object, deleted, product }) => {
console.log(product.options)
}
})
}
// ...
}
export default ProductOption
Hook Parameters
productId
stringRequiredMutation Function Parameters
string
stringRequiredMutation Function Returned Data
The details of deleting a product's option.
Queries
useAdminProducts
This hook retrieves a list of products. The products can be filtered by fields such as q
or status
passed in
the query
parameter. The products can also be sorted or paginated.
Example
To list products:
import React from "react"
import { useAdminProducts } from "medusa-react"
const Products = () => {
const { products, isLoading } = useAdminProducts()
return (
<div>
{isLoading && <span>Loading...</span>}
{products && !products.length && <span>No Products</span>}
{products && products.length > 0 && (
<ul>
{products.map((product) => (
<li key={product.id}>{product.title}</li>
))}
</ul>
)}
</div>
)
}
export default Products
To specify relations that should be retrieved within the products:
import React from "react"
import { useAdminProducts } from "medusa-react"
const Products = () => {
const { products, isLoading } = useAdminProducts({
expand: "images"
})
return (
<div>
{isLoading && <span>Loading...</span>}
{products && !products.length && <span>No Products</span>}
{products && products.length > 0 && (
<ul>
{products.map((product) => (
<li key={product.id}>{product.title}</li>
))}
</ul>
)}
</div>
)
}
export default Products
By default, only the first 50
records are retrieved. You can control pagination by specifying the limit
and offset
properties:
import React from "react"
import { useAdminProducts } from "medusa-react"
const Products = () => {
const {
products,
limit,
offset,
isLoading
} = useAdminProducts({
expand: "images",
limit: 20,
offset: 0
})
return (
<div>
{isLoading && <span>Loading...</span>}
{products && !products.length && <span>No Products</span>}
{products && products.length > 0 && (
<ul>
{products.map((product) => (
<li key={product.id}>{product.title}</li>
))}
</ul>
)}
</div>
)
}
export default Products
Hook Parameters
Filters and pagination configurations to apply on the retrieved products.
Query Returned Data
limit
numberRequiredoffset
numberRequiredcount
numberRequireduseAdminProduct
This hook retrieves a product's details.
Example
import React from "react"
import { useAdminProduct } from "medusa-react"
type Props = {
productId: string
}
const Product = ({ productId }: Props) => {
const {
product,
isLoading,
} = useAdminProduct(productId)
return (
<div>
{isLoading && <span>Loading...</span>}
{product && <span>{product.title}</span>}
</div>
)
}
export default Product
Hook Parameters
id
stringRequiredConfigurations to apply on the retrieved product.
Query Returned Data
Product details.
useAdminProductTagUsage
This hook retrieves a list of Product Tags with how many times each is used in products.
Example
import React from "react"
import { useAdminProductTagUsage } from "medusa-react"
const ProductTags = (productId: string) => {
const { tags, isLoading } = useAdminProductTagUsage()
return (
<div>
{isLoading && <span>Loading...</span>}
{tags && !tags.length && <span>No Product Tags</span>}
{tags && tags.length > 0 && (
<ul>
{tags.map((tag) => (
<li key={tag.id}>{tag.value} - {tag.usage_count}</li>
))}
</ul>
)}
</div>
)
}
export default ProductTags