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

docs: fix medusa-react guide + specify react-query version (#5918)

Browse Source 
* docs: fix medusa-react guide by adding missing link

* fix link

* add v4.22 as the supported version of react-query
This commit is contained in:
Shahed Nasser
2023-12-18 16:01:24 +02:00
committed by GitHub
parent bd60efbe65
commit 8cb53da34e
6 changed files with 13 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
www/apps/docs/content/admin/onboarding.mdx
View File

@@ -50,7 +50,7 @@ If you're using TypeScript in your project, it's highly recommended to setup you
To install Medusa React and its required dependencies, run the following command in the root directory of the Medusa backend:
```bash npm2yarn
npm install medusa-react @tanstack/react-query
npm install medusa-react @tanstack/react-query@4.22
```
### Implement Helper Resources

2
www/apps/docs/content/admin/routes.md
View File

@@ -331,7 +331,7 @@ export default CustomPage
## Querying and Mutating Data
You might need to interact with the Medusa backend from your admin route. To do so, you can utilize the [Medusa React package](../medusa-react/overview.mdx). It contains a collection of queries and mutation built on `@tanstack/react-query` that lets you interact with the Medusa backend.
You might need to interact with the Medusa backend from your admin route. To do so, you can utilize the [Medusa React package](../medusa-react/overview.mdx). It contains a collection of queries and mutation built on `@tanstack/react-query@4.22` that lets you interact with the Medusa backend.
:::note

2
www/apps/docs/content/admin/setting-pages.md
View File

@@ -300,7 +300,7 @@ View [react-router-dom’s documentation](https://reactrouter.com/en/main) for
## Querying and Mutating Data
You might need to interact with the Medusa backend from your admin setting page. To do so, you can utilize the Medusa React package. It contains a collection of queries and mutations built on `@tanstack/react-query` that lets you interact with the Medusa backend.
You might need to interact with the Medusa backend from your admin setting page. To do so, you can utilize the Medusa React package. It contains a collection of queries and mutations built on `@tanstack/react-query@4.22` that lets you interact with the Medusa backend.
:::note

6
www/apps/docs/content/medusa-react/overview.mdx
View File

@@ -20,16 +20,16 @@ Alternatively, you can use Medusa’s [JS Client](../js-client/overview.mdx) or
In the directory holding your React-based storefront or admin dashboard, run the following command to install Medusa React:
```bash npm2yarn
npm install medusa-react @tanstack/react-query @medusajs/medusa
npm install medusa-react @tanstack/react-query@4.22 @medusajs/medusa
```
In addition to the `medusa-react` library, you need the following libraries:
1\. `@tanstack/react-query`: `medusa-react` is built on top of [Tanstack Query](https://tanstack.com/query/latest/docs/react/overview). You’ll learn later in this reference how you can use Mutations and Queries with Medusa React.
1\. `@tanstack/react-query`: `medusa-react` is built on top of [Tanstack Query v4.22](https://tanstack.com/query/v4/docs/react/overview). You’ll learn later in this reference how you can use Mutations and Queries with Medusa React.
:::note
Versions of Medusa React prior to v4.0.2 used React Query v3 instead of Tanstack Query. Check out [this upgrade guide] to learn how you can update your storefront.
Versions of Medusa React prior to v4.0.2 used React Query v3 instead of Tanstack Query. Check out [this upgrade guide](../upgrade-guides/medusa-react/4-0-2.md) to learn how you can update your storefront.
:::

16
www/apps/docs/content/recipes/digital-products.mdx
View File

@@ -590,7 +590,7 @@ To add an interface that allows the admin user to upload digital products, you c
Before starting off, make sure to install the necessary dependencies in your Medusa backend project:
```bash npm2yarn
npm install medusa-react @tanstack/react-query @medusajs/ui
npm install medusa-react @tanstack/react-query@4.22 @medusajs/ui
```
This installs the necessary packages to use the Medusa React client and the [Medusa UI package](https://docs.medusajs.com/ui).
@@ -735,12 +735,6 @@ To add an interface that allows the admin user to upload digital products, you c
In the page, you’ll show the list of digital products in a table, if there are any. You’ll also show a button that opens a drawer to the side of the page.
In the drawer, you show the Create Digital Product form. To create this form, create the file `src/admin/components/product-media/CreateForm/index.tsx` with the following content:
:::note
If you're using `@tanstack/react-query` v4, please change all occurrences of `isPending` to `isLoading`.
:::
```tsx title="src/admin/components/product-media/CreateForm/index.tsx" badgeLabel="Backend"
import { useState } from "react"
@@ -780,7 +774,7 @@ If you're using `@tanstack/react-query` v4, please change all occurrences of `is
const uploadFile = useAdminUploadProtectedFile()
const {
mutate: createDigitalProduct,
isPending,
isLoading,
} = useAdminCustomPost<
CreateProductMediaRequest,
CreateProductMediaResponse
@@ -910,9 +904,9 @@ If you're using `@tanstack/react-query` v4, please change all occurrences of `is
variant="primary"
type="submit"
isLoading={
createProduct.isPending ||
uploadFile.isPending ||
isPending
createProduct.isLoading ||
uploadFile.isLoading ||
isLoading
}>
Create
</Button>

4
www/apps/docs/content/upgrade-guides/medusa-react/4-0-2.md
View File

@@ -36,10 +36,10 @@ npm uninstall react-query
### Install Tanstack Query
Run the following command to install Tanstack Query:
Run the following command to install Tanstack Query v4.22:
```bash npm2yarn
npm install @tanstack/react-query
npm install @tanstack/react-query@4.22
```
### Update Imports