Skip to main content
Skip to main content

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

AdminPostProductsReqAdminPostProductsReqRequired
The details of the product to create.

Mutation Function Returned Data

AdminProductsResAdminProductsResRequired
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

idstringRequired
The product's ID.

Mutation Function Parameters

AdminPostProductsProductReqAdminPostProductsProductReqRequired
The details to update of the product.

Mutation Function Returned Data

AdminProductsResAdminProductsResRequired
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

idstringRequired
The product's ID.

Mutation Function Returned Data

AdminProductsDeleteResAdminProductsDeleteResRequired
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

productIdstringRequired
The product's ID.

Mutation Function Parameters

AdminPostProductsProductVariantsReqAdminPostProductsProductVariantsReqRequired
The details of the product variant to create.

Mutation Function Returned Data

AdminProductsResAdminProductsResRequired
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

productIdstringRequired
The product's ID.

Mutation Function Parameters

AdminUpdateVariantReqAdminUpdateVariantReqRequired

Mutation Function Returned Data

AdminProductsResAdminProductsResRequired
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

productIdstringRequired
The product's ID.

Mutation Function Parameters

stringstringRequired
The ID of the product variant to delete.

Mutation Function Returned Data

AdminProductsDeleteVariantResAdminProductsDeleteVariantResRequired
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

productIdstringRequired
The product's ID.

Mutation Function Parameters

AdminPostProductsProductOptionsReqAdminPostProductsProductOptionsReqRequired
The details of the product option to create.

Mutation Function Returned Data

AdminProductsResAdminProductsResRequired
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

productIdstringRequired
The product's ID.

Mutation Function Parameters

AdminUpdateProductOptionReqAdminUpdateProductOptionReqRequired

Mutation Function Returned Data

AdminProductsResAdminProductsResRequired
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

productIdstringRequired
The product's ID.

Mutation Function Parameters

stringstringRequired
The ID of the product option to delete.

Mutation Function Returned Data

AdminProductsDeleteOptionResAdminProductsDeleteOptionResRequired
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

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.
products(PricedProduct | Product)[]Required
An array of products details.

useAdminProduct

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

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

Query Returned Data

productProductRequired
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

Query Returned Data

tagsPick<ProductTag, "id" | "value"> & object[]Required
An array of product tags details.
Was this section helpful?