List Product Categories in Storefront

In this document, you'll learn how to list product categories in the storefront, including paginating and filtering them.

List Product Categories#

To retrieve the list of product categories, send a request to the List Product Categories API route:

The response has a product_categories field, which is an array of product categories.

Paginate Product Categories#

To paginate product categories, pass the following query parameters:

limit: The number of product categories to return in the request.
offset: The number of product categories to skip before the returned product categories. You can calculate this by multiplying the current page with the limit.

The response object returns a count field, which is the total count of product categories. Use it to determine whether there are more product categories that can be loaded.

For example:

Code
1"use client" // include with Next.js 13+2
3import { useEffect, useState } from "react"4import { HttpTypes } from "@medusajs/types"5
6export default function Categories() {7  const [loading, setLoading] = useState(true)8  const [categories, setCategories] = useState<9    HttpTypes.StoreProductCategory[]10  >([])11  const limit = 2012  const [currentPage, setCurrentPage] = useState(1)13  const [hasMorePages, setHasMorePages] = useState(false)14
15  useEffect(() => {16    if (!loading) {17      return 18    }19
20    const offset = (currentPage - 1) * limit21
22    const searchParams = new URLSearchParams({23      limit: `${limit}`,24      offset: `${offset}`,25    })26
27    fetch(`http://localhost:9000/store/product-categories?${28      searchParams.toString()29    }`, {30      credentials: "include",31      headers: {32        "x-publishable-api-key": process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY || "temp",33      },34    })35    .then((res) => res.json())36    .then(({ product_categories, count }) => {37      setCategories((prev) => {38        if (prev.length > offset) {39          // product categories already added because 40          // the same request has already been sent41          return prev42        }43        return [44          ...prev,45          ...product_categories,46        ]47      })48      setHasMorePages(count > limit * currentPage)49      setLoading(false)50    })51  }, [loading])52
53  return (54    <div>55      {loading && <span>Loading...</span>}56      {!loading && categories.length === 0 && (57        <span>No product categories found.</span>58      )}59      {!loading && categories.length > 0 && (60        <ul>61          {categories.map((category) => (62            <li key={category.id}>{category.name}</li>63          ))}64        </ul>65      )}66      {!loading && hasMorePages && (67        <button68          onClick={() => {69            setCurrentPage((prev) => prev + 1)70            setLoading(true)71          }}72          disabled={loading}73        >74          Load More75        </button>76      )}77    </div>78  )79}

Filter Categories#

The List Product Categories API route accepts query parameters to filter the categories by description, handle, and more.

Refer to the API reference for the list of accepted query parameters.

For example, to run a query on the product categories:

Code
1const searchParams = new URLSearchParams({2  q: "Shirt",3})4
5fetch(`http://localhost:9000/store/product-categories?${6  searchParams.toString()7}`, {8  credentials: "include",9  headers: {10    "x-publishable-api-key": process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY || "temp",11  },12})13.then((res) => res.json())14.then(({ product_categories, count }) => {15  // TODO set categories...16})

Was this page helpful?