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.

WarningDo not install Tanstack Query as that will cause unexpected errors in your development. If you prefer installing it for better auto-completion in your code editor, make sure to install v^5.28.14 as a development dependency.

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})
NoteLearn more about the JS SDK's configurations this documentation.

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:

src/admin/widgets/product-widget.ts
1import { defineWidgetConfig } from "@medusajs/admin-sdk"2import { Button, Container } from "@medusajs/ui"3import { useQuery } from "@tanstack/react-query"4import { sdk } from "../lib/config"5import { DetailWidgetProps, HttpTypes } from "@medusajs/framework/types"6
7const ProductWidget = () => {8  const { data, isLoading } = useQuery({9    queryFn: () => sdk.admin.product.list(),10    queryKey: ["products"],11  })12  13  return (14    <Container className="divide-y p-0">15      {isLoading && <span>Loading...</span>}16      {data?.products && (17        <ul>18          {data.products.map((product) => (19            <li key={product.id}>{product.title}</li>20          ))}21        </ul>22      )}23    </Container>24  )25}26
27export const config = defineWidgetConfig({28  zone: "product.list.before",29})30
31export default ProductWidget

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.

Learn moreRefer to react-router-dom’s documentation for other available components and hooks.

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.

Was this chapter helpful?
Constraints
Plugins
Edit this page
Ask Anything
FAQ
What is Medusa?
How can I create a module?
How can I create a data model?
How do I create a workflow?
How can I extend a data model in the Product Module?
Recipes
How do I build a marketplace with Medusa?
How do I build digital products with Medusa?
How do I build subscription-based purchases with Medusa?
What other recipes are available in the Medusa documentation?
Chat is cleared on refresh
Line break