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

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

* fix link

* add v4.22 as the supported version of react-query

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

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
 

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
 

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

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 || 
+              createProduct.isLoading || 
-              uploadFile.isPending || 
+              uploadFile.isLoading || 
-              isPending
+              isLoading
             }>
             Create
           </Button>

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