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

queryStoreGetProductsParams

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.

productsPricedProduct[]Required

An array of products details.

useProduct

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

idstringRequired

The product's ID.

Query Returned Data

productPricedProductRequired

Product details.