asyavee/medusa-store
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

docs: general fixes to admin tips document (#13253)

Browse Source
This commit is contained in:
Shahed Nasser
2025-08-20 15:09:26 +03:00
committed by GitHub
parent fa16503005
commit 27bb69390d
3 changed files with 36 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
www/apps/book/app/learn/fundamentals/admin/tips/page.mdx
+20 -19
View File
@@ -6,7 +6,7 @@ export const metadata = {
# {metadata.title} # {metadata.title}
In this chapter, you'll find some tips for your admin development. In this chapter, you'll find some tips for developing your admin.
## Send Requests to API Routes ## Send Requests to API Routes
@@ -18,12 +18,12 @@ Do not install Tanstack Query as that will cause unexpected errors in your devel
</Note> </Note>
First, create the file `src/admin/lib/config.ts` to setup the SDK for use in your customizations: First, create the file `src/admin/lib/sdk.ts` to set up the SDK for use in your customizations:
<CodeTabs> <CodeTabs>
<CodeTab label="Medusa Project" value="medusa-project"> <CodeTab label="Medusa Project" value="medusa-project">
```ts title="src/admin/lib/config.ts" ```ts title="src/admin/lib/sdk.ts"
import Medusa from "@medusajs/js-sdk" import Medusa from "@medusajs/js-sdk"
export const sdk = new Medusa({ export const sdk = new Medusa({
@@ -38,7 +38,7 @@ export const sdk = new Medusa({
</CodeTab> </CodeTab>
<CodeTab label="Medusa Plugin" value="medusa-plugin"> <CodeTab label="Medusa Plugin" value="medusa-plugin">
```ts title="src/admin/lib/config.ts" ```ts title="src/admin/lib/sdk.ts"
import Medusa from "@medusajs/js-sdk" import Medusa from "@medusajs/js-sdk"
export const sdk = new Medusa({ export const sdk = new Medusa({
@@ -52,15 +52,17 @@ export const sdk = new Medusa({
</CodeTab> </CodeTab>
</CodeTabs> </CodeTabs>
Notice that you use `import.meta.env` in a Medusa project to access environment variables in your customizations, whereas in a plugin you use the global variable `__BACKEND_URL__` to access the backend URL. You can learn more in the [Admin Environment Variables](../environment-variables/page.mdx) chapter.
Notice that in a Medusa project, you use `import.meta.env` to access environment variables in your customizations, whereas in a plugin you use the global variable `__BACKEND_URL__` to access the backend URL. You can learn more in the [Admin Environment Variables](../environment-variables/page.mdx) chapter.
<Note> <Note>
Learn more about the JS SDK's configurations [this documentation](!resources!/js-sdk#js-sdk-configurations). Refer to the [JS SDK](!resources!/js-sdk#js-sdk-configurations) reference for more details on the SDK's configurations.
</Note> </Note>
Then, use the configured SDK with the `useQuery` Tanstack Query hook to send `GET` requests, and `useMutation` hook to send `POST` or `DELETE` requests.
Then, use the configured SDK with the `useQuery` Tanstack Query hook to send `GET` requests, and the `useMutation` hook to send `POST` or `DELETE` requests.
For example: For example:
@@ -68,17 +70,16 @@ For example:
<CodeTab label="Query" value="query"> <CodeTab label="Query" value="query">
export const queryHighlights = [ export const queryHighlights = [
["8", "useQuery", "Use Tanstack Query's `useQuery` to send a `GET` request."], ["7", "useQuery", "Use Tanstack Query's `useQuery` to send a `GET` request."],
["9", "sdk.admin.product.list", "Use the SDK to send the request."], ["8", "sdk.admin.product.list", "Use the SDK to send the request."],
["10", "queryKey", "Specify the key used to cache data."] ["9", "queryKey", "Specify the key used to cache data."]
] ]
```tsx title="src/admin/widgets/product-widget.ts" highlights={queryHighlights} ```tsx title="src/admin/widgets/product-widget.tsx" highlights={queryHighlights}
import { defineWidgetConfig } from "@medusajs/admin-sdk" import { defineWidgetConfig } from "@medusajs/admin-sdk"
import { Button, Container } from "@medusajs/ui" import { Container } from "@medusajs/ui"
import { useQuery } from "@tanstack/react-query" import { useQuery } from "@tanstack/react-query"
import { sdk } from "../lib/config" import { sdk } from "../lib/sdk"
import { DetailWidgetProps, HttpTypes } from "@medusajs/framework/types"
const ProductWidget = () => { const ProductWidget = () => {
const { data, isLoading } = useQuery({ const { data, isLoading } = useQuery({
@@ -115,11 +116,11 @@ export const mutationHighlights = [
["12", "sdk.admin.product.update", "Use the configured SDK to send the request."], ["12", "sdk.admin.product.update", "Use the configured SDK to send the request."],
] ]
```tsx title="src/admin/widgets/product-widget.ts" highlights={mutationHighlights} ```tsx title="src/admin/widgets/product-widget.tsx" highlights={mutationHighlights}
import { defineWidgetConfig } from "@medusajs/admin-sdk" import { defineWidgetConfig } from "@medusajs/admin-sdk"
import { Button, Container } from "@medusajs/ui" import { Button, Container } from "@medusajs/ui"
import { useMutation } from "@tanstack/react-query" import { useMutation } from "@tanstack/react-query"
import { sdk } from "../lib/config" import { sdk } from "../lib/sdk"
import { DetailWidgetProps, HttpTypes } from "@medusajs/framework/types" import { DetailWidgetProps, HttpTypes } from "@medusajs/framework/types"
const ProductWidget = ({ const ProductWidget = ({
@@ -128,7 +129,7 @@ const ProductWidget = ({
const { mutateAsync } = useMutation({ const { mutateAsync } = useMutation({
mutationFn: (payload: HttpTypes.AdminUpdateProduct) => mutationFn: (payload: HttpTypes.AdminUpdateProduct) =>
sdk.admin.product.update(productData.id, payload), sdk.admin.product.update(productData.id, payload),
onSuccess: () => alert("updated product"), onSuccess: () => alert("Product updated"),
}) })
const handleUpdate = () => { const handleUpdate = () => {
@@ -154,7 +155,7 @@ export default ProductWidget
</CodeTab> </CodeTab>
</CodeTabs> </CodeTabs>
You can also send requests to custom routes as explained in the [JS SDK reference](!resources!/js-sdk). You can also send requests to custom routes, as explained in the [JS SDK reference](!resources!/js-sdk).
### Use Route Loaders for Initial Data ### Use Route Loaders for Initial Data
@@ -170,7 +171,7 @@ In your admin customizations, you can use the following global variables:
- `__BACKEND_URL__`: The URL to the Medusa backend, as set in the [admin.backendUrl](../../../configurations/medusa-config/page.mdx#backendurl) configuration in `medusa-config.ts`. - `__BACKEND_URL__`: The URL to the Medusa backend, as set in the [admin.backendUrl](../../../configurations/medusa-config/page.mdx#backendurl) configuration in `medusa-config.ts`.
- `__STOREFRONT_URL__`: The URL to the storefront, as set in the [admin.storefrontUrl](../../../configurations/medusa-config/page.mdx#storefrontUrl) configuration in `medusa-config.ts`. - `__STOREFRONT_URL__`: The URL to the storefront, as set in the [admin.storefrontUrl](../../../configurations/medusa-config/page.mdx#storefrontUrl) configuration in `medusa-config.ts`.
If you get type errors while using these variables, you can create the file `src/admin/vite-env.d.ts` with the following content: If you get type errors while using these variables, create the file `src/admin/vite-env.d.ts` with the following content:
```ts title="src/admin/vite-env.d.ts" ```ts title="src/admin/vite-env.d.ts"
/// <reference types="vite/client" /> /// <reference types="vite/client" />
www/apps/book/generated/edit-dates.mjs
+1 -1
View File
@@ -43,7 +43,7 @@ export const generatedEditDates = {
"app/learn/fundamentals/scheduled-jobs/execution-number/page.mdx": "2025-07-25T15:54:56.135Z", "app/learn/fundamentals/scheduled-jobs/execution-number/page.mdx": "2025-07-25T15:54:56.135Z",
"app/learn/fundamentals/api-routes/parameters/page.mdx": "2025-02-14T08:34:03.184Z", "app/learn/fundamentals/api-routes/parameters/page.mdx": "2025-02-14T08:34:03.184Z",
"app/learn/fundamentals/api-routes/http-methods/page.mdx": "2025-07-25T15:12:29.347Z", "app/learn/fundamentals/api-routes/http-methods/page.mdx": "2025-07-25T15:12:29.347Z",
"app/learn/fundamentals/admin/tips/page.mdx": "2025-08-01T13:14:23.246Z", "app/learn/fundamentals/admin/tips/page.mdx": "2025-08-20T11:37:12.855Z",
"app/learn/fundamentals/api-routes/cors/page.mdx": "2025-03-11T08:54:26.281Z", "app/learn/fundamentals/api-routes/cors/page.mdx": "2025-03-11T08:54:26.281Z",
"app/learn/fundamentals/admin/ui-routes/page.mdx": "2025-07-25T06:58:26.149Z", "app/learn/fundamentals/admin/ui-routes/page.mdx": "2025-07-25T06:58:26.149Z",
"app/learn/fundamentals/api-routes/middlewares/page.mdx": "2025-07-18T15:20:25.735Z", "app/learn/fundamentals/api-routes/middlewares/page.mdx": "2025-07-18T15:20:25.735Z",
www/apps/book/public/llms-full.txt
+15 -16
View File
@@ -6366,7 +6366,7 @@ Refer to [react-router-dom’s documentation](https://reactrouter.com/en/6.29.0)
# Admin Development Tips # Admin Development Tips
In this chapter, you'll find some tips for your admin development. In this chapter, you'll find some tips for developing your admin.
## Send Requests to API Routes ## Send Requests to API Routes
@@ -6374,11 +6374,11 @@ To send a request to an API route in the Medusa Application, use Medusa's [JS SD
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. 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: First, create the file `src/admin/lib/sdk.ts` to set up the SDK for use in your customizations:
### Medusa Project ### Medusa Project
```ts title="src/admin/lib/config.ts" ```ts title="src/admin/lib/sdk.ts"
import Medusa from "@medusajs/js-sdk" import Medusa from "@medusajs/js-sdk"
export const sdk = new Medusa({ export const sdk = new Medusa({
@@ -6392,7 +6392,7 @@ export const sdk = new Medusa({
### Medusa Plugin ### Medusa Plugin
```ts title="src/admin/lib/config.ts" ```ts title="src/admin/lib/sdk.ts"
import Medusa from "@medusajs/js-sdk" import Medusa from "@medusajs/js-sdk"
export const sdk = new Medusa({ export const sdk = new Medusa({
@@ -6403,22 +6403,21 @@ export const sdk = new Medusa({
}) })
``` ```
Notice that you use `import.meta.env` in a Medusa project to access environment variables in your customizations, whereas in a plugin you use the global variable `__BACKEND_URL__` to access the backend URL. You can learn more in the [Admin Environment Variables](https://docs.medusajs.com/learn/fundamentals/admin/environment-variables/index.html.md) chapter. Notice that in a Medusa project, you use `import.meta.env` to access environment variables in your customizations, whereas in a plugin you use the global variable `__BACKEND_URL__` to access the backend URL. You can learn more in the [Admin Environment Variables](https://docs.medusajs.com/learn/fundamentals/admin/environment-variables/index.html.md) chapter.
Learn more about the JS SDK's configurations [this documentation](https://docs.medusajs.com/resources/js-sdk#js-sdk-configurations/index.html.md). Refer to the [JS SDK](https://docs.medusajs.com/resources/js-sdk#js-sdk-configurations/index.html.md) reference for more details on the SDK's configurations.
Then, use the configured SDK with the `useQuery` Tanstack Query hook to send `GET` requests, and `useMutation` hook to send `POST` or `DELETE` requests. Then, use the configured SDK with the `useQuery` Tanstack Query hook to send `GET` requests, and the `useMutation` hook to send `POST` or `DELETE` requests.
For example: For example:
### Query ### Query
```tsx title="src/admin/widgets/product-widget.ts" highlights={queryHighlights} ```tsx title="src/admin/widgets/product-widget.tsx" highlights={queryHighlights}
import { defineWidgetConfig } from "@medusajs/admin-sdk" import { defineWidgetConfig } from "@medusajs/admin-sdk"
import { Button, Container } from "@medusajs/ui" import { Container } from "@medusajs/ui"
import { useQuery } from "@tanstack/react-query" import { useQuery } from "@tanstack/react-query"
import { sdk } from "../lib/config" import { sdk } from "../lib/sdk"
import { DetailWidgetProps, HttpTypes } from "@medusajs/framework/types"
const ProductWidget = () => { const ProductWidget = () => {
const { data, isLoading } = useQuery({ const { data, isLoading } = useQuery({
@@ -6449,11 +6448,11 @@ export default ProductWidget
### Mutation ### Mutation
```tsx title="src/admin/widgets/product-widget.ts" highlights={mutationHighlights} ```tsx title="src/admin/widgets/product-widget.tsx" highlights={mutationHighlights}
import { defineWidgetConfig } from "@medusajs/admin-sdk" import { defineWidgetConfig } from "@medusajs/admin-sdk"
import { Button, Container } from "@medusajs/ui" import { Button, Container } from "@medusajs/ui"
import { useMutation } from "@tanstack/react-query" import { useMutation } from "@tanstack/react-query"
import { sdk } from "../lib/config" import { sdk } from "../lib/sdk"
import { DetailWidgetProps, HttpTypes } from "@medusajs/framework/types" import { DetailWidgetProps, HttpTypes } from "@medusajs/framework/types"
const ProductWidget = ({ const ProductWidget = ({
@@ -6462,7 +6461,7 @@ const ProductWidget = ({
const { mutateAsync } = useMutation({ const { mutateAsync } = useMutation({
mutationFn: (payload: HttpTypes.AdminUpdateProduct) => mutationFn: (payload: HttpTypes.AdminUpdateProduct) =>
sdk.admin.product.update(productData.id, payload), sdk.admin.product.update(productData.id, payload),
onSuccess: () => alert("updated product"), onSuccess: () => alert("Product updated"),
}) })
const handleUpdate = () => { const handleUpdate = () => {
@@ -6485,7 +6484,7 @@ export const config = defineWidgetConfig({
export default ProductWidget export default ProductWidget
``` ```
You can also send requests to custom routes as explained in the [JS SDK reference](https://docs.medusajs.com/resources/js-sdk/index.html.md). You can also send requests to custom routes, as explained in the [JS SDK reference](https://docs.medusajs.com/resources/js-sdk/index.html.md).
### Use Route Loaders for Initial Data ### Use Route Loaders for Initial Data
@@ -6501,7 +6500,7 @@ In your admin customizations, you can use the following global variables:
- `__BACKEND_URL__`: The URL to the Medusa backend, as set in the [admin.backendUrl](https://docs.medusajs.com/learn/configurations/medusa-config#backendurl/index.html.md) configuration in `medusa-config.ts`. - `__BACKEND_URL__`: The URL to the Medusa backend, as set in the [admin.backendUrl](https://docs.medusajs.com/learn/configurations/medusa-config#backendurl/index.html.md) configuration in `medusa-config.ts`.
- `__STOREFRONT_URL__`: The URL to the storefront, as set in the [admin.storefrontUrl](https://docs.medusajs.com/learn/configurations/medusa-config#storefrontUrl/index.html.md) configuration in `medusa-config.ts`. - `__STOREFRONT_URL__`: The URL to the storefront, as set in the [admin.storefrontUrl](https://docs.medusajs.com/learn/configurations/medusa-config#storefrontUrl/index.html.md) configuration in `medusa-config.ts`.
If you get type errors while using these variables, you can create the file `src/admin/vite-env.d.ts` with the following content: If you get type errors while using these variables, create the file `src/admin/vite-env.d.ts` with the following content:
```ts title="src/admin/vite-env.d.ts" ```ts title="src/admin/vite-env.d.ts"
/// <reference types="vite/client" /> /// <reference types="vite/client" />