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.

Warning: Do 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 v5.64.2 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: import.meta.env.VITE_BACKEND_URL || "/",5  debug: import.meta.env.DEV,6  auth: {7    type: "session",8  },9})

Notice that you use import.meta.env to access environment variables in your customizations, as explained in this chapter.

Note: Learn 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:

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

Use Route Loaders for Initial Data#

You may need to retrieve data before your component is rendered, or you may need to pass some initial data to your component to be used while data is being fetched. In those cases, you can use a route loader.

Global Variables in Admin Customizations#

In your admin customizations, you can use the following global variables:

__BASE__: The base path of the Medusa Admin, as set in the admin.path configuration in medusa-config.ts.
__BACKEND_URL__: The URL to the Medusa backend, as set in the admin.backendUrl configuration in medusa-config.ts.
__STOREFRONT_URL__: The URL to the storefront, as set in the admin.storefrontUrl configuration in medusa-config.ts.

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?

Edited Feb 24·Edit this page