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 Medusa's JS SDK with Tanstack Query. Both of these tools are installed in your project by default.

First, create the file src/admin/lib/config.ts to setup the SDK for use in your customizations:

Code
1import Medusa from "@medusajs/js-sdk"2
3export const sdk = new Medusa({4  baseUrl: "http://localhost:9000",5  debug: process.env.NODE_ENV === "development",6  auth: {7    type: "session",8  },9})

Then, use the configured SDK with the useQuery Tanstack Query hook to send GET requests, and useMutation hook to send POST or DELETE requests.

For example:

You can also send requests to custom routes as explained in the JS SDK reference.

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 className="divide-y p-0">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.

Admin Translations#

The Medusa Admin dashboard can be displayed in languages other than English, which is the default. Other languages are added through community contributions.

Learn how to add a new language translation for the Medusa Admin in this guide.