docs(vue-query): update typescript page examples and playgrounds, add link to custom-client page (#5890)

* docs(vue-query): update typescript page examples and playgrounds

* docs(vue-query): add link to custom-client page

Author: DamianOsipiuk

docs/config.json

@@ -579,8 +579,8 @@
               "to": "vue/guides/custom-logger"
             },
             {
-              "label": "Testing",
-              "to": "vue/guides/testing"
+              "label": "Custom Client",
+              "to": "vue/guides/custom-client"
             },
             {
               "label": "Does this replace [Vuex, Pinia]?",

docs/react/typescript.md

@@ -16,6 +16,8 @@ Things to keep in mind:
 
 Types in React Query generally flow through very well so that you don't have to provide type annotations for yourself
 
+[//]: # 'TypeInference1'
+
 ```tsx
 const { data } = useQuery({
   //    ^? const data: number | undefined
@@ -24,11 +26,10 @@ const { data } = useQuery({
 })
 ```
 
-[//]: # 'Playground1'
-
 [typescript playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgVwM4FMCKz1QJ5wC+cAZlBCHAORToCGAxjALQCOO+VAsAFC8MQAdqnhIAJnRh0icALwoM2XHgAUAbSqDkIAEa4qAXQA0cFQEo5APjgAFciGAYAdLVQQANgDd0KgKxmzXgB6ILgw8IA9AH5eIA)
 
-[//]: # 'Playground1'
+[//]: # 'TypeInference1'
+[//]: # 'TypeInference2'
 
 ```tsx
 const { data } = useQuery({
@@ -39,14 +40,14 @@ const { data } = useQuery({
 })
 ```
 
-[//]: # 'Playground2'
-
 [typescript playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgVwM4FMCKz1QJ5wC+cAZlBCHAORToCGAxjALQCOO+VAsAFC8MQAdqnhIAJnRh0icALwoM2XHgAUAbSox0IqgF0ANHBUBKOQD44ABXIhgGAHS1UEADYA3dCoCsxw0gwu6EwAXHASUuZhknT2MBAAyjBQwIIA5iaExrwA9Nlw+QUAegD8vEA)
 
-[//]: # 'Playground2'
+[//]: # 'TypeInference2'
 
 This works best if your `queryFn` has a well-defined returned type. Keep in mind that most data fetching libraries return `any` per default, so make sure to extract it to a properly typed function:
 
+[//]: # 'TypeInference3'
+
 ```tsx
 const fetchGroups = (): Promise<Group[]> =>
   axios.get('/groups').then((response) => response.data)
@@ -55,16 +56,16 @@ const { data } = useQuery({ queryKey: ['groups'], queryFn: fetchGroups })
 //      ^? const data: Group[] | undefined
 ```
 
-[//]: # 'Playground3'
-
 [typescript playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgVwM4FMCKz1QJ5wC+cAZlBCHAORToCGAxjALQCOO+VAsAFCiSw4dAB7AIqUuUpURY1Nx68YeMOjgBxcsjBwAvIjjAAJgC44AO2QgARriK9eDCOdTwS6GAwAWmiNon6ABQAlGYAClLAGAA8vtoA2gC6AHx6qbLiAHQA5h6BVAD02Vpg8sGZMF7o5oG0qJAuarqpdQ0YmUZ0MHTBDjxOLvBInd1EeigY2Lh4gfFUxX6lVIkANKQe3nGlvTwFBXAHhwB6APxwA65wI3RmW0lwAD4o5kboJMDm6Ea8QA)
 
-[//]: # 'Playground3'
+[//]: # 'TypeInference3'
 
 ## Type Narrowing
 
 React Query uses a [discriminated union type](https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes-func.html#discriminated-unions) for the query result, discriminated by the `status` field and the derived status boolean flags. This will allow you to check for e.g. `success` status to make `data` defined:
 
+[//]: # 'TypeNarrowing'
+
 ```tsx
 const { data, isSuccess } = useQuery({
   queryKey: ['test'],
@@ -77,16 +78,16 @@ if (isSuccess) {
 }
 ```
 
-[//]: # 'Playground4'
-
 [typescript playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgVwM4FMCKz1QJ5wC+cAZlBCHAORToCGAxjALQCOO+VAsAFC8MQAdqnhIAJnRh0ANHGCoAysgYN0qVETgBeFBmy48ACgDaVGGphUAurMMBKbQD44ABXIh56AHS1UEADYAbuiGAKx2dry8wCRwhvJKKmqoDgi8cBlwElK8APS5GQB6APy8hLxAA)
 
-[//]: # 'Playground4'
+[//]: # 'TypeNarrowing'
 
 ## Typing the error field
 
 The type for error defaults to `unknown`. This is in line with what TypeScript gives you per default in a catch clauses (see [useUnknownInCatchVariables](https://devblogs.microsoft.com/typescript/announcing-typescript-4-4/#use-unknown-catch-variables)). The safest way to work with `error` would be to perform a runtime check; another way would be to explicitly define types for `data` and `error`:
 
+[//]: # 'TypingError'
+
 ```tsx
 const { error } = useQuery({ queryKey: ['groups'], queryFn: fetchGroups })
 //      ^? const error: unknown
@@ -97,22 +98,19 @@ if (error instanceof Error) {
 }
 ```
 
-[//]: # 'Playground5'
-
 [typescript playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgVwM4FMCKz1QJ5wC+cAZlBCHAORToCGAxjALQCOO+VAsAFCiSw4dAB7AIqUuUpURY1Nx68YeMOjgBxcsjBwAvIjjAAJgC44AO2QgARriK9eDCOdTwS6GAwAWmiNon6ABQAlGYAClLAGAA8vtoA2gC6AHx6qbLiAHQA5h6BVAD02Vpg8sGZMF7o5oG0qJAuarqpdQ0YmUZ0MHTBDjxOLvBIuORQRHooGNi4eIHxVMV+pVSJADSkHt5xpb08BQVwh0cAegD8fcAkcIEj0IaDdOYM6BBXAKJQo8GIvIe3ULx9nAzrxCEA)
 
-[//]: # 'Playground5'
+[//]: # 'TypingError'
+[//]: # 'TypingError2'
 
 ```tsx
 const { error } = useQuery<Group[], Error>(['groups'], fetchGroups)
 //      ^? const error: Error | null
 ```
 
-[//]: # 'Playground6'
-
 [typescript playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgVwM4FMCKz1QJ5wC+cAZlBCHAORToCGAxjALQCOO+VAsAFCiSw4dAB7AIqUuUpURY1Nx68YeMOjgBxcsjBwAvIjjAAJgC44AO2QgARriK9eDCOdTwS6GAwAWmiNon6ABQAlGYAClLAGAA8vtoA2gC6AHx6qbLiAHQA5h6BVAD02Vpg8sGZMF7o5oG0qJAuarqpdQ0YmUZ0MHTBDjxOLvBIuORQRHooGNi4eLElSQA0cACiUKPJgfFUxX6lVIlL7p4+Jai9PAUFcNc3AHoA-LxAA)
 
-[//]: # 'Playground6'
+[//]: # 'TypingError2'
 [//]: # 'Materials'
 
 ## Further Reading

docs/vue/typescript.md

@@ -6,35 +6,79 @@ replace:
   { 'React': 'Vue', 'react-query package version': 'vue-query package version' }
 ---
 
-[//]: # 'Playground1'
+[//]: # 'TypeInference1'
 
-[typescript playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgVwM4FMCKz1QJ5wC+cAZlBCHAOQACMAhgHaoMDGA1gPQBuOAtAEcc+KgFgAUBNYRm8JABN6DInAC8KDNlx4AFAG0qjZCABGuKgF0ANHB0BKNQD44ABXIhgGAHRR0qCAA23Og6AKx2dhKcnHCxcQB6APwSQA)
+```tsx
+const { data } = useQuery({
+  //    ^? const data: Ref<number> | Ref<undefined>
+  queryKey: ['test'],
+  queryFn: () => Promise.resolve(5),
+})
+```
 
-[//]: # 'Playground1'
-[//]: # 'Playground2'
+[typescript playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgVwM4FMCKz1QJ5wC+cAZlBCHAOQACMAhgHaoMDGA1gPQBuOAtAEcc+KgFgAUBNYRm8JABN6DInAC8KDNlx4AFAglw4nTocMA9APwG4Q7QGl0eAFxwA2lRjoWVALoAaa1t8ADFGFx0ASjUAPjgABXIQYAwAOigvCAAbbnQdAFYIgPFCCKA)
 
-[typescript playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgVwM4FMCKz1QJ5wC+cAZlBCHAOQACMAhgHaoMDGA1gPQBuOAtAEcc+KgFgAUBNYRm8JABN6DInAC8KDNlx4AFAG0qMdCyoBdADRwdASjUA+OAAVyIYBgB0UYxAA23dDoArNaWSBg+6KwwAFxwisqqDvH07jAQAMowUMCMAOY2hNYSnJxwZeUAegD8EkA)
+[//]: # 'TypeInference1'
+[//]: # 'TypeInference2'
 
-[//]: # 'Playground2'
-[//]: # 'Playground3'
+```tsx
+const { data } = useQuery({
+  //      ^? const data: Ref<string> | Ref<undefined>
+  queryKey: ['test'],
+  queryFn: () => Promise.resolve(5),
+  select: (data) => data.toString(),
+})
+```
 
-[typescript playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgVwM4FMCKz1QJ5wC+cAZlBCHAOQACMAhgHaoMDGA1gPQBuOAtAEcc+KgFgAUKEiw49AB7AIqUuUpV5i1GPESYeMOjgBxcsjBwAvIjjAAJgC44jZCABGuIhImsIzeCXQYVgALEwgzZSsACgBKRwAFVWAMAB4wswBtAF0APks8jSUAOgBzQKiqThLTMC0Yophg9EYoqHRUSGZDCzy2jt8MItt6BhivcR8-a2GGIksUDGxcPCiMqmrw2qosgBpSQJD02rHxTk44C8uAPQB+CSA)
+[typescript playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgVwM4FMCKz1QJ5wC+cAZlBCHAOQACMAhgHaoMDGA1gPQBuOAtAEcc+KgFgAUBNYRm8JABN6DInAC8KDNlx4AFAglw4nTodNwAegH4DcIdoDS6PAC44AbSox0LKgF0ANDZ2+ABijK46AJRqAHxwAArkIMAYAHRQ3hAANtzoOgCskYHihhhZ6KwwEYoM0apxNfSpMBAAyjBQwIwA5lHFhJFAA)
 
-[//]: # 'Playground3'
-[//]: # 'Playground4'
+[//]: # 'TypeInference2'
+[//]: # 'TypeInference3'
+
+```tsx
+const fetchGroups = (): Promise<Group[]> =>
+  axios.get('/groups').then((response) => response.data)
+
+const { data } = useQuery({ queryKey: ['groups'], queryFn: fetchGroups })
+//      ^? const data: Ref<Group[]> | Ref<undefined>
+```
+
+[typescript playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgVwM4FMCKz1QJ5wC+cAZlBCHAOQACMAhgHaoMDGA1gPQBuOAtAEcc+KgFgAUKEiw49AB7AIqUuUpV5i1GPESYeMOjgBxcsjBwAvIjjAAJgC44jZCABGuIhImsIzeCXQYVgALEwgzZSsACgBKRwAFVWAMAB4wswBtAF0APksciThZBSUAOgBzQKiqTnLTMC0Y0phg9EYoqKh0VEhmdBj8uC6e3wxS23oGGK9xHz9rCYYiSxQMbFw8KKQhDYBpdDxHDKo68IaqLIAaOB38ADFGRwCg0PrlQmnxTk4i37gAPQA-EA)
+
+[//]: # 'TypeInference3'
+[//]: # 'TypeNarrowing'
+
+```tsx
+const { data, isSuccess } = reactive(useQuery({
+  queryKey: ['test'],
+  queryFn: () => Promise.resolve(5),
+}))
+
+if (isSuccess) {
+  data
+  // ^? const data: number
+}
+```
 
 [typescript playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgVwM4FMCKz1QJ5wC+cAZlBCHAOQACMAhgHaoMDGA1gPQBuOAtAEcc+KgFgAUKEixEcKOnqsYwbuiKlylKr3RUA3BImsIzeEgAm9BgBo4wVAGVkrVulSp1AXjkKlK9AAUaFjCeAEA2lQwbjBUALq2AQCUcJ4AfHAACpr26AB08qgQADaqAQCsSVWGkiRwAfZOLm6oKQgScJ1wlgwSnJydAHoA-BKEEkA)
 
-[//]: # 'Playground4'
-[//]: # 'Playground5'
+[//]: # 'TypeNarrowing'
+[//]: # 'TypingError'
 
-[typescript playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgVwM4FMCKz1QJ5wC+cAZlBCHAOQACMAhgHaoMDGA1gPQBuOAtAEcc+KgFgAUKEiw49AB7AIqUuUpV5i1GPESYeMOjgBxcsjBwAvIjjAAJgC44jZCABGuIhImsIzeCXQYVgALEwgzZSsACgBKRwAFVWAMAB4wswBtAF0APks8jSUAOgBzQKiqThLTMC0Yophg9EYoqHRUSGZDCzy2jt8MItt6BhivcR8-a1xyKCJLFAxsXDwojKpq8NqqLIAaUkCQ9Nqx8U5OOEurgD0AfnHgEjgomegbPyZWdAgngFEoWYxRASS6vKASc5wO4SQhAA)
+```tsx
+const { error } = useQuery({ queryKey: ['groups'], queryFn: fetchGroups })
+//      ^? const error: Ref<unknown>
 
-[//]: # 'Playground5'
-[//]: # 'Playground6'
+if (error.value instanceof Error) {
+  error.value
+  //     ^? const error: Error
+}
+```
 
-[typescript playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgVwM4FMCKz1QJ5wC+cAZlBCHAOQACMAhgHaoMDGA1gPQBuOAtAEcc+KgFgAUKEiw49AB7AIqUuUpV5i1GPESYeMOjgBxcsjBwAvIjjAAJgC44jZCABGuIhImsIzeCXQYVgALEwgzZSsACgBKRwAFVWAMAB4wswBtAF0APks8jSUAOgBzQKiqThLTMC0Yophg9EYoqHRUSGZDCzy2jt8MItt6BhivcR8-a1xyKCJLFAxsXDw0muyAGjgAUShZnKiMqmrw2qosrYCg0JrUMfFOTjhnl4A9AH4JIA)
+[typescript playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgVwM4FMCKz1QJ5wC+cAZlBCHAOQACMAhgHaoMDGA1gPQBuOAtAEcc+KgFgAUKEiw49AB7AIqUuUpV5i1GPESYeMOjgBxcsjBwAvIjjAAJgC44jZCABGuIhImsIzeCXQYVgALEwgzZSsACgBKRwAFVWAMAB4wswBtAF0APks8jSUAOgBzQKiqThLTMC0Yophg9EYoqHRUSGZDCzy2jt8MItt6BhivcR8-a1xyKCJLFAxsXDwopCEVgGl0PEcMqmrw2qosgBo4DfwAMUZHAKDQmuVCMfFOTjhPr4A9AH44SYsOAzaCOABK6BIKWQjHYjAgAHdGDlxsASHAoiCoEVuPQADY4Gx+JisdAQdEAUSgsxiiAknyxOPxOHpcHeX0+fwBA3gWMcVNmEkIQA)
 
-[//]: # 'Playground6'
+[//]: # 'TypingError'
+[//]: # 'TypingError2'
+[//]: # 'TypingError2'
 [//]: # 'Materials'
 [//]: # 'Materials'