- Get Started
- Product
- Resources
- Tools & SDKs
- Framework
- Reference
- Get Started
- Product
- Resources
- Tools & SDKs
- Framework
- Reference
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.
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:
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.ts1import { 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:
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.