5.10.4. Admin Development Tips

In this chapter, you'll find some tips for your admin development.

Send Requests to API Routes#

To send a request to an API route in the Medusa Application, use the Fetch API.

For example:

src/admin/widgets/product-widget.tsx
1import { defineWidgetConfig } from "@medusajs/admin-sdk"2import { Container } from "@medusajs/ui"3import { useEffect, useState } from "react"4
5const ProductWidget = () => {6  const [productsCount, setProductsCount] = useState(0)7  const [loading, setLoading] = useState(true)8
9  useEffect(() => {10    if (!loading) {11      return12    }13
14    fetch(`/admin/products`, {15      credentials: "include",16    })17    .then((res) => res.json())18    .then(({ count }) => {19      setProductsCount(count)20      setLoading(false)21    })22  }, [loading])23
24  return (25    <Container>26      {loading && <span>Loading...</span>}27      {!loading && <span>You have {productsCount} Product(s).</span>}28    </Container>29  )30}31
32export const config = defineWidgetConfig({33  zone: "product.list.before",34})35
36export default ProductWidget

In this example, you send a request to the List Products API route and show the count of products in a widget.

Routing Functionalities#

To navigate or link to other pages, or perform other routing functionalities, use the react-router-dom package. It's installed in your project through the Medusa Admin.

For example:

src/admin/widgets/product-widget.tsx
1import { defineWidgetConfig } from "@medusajs/admin-sdk"2import { Container } from "@medusajs/ui"3import { Link } from "react-router-dom"4
5// The widget6const ProductWidget = () => {7  return (8    <Container>9      <Link to={"/orders"}>View Orders</Link>10    </Container>11  )12}13
14// The widget's configurations15export const config = defineWidgetConfig({16  zone: "product.details.before",17})18
19export default ProductWidget

This adds a widget in a product's details page with a link to the Orders page. The link's path must be without the /app prefix.