diff --git a/www/apps/docs/content/admin/onboarding.mdx b/www/apps/docs/content/admin/onboarding.mdx index 02bf04af3c..9f45b6c54d 100644 --- a/www/apps/docs/content/admin/onboarding.mdx +++ b/www/apps/docs/content/admin/onboarding.mdx @@ -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 diff --git a/www/apps/docs/content/admin/routes.md b/www/apps/docs/content/admin/routes.md index 8d1a0b1439..0790ca61d2 100644 --- a/www/apps/docs/content/admin/routes.md +++ b/www/apps/docs/content/admin/routes.md @@ -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 diff --git a/www/apps/docs/content/admin/setting-pages.md b/www/apps/docs/content/admin/setting-pages.md index 8e15b6805f..4f0927abff 100644 --- a/www/apps/docs/content/admin/setting-pages.md +++ b/www/apps/docs/content/admin/setting-pages.md @@ -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 diff --git a/www/apps/docs/content/medusa-react/overview.mdx b/www/apps/docs/content/medusa-react/overview.mdx index 00b9264145..d8a20946a2 100644 --- a/www/apps/docs/content/medusa-react/overview.mdx +++ b/www/apps/docs/content/medusa-react/overview.mdx @@ -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. ::: diff --git a/www/apps/docs/content/recipes/digital-products.mdx b/www/apps/docs/content/recipes/digital-products.mdx index 13957406f6..8f9e7a2df2 100644 --- a/www/apps/docs/content/recipes/digital-products.mdx +++ b/www/apps/docs/content/recipes/digital-products.mdx @@ -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 diff --git a/www/apps/docs/content/upgrade-guides/medusa-react/4-0-2.md b/www/apps/docs/content/upgrade-guides/medusa-react/4-0-2.md index 6fbc49d7f7..68a322026e 100644 --- a/www/apps/docs/content/upgrade-guides/medusa-react/4-0-2.md +++ b/www/apps/docs/content/upgrade-guides/medusa-react/4-0-2.md @@ -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