How to Use Product Categories in a Storefront

In this document, you’ll learn how to use product categories in a storefront.

Overview

Using the product category store REST APIs, you can list categories in your storefront.

Scenario

You want to add or use the following store functionalities:

• List and filter categories.
• Retrieve a single category.

---

Prerequisites

Medusa Components

It's assumed that you already have a Medusa backend installed and set up. If not, you can follow the quickstart guide to get started.

It's also assumed you already have a storefront set up. It can be a custom storefront or one of Medusa’s storefronts. If you don’t have a storefront set up, you can install the Next.js starter storefront.

JS Client

This guide includes code snippets to send requests to your Medusa backend using Medusa’s JS Client, among other methods.

If you follow the JS Client code blocks, it’s assumed you already have Medusa’s JS Client installed and have created an instance of the client.

Medusa React

This guide also includes code snippets to send requests to your Medusa backend using Medusa React, among other methods.

If you follow the Medusa React code blocks, it's assumed you already have Medusa React installed and have used MedusaProvider higher in your component tree.

---

List Categories

You can list product categories by sending a request to the List Product Categories endpoint:

• Medusa JS Client
• Medusa React
• Fetch API
• cURL

medusa.productCategories.list()
.then(({ product_categories, limit, offset, count }) => {
  console.log(product_categories.length)
})

import { useProductCategories } from "medusa-react"
import { ProductCategory } from "@medusajs/medusa"

function Categories() {
  const { 
    product_categories, 
    isLoading,
  } = useProductCategories()

  return (
    <div>
      {isLoading && <span>Loading...</span>}
      {product_categories && !product_categories.length && (
        <span>No Categories</span>
      )}
      {product_categories && product_categories.length > 0 && (
        <ul>
          {product_categories.map(
            (category: ProductCategory) => (
              <li key={category.id}>{category.name}</li>
            )
          )}
        </ul>
      )}
    </div>
  )
}

export default Categories

fetch(`<BACKEND_URL>/store/product-categories`, {
  credentials: "include",
})
.then((response) => response.json())
.then(({ product_categories, limit, offset, count }) => {
  console.log(product_categories.length)
})

curl -L -X GET '<BACKEND_URL>/store/product-categories' \
-H 'Authorization: Bearer <API_TOKEN>'

This request does not require any query parameters. You can, however, pass query parameters to filter the list of categories, such as the passing the q query parameter to search categories by title or handle. You can learn about available query parameters in the API reference.

The request returns an array of product categories along with pagination fields.

Including all Nested Categories

By default, the categories are not retrieved along with their nested children. To retrieve categories with their nested children, make sure to pass the query parameter include_descendants_tree with the value true. Nested categories will be available inside each category object under the property category_children, which is an array of categories.

---

Get a Category

You can retrieve a single product category by using the Get a Product Category endpoint:

• Medusa JS Client
• Medusa React
• Fetch API
• cURL

medusa.productCategories.retrieve(productCategoryId)
.then(({ product_category }) => {
  console.log(product_category.name)
})

import { useProductCategory } from "medusa-react"

function Category() {
  const { product_category, isLoading } = useProductCategory()

  return (
    <div>
      {isLoading && <span>Loading...</span>}
      {product_category && <span>{product_category.name}</span>}
    </div>
  )
}

export default Category

fetch(`<BACKEND_URL>/store/product-categories/${productCategoryId}`, {
  credentials: "include",
})
.then((response) => response.json())
.then(({ product_category }) => {
  console.log(product_category.name)
})

curl -L -X GET '<BACKEND_URL>/store/product-categories/<CAT_ID>' \
-H 'Authorization: Bearer <API_TOKEN>'

This request requires the product category ID as a path parameter. You can also pass query parameters such as expand and fields as explained in the API reference.

The request returns the category as an object.

---

See Also

• How to manage product categories.