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

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
@@ -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:
@@ -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
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: