Products

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

All hooks listed require user 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

queryAdminGetProductsParams

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.

queryAdminGetProductParams

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.