From e01df41dda29e6ef27ea7709b28fb18a726062f2 Mon Sep 17 00:00:00 2001
From: Shahed Nasser <shahednasser@gmail.com>
Date: Mon, 17 Apr 2023 17:49:32 +0300
Subject: [PATCH] docs: added an example of retrieving a product's categories
 (#3859)

* docs: added an example of retrieving a product's categories

* eslint fixes
---
 .../products/storefront/show-products.mdx     | 77 ++++++++++++++++++-
 1 file changed, 76 insertions(+), 1 deletion(-)

diff --git a/docs/content/modules/products/storefront/show-products.mdx b/docs/content/modules/products/storefront/show-products.mdx
index cedcddd573..ce5f429605 100644
--- a/docs/content/modules/products/storefront/show-products.mdx
+++ b/docs/content/modules/products/storefront/show-products.mdx
@@ -189,6 +189,77 @@ curl -L -X GET '<BACKEND_URL>/store/products?category_id[]=cat_123'
 
 This will retrieve only products that belong to that category.
 
+### Expand Categories
+
+To expand the categories of each product, you can pass `categories` to the `expand` query parameter:
+
+<Tabs groupId="request-type" wrapperClassName="code-tabs">
+<TabItem value="client" label="Medusa JS Client" default>
+
+```ts
+medusa.products.list({
+  expand: "categories",
+})
+.then(({ products, limit, offset, count }) => {
+  console.log(products.length)
+})
+```
+
+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useProducts } from "medusa-react"
+import { Product } from "@medusajs/medusa"
+
+const Products = () => {
+  const { products, isLoading } = useProducts({
+    expand: "categories",
+  })
+
+  return (
+    <div>
+      {isLoading && <span>Loading...</span>}
+      {products && !products.length && <span>No Products</span>}
+      {products && products.length > 0 && (
+        <ul>
+          {products.map((product: Product) => (
+            <li key={product.id}>{product.title}</li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}
+
+export default Products
+```
+
+</TabItem>
+<TabItem value="fetch" label="Fetch API">
+
+```ts
+fetch(`<BACKEND_URL>/store/products?expand=categories`, {
+  credentials: "include",
+})
+.then((response) => response.json())
+.then(({ products, limit, offset, count }) => {
+  console.log(products.length)
+})
+```
+
+</TabItem>
+<TabItem value="curl" label="cURL">
+
+```bash
+curl -L -X GET '<BACKEND_URL>/store/products?expand=categories'
+```
+
+</TabItem>
+</Tabs>
+
+You can learn more about the [expand parameter in the API reference](/api/store#section/Expanding-Fields)
+
 ### Product Pricing Parameters
 
 By default, the prices are retrieved based on the default currency associated with a store. You can use the following query parameters to ensure you are retrieving correct pricing based on the customer’s context:
@@ -543,6 +614,8 @@ This endpoint requires the product’s ID to be passed as a path parameter. You
 
 The request returns a product object. You can display its price as explained in the [Display Product Price](#display-product-price) section.
 
+You can also retrieve the product's categories by passing the `expand` query parameter similar to the explanation in [this section](#expand-categories).
+
 ---
 
 ## Retrieve Product by Handle
@@ -622,7 +695,9 @@ As the `handle` of each product is unique, when you pass the handle as a filter
 - receive an empty `products` array, meaning the product doesn’t exist;
 - or you’ll receive a `products` array with one item being the product you’re looking for. In this case, you can access the product at index `0`.
 
-As explained earlier, make sure to pass the [product pricing parameters](#product-pricing-parameters) to [display the product's price](#display-product-price)
+As explained earlier, make sure to pass the [product pricing parameters](#product-pricing-parameters) to [display the product's price](#display-product-price).
+
+You can also retrieve the product's categories by passing the `expand` query parameter as explained in [the Expand Categories section](#expand-categories).
 
 ---