Products
Queries listed here are used to send requests to the Store Product API Routes.
Products are saleable items in a store. This also includes saleable gift cards in a store. Using the methods in this class, you can filter products by categories, collections, sales channels, and more.
Related Guide: How to show products in a storefront.
Queries
useProducts
This hook retrieves a list of products. The products can be filtered by fields such as id
or q
passed in the query
parameter. The products can also be sorted or paginated.
This hook can also be used to retrieve a product by its handle.
For accurate and correct pricing of the products based on the customer's context, it's highly recommended to pass fields such as
region_id
, currency_code
, and cart_id
when available.
Passing sales_channel_id
ensures retrieving only products available in the specified sales channel.
You can alternatively use a publishable API key in the request header instead of passing a sales_channel_id
.
Example
To list products:
import React from "react"
import { useProducts } from "medusa-react"
const Products = () => {
const { products, isLoading } = useProducts()
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 { useProducts } from "medusa-react"
const Products = () => {
const { products, isLoading } = useProducts({
expand: "variants"
})
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 100
records are retrieved. You can control pagination by specifying the limit
and offset
properties:
import React from "react"
import { useProducts } from "medusa-react"
const Products = () => {
const {
products,
limit,
offset,
isLoading
} = useProducts({
expand: "variants",
limit: 50,
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
numberRequireduseProduct
This hook retrieves a Product's details. For accurate and correct pricing of the product based on the customer's context, it's highly recommended to pass fields such as
region_id
, currency_code
, and cart_id
when available.
Passing sales_channel_id
ensures retrieving only products available in the current sales channel.
You can alternatively use a publishable API key in the request header instead of passing a sales_channel_id
.
Example
import React from "react"
import { useProduct } from "medusa-react"
type Props = {
productId: string
}
const Product = ({ productId }: Props) => {
const { product, isLoading } = useProduct(productId)
return (
<div>
{isLoading && <span>Loading...</span>}
{product && <span>{product.title}</span>}
</div>
)
}
export default Product
Hook Parameters
id
stringRequired