docs: general fixes to admin tips document (#13253)
This commit is contained in:
1 parent
fa16503005
commit
27bb69390d
3 files changed
+36
-36
No files matched your search
@@ -6366,7 +6366,7 @@ Refer to [react-router-dom’s documentation](https://reactrouter.com/en/6.29.0)
|
||||
|
||||
# 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
|
||||
|
||||
@@ -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.
|
||||
|
||||
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
|
||||
|
||||
```ts title="src/admin/lib/config.ts"
|
||||
```ts title="src/admin/lib/sdk.ts"
|
||||
import Medusa from "@medusajs/js-sdk"
|
||||
|
||||
export const sdk = new Medusa({
|
||||
@@ -6392,7 +6392,7 @@ export const sdk = new Medusa({
|
||||
|
||||
### Medusa Plugin
|
||||
|
||||
```ts title="src/admin/lib/config.ts"
|
||||
```ts title="src/admin/lib/sdk.ts"
|
||||
import Medusa from "@medusajs/js-sdk"
|
||||
|
||||
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:
|
||||
|
||||
### 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 { Button, Container } from "@medusajs/ui"
|
||||
import { Container } from "@medusajs/ui"
|
||||
import { useQuery } from "@tanstack/react-query"
|
||||
import { sdk } from "../lib/config"
|
||||
import { DetailWidgetProps, HttpTypes } from "@medusajs/framework/types"
|
||||
import { sdk } from "../lib/sdk"
|
||||
|
||||
const ProductWidget = () => {
|
||||
const { data, isLoading } = useQuery({
|
||||
@@ -6449,11 +6448,11 @@ export default ProductWidget
|
||||
|
||||
### 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 { Button, Container } from "@medusajs/ui"
|
||||
import { useMutation } from "@tanstack/react-query"
|
||||
import { sdk } from "../lib/config"
|
||||
import { sdk } from "../lib/sdk"
|
||||
import { DetailWidgetProps, HttpTypes } from "@medusajs/framework/types"
|
||||
|
||||
const ProductWidget = ({
|
||||
@@ -6462,7 +6461,7 @@ const ProductWidget = ({
|
||||
const { mutateAsync } = useMutation({
|
||||
mutationFn: (payload: HttpTypes.AdminUpdateProduct) =>
|
||||
sdk.admin.product.update(productData.id, payload),
|
||||
onSuccess: () => alert("updated product"),
|
||||
onSuccess: () => alert("Product updated"),
|
||||
})
|
||||
|
||||
const handleUpdate = () => {
|
||||
@@ -6485,7 +6484,7 @@ export const config = defineWidgetConfig({
|
||||
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
|
||||
|
||||
@@ -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`.
|
||||
- `__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"
|
||||
/// <reference types="vite/client" />
|
||||
|
||||
Reference in new issue
Block a user