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

docs: add a note about installing tanstack query as a dev dependency (#11123)

Browse Source
This commit is contained in:
Shahed Nasser
2025-01-23 19:16:52 +02:00
committed by GitHub
parent eace10e66b
commit 2fe98c9712
6 changed files with 36 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
www/apps/book/app/learn/customization/customize-admin/route/page.mdx
View File

@@ -410,6 +410,12 @@ You first define pagination-related variables:
Then, you use `useQuery` from [Tanstack (React) Query](https://tanstack.com/query/latest) to query the Medusa server. Tanstack Query provides features like asynchronous state management and optimized caching.
<Note type="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.
</Note>
In the `queryFn` function that executes the query, you use the JS SDK's `client.fetch` method to send a request to your custom API route. The first parameter is the route's path, and the second is an object of request configuration and data. You pass the query parameters in the `query` property.
This sends a request to the [Get Brands API route](#1-get-brands-api-route), passing the pagination query parameters. Whenever `currentPage` is updated, the `offset` is also updated, which will send a new request to retrieve the brands for the current page.

6
www/apps/book/app/learn/customization/customize-admin/widget/page.mdx
View File

@@ -147,6 +147,12 @@ Since the widget is injected at the top of the product details page, the widget
In the widget, you use [Tanstack (React) Query](https://tanstack.com/query/latest) to query the Medusa server. Tanstack Query provides features like asynchronous state management and optimized caching. In the `queryFn` function that executes the query, you use the JS SDK to send a request to the [Get Product API Route](!api!/admin#products_getproductsid), passing `+brand.*` in the `fields` query parameter to retrieve the product's brand.
<Note type="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.
</Note>
You then render a section that shows the brand's name. In admin customizations, use components from the [Medusa UI package](!ui!) to maintain a consistent user interface and design in the dashboard.
---

6
www/apps/book/app/learn/fundamentals/admin/tips/page.mdx
View File

@@ -12,6 +12,12 @@ In this chapter, you'll find some tips for your admin development.
To send a request to an API route in the Medusa Application, use Medusa's [JS SDK](!resources!/js-sdk) with [Tanstack Query](https://tanstack.com/query/latest). Both of these tools are installed in your project by default.
<Note type="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.
</Note>
First, create the file `src/admin/lib/config.ts` to setup the SDK for use in your customizations:
```ts

6
www/apps/resources/app/admin-components/components/table/page.mdx
View File

@@ -311,6 +311,12 @@ You can change the query to send a request to a custom API route as explained in
</Note>
<Note type="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.
</Note>
`useQuery` returns an object containing `data`, which holds the response fields including the products and pagination fields.
Then, to display the table, replace the `TODO` with the following:

6
www/apps/resources/app/integrations/guides/sanity/page.mdx
View File

@@ -1442,6 +1442,12 @@ In this section, you'll add a widget in the product details page. The widget wil
To send requests from admin customizations to the Medusa server, you need to use Medusa's [JS SDK](../../../js-sdk/page.mdx). You'll also use [Tanstack Query](https://tanstack.com/query/latest) to benefit from features like data caching and invalidation.
<Note type="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.
</Note>
To configure the JS SDK, create the file `src/admin/lib/sdk.ts` with the following content:
```ts title="src/admin/lib/sdk.ts"

6
www/apps/resources/app/js-sdk/page.mdx
View File

@@ -352,6 +352,12 @@ In admin customizations, use [Tanstack Query](https://tanstack.com/query/latest)
Tanstack Query is installed by default in your Medusa application.
<Note type="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.
</Note>
Use the [configured SDK](#setup-js-sdk) with the [useQuery](https://tanstack.com/query/latest/docs/framework/react/reference/useQuery#usequery) Tanstack Query hook to send `GET` requests, and [useMutation](https://tanstack.com/query/latest/docs/framework/react/reference/useMutation#usemutation) hook to send `POST` or `DELETE` requests.
For example: