docs(vue-query): migrate vue-query docs (TanStack#4710)

* docs: vue guides

* docs: vue query docs part 2

* docs: vue-query docs part 3

* docs: vue-query docs part 4

* docs: vue-query api reference

* docs: vue-query examples

* docs: fix TanStack casing

Author: DamianOsipiuk

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -98,9 +98,9 @@ body:
   - type: input
     id: rq-version
     attributes:
-      label: Tanstack Query version
+      label: TanStack Query version
       description: |
-        Please let us know the exact version of Tanstack Query you were using when the issue occurred. Please don't just put in "latest", as this is subject to change.
+        Please let us know the exact version of TanStack Query you were using when the issue occurred. Please don't just put in "latest", as this is subject to change.
       placeholder: |
         e.g. v3.30.1
     validations:

docs/config.json

@@ -432,6 +432,250 @@
             {
               "label": "Quick Start",
               "to": "vue/quick-start"
+            },
+            {
+              "label": "Devtools",
+              "to": "vue/devtools"
+            },
+            {
+              "label": "TypeScript",
+              "to": "vue/typescript"
+            },
+            {
+              "label": "GraphQL",
+              "to": "vue/graphql"
+            }
+          ]
+        },
+        {
+          "label": "Guides & Concepts",
+          "children": [
+            {
+              "label": "Important Defaults",
+              "to": "vue/guides/important-defaults"
+            },
+            {
+              "label": "Queries",
+              "to": "vue/guides/queries"
+            },
+            {
+              "label": "Query Keys",
+              "to": "vue/guides/query-keys"
+            },
+            {
+              "label": "Query Functions",
+              "to": "vue/guides/query-functions"
+            },
+            {
+              "label": "Network Mode",
+              "to": "vue/guides/network-mode"
+            },
+            {
+              "label": "Parallel Queries",
+              "to": "vue/guides/parallel-queries"
+            },
+            {
+              "label": "Dependent Queries",
+              "to": "vue/guides/dependent-queries"
+            },
+            {
+              "label": "Background Fetching Indicators",
+              "to": "vue/guides/background-fetching-indicators"
+            },
+            {
+              "label": "Window Focus Refetching",
+              "to": "vue/guides/window-focus-refetching"
+            },
+            {
+              "label": "Disabling/Pausing Queries",
+              "to": "vue/guides/disabling-queries"
+            },
+            {
+              "label": "Query Retries",
+              "to": "vue/guides/query-retries"
+            },
+            {
+              "label": "Paginated Queries",
+              "to": "vue/guides/paginated-queries"
+            },
+            {
+              "label": "Infinite Queries",
+              "to": "vue/guides/infinite-queries"
+            },
+            {
+              "label": "Initial Query Data",
+              "to": "vue/guides/initial-query-data"
+            },
+            {
+              "label": "Placeholder Query Data",
+              "to": "vue/guides/placeholder-query-data"
+            },
+            {
+              "label": "Prefetching",
+              "to": "vue/guides/prefetching"
+            },
+            {
+              "label": "Mutations",
+              "to": "vue/guides/mutations"
+            },
+            {
+              "label": "Query Invalidation",
+              "to": "vue/guides/query-invalidation"
+            },
+            {
+              "label": "Invalidation from Mutations",
+              "to": "vue/guides/invalidations-from-mutations"
+            },
+            {
+              "label": "Updates from Mutation",
+              "to": "vue/guides/updates-from-mutation-responses"
+            },
+            {
+              "label": "Optimistic Updates",
+              "to": "vue/guides/optimistic-updates"
+            },
+            {
+              "label": "Query Cancellation",
+              "to": "vue/guides/query-cancellation"
+            },
+            {
+              "label": "Scroll Restoration",
+              "to": "vue/guides/scroll-restoration"
+            },
+            {
+              "label": "Filters",
+              "to": "vue/guides/filters"
+            },
+            {
+              "label": "SSR & Nuxt",
+              "to": "vue/guides/ssr"
+            },
+            {
+              "label": "Caching",
+              "to": "vue/guides/caching"
+            },
+            {
+              "label": "Default Query Fn",
+              "to": "vue/guides/default-query-function"
+            },
+            {
+              "label": "Suspense",
+              "to": "vue/guides/suspense"
+            },
+            {
+              "label": "Custom Logger",
+              "to": "vue/guides/custom-logger"
+            },
+            {
+              "label": "Testing",
+              "to": "vue/guides/testing"
+            },
+            {
+              "label": "Does this replace [Vuex, Pinia]?",
+              "to": "vue/guides/does-this-replace-client-state"
+            }
+          ]
+        },
+        {
+          "label": "Community Resources",
+          "children": [
+            {
+              "label": "TkDodo's Blog",
+              "to": "vue/community/tkdodos-blog"
+            },
+            {
+              "label": "Query Key Factory",
+              "to": "vue/community/lukemorales-query-key-factory"
+            }
+          ]
+        },
+        {
+          "label": "Examples",
+          "children": [
+            {
+              "label": "Basic",
+              "to": "vue/examples/vue/basic"
+            },
+            {
+              "label": "Vue 2.6",
+              "to": "vue/examples/vue/2.6-basic"
+            },
+            {
+              "label": "Nuxt 3",
+              "to": "vue/examples/vue/nuxt3"
+            },
+            {
+              "label": "Persister",
+              "to": "vue/examples/vue/persister"
+            }
+          ]
+        },
+        {
+          "label": "API Reference",
+          "children": [
+            {
+              "label": "useQuery",
+              "to": "vue/reference/useQuery"
+            },
+            {
+              "label": "useQueries",
+              "to": "vue/reference/useQueries"
+            },
+            {
+              "label": "useInfiniteQuery",
+              "to": "vue/reference/useInfiniteQuery"
+            },
+            {
+              "label": "useMutation",
+              "to": "vue/reference/useMutation"
+            },
+            {
+              "label": "useIsFetching",
+              "to": "vue/reference/useIsFetching"
+            },
+            {
+              "label": "useIsMutating",
+              "to": "vue/reference/useIsMutating"
+            },
+            {
+              "label": "useQueryClient",
+              "to": "vue/reference/useQueryClient"
+            },
+            {
+              "label": "QueryClient",
+              "to": "vue/reference/QueryClient"
+            },
+            {
+              "label": "QueryCache",
+              "to": "vue/reference/QueryCache"
+            },
+            {
+              "label": "MutationCache",
+              "to": "vue/reference/MutationCache"
+            },
+            {
+              "label": "QueryObserver",
+              "to": "vue/reference/QueryObserver"
+            },
+            {
+              "label": "InfiniteQueryObserver",
+              "to": "vue/reference/InfiniteQueryObserver"
+            },
+            {
+              "label": "QueriesObserver",
+              "to": "vue/reference/QueriesObserver"
+            },
+            {
+              "label": "focusManager",
+              "to": "vue/reference/focusManager"
+            },
+            {
+              "label": "onlineManager",
+              "to": "vue/reference/onlineManager"
+            },
+            {
+              "label": "hydration",
+              "to": "vue/reference/hydration"
             }
           ]
         }

docs/react/community/liaoliao666-react-query-kit.md

@@ -30,7 +30,7 @@ $ yarn add react-query-kit
 
 [CodeSandbox](https://codesandbox.io/s/example-react-query-kit-nextjs-uldl88)
 
-```ts
+```tsx
 import { QueryClient, dehydrate } from '@tanstack/react-query'
 import { createQuery } from 'react-query-kit'
 

docs/react/community/lukemorales-query-key-factory.md

@@ -22,7 +22,7 @@ $ yarn add @lukemorales/query-key-factory
 Start by defining the query keys for your app:
 
 ### Declare everything in a single file
-```ts
+```tsx
 import { createQueryKeyStore } from '@lukemorales/query-key-factory'
 
 export const queryKeys = createQueryKeyStore({
@@ -36,7 +36,7 @@ export const queryKeys = createQueryKeyStore({
 ```
 
 ### Fine-grained declaration by features
-```ts
+```tsx
 import { createQueryKeys, mergeQueryKeys } from '@lukemorales/query-key-factory'
 
 // my-api/users.ts

docs/react/eslint/exhaustive-deps.md

@@ -10,7 +10,7 @@ This makes sure that queries are cached independently and that queries are refet
 
 Examples of **incorrect** code for this rule:
 
-```ts
+```tsx
 /* eslint "@tanstack/query/exhaustive-deps": "error" */
 
 useQuery({
@@ -26,7 +26,7 @@ const todoQueries = {
 
 Examples of **correct** code for this rule:
 
-```ts
+```tsx
 useQuery({
     queryKey: ["todo", todoId],
     queryFn: () => api.getTodo(todoId)

docs/react/eslint/prefer-query-object-syntax.md

@@ -7,7 +7,7 @@ You can use [`useQuery`](https://tanstack.com/query/v4/docs/reference/useQuery)
 
 Standard
 
-```ts
+```tsx
 useQuery(queryKey, queryFn?, options?)
 
 // or

docs/react/graphql.md

@@ -7,16 +7,17 @@ Because React Query's fetching mechanisms are agnostically built on Promises, yo
 
 > Keep in mind that React Query does not support normalized caching. While a vast majority of users do not actually need a normalized cache or even benefit from it as much as they believe they do, there may be very rare circumstances that may warrant it so be sure to check with us first to make sure it's truly something you need!
 
-## Type-Safety and Code Generation
+[//]: # 'Codegen'
 
+## Type-Safety and Code Generation
 
 React Query, used in combination with `graphql-request^5` and [GraphQL Code Generator](https://graphql-code-generator.com/) provides full-typed GraphQL operations:
 
 ```tsx
-import request from 'graphql-request';
-import { useQuery } from '@tanstack/react-query';
+import request from 'graphql-request'
+import { useQuery } from '@tanstack/react-query'
 
-import { graphql } from './gql/gql';
+import { graphql } from './gql/gql'
 
 const allFilmsWithVariablesQueryDocument = graphql(/* GraphQL */ `
   query allFilmsWithVariablesQuery($first: Int!) {
@@ -29,7 +30,7 @@ const allFilmsWithVariablesQueryDocument = graphql(/* GraphQL */ `
       }
     }
   }
-`);
+`)
 
 function App() {
   // `data` is fully typed!
@@ -40,13 +41,14 @@ function App() {
         'https://swapi-graphql.netlify.app/.netlify/functions/index',
         allFilmsWithVariablesQueryDocument,
         // variables are type-checked too!
-        {first: 10}
+        { first: 10 },
       ),
   })
   // ...
 }
 ```
-_You can find a [complete example in the repo](https://github.com/dotansimha/graphql-code-generator/tree/7c25c4eeb77f88677fd79da557b7b5326e3f3950/examples/front-end/react/tanstack-react-query)_
 
+_You can find a [complete example in the repo](https://github.com/dotansimha/graphql-code-generator/tree/7c25c4eeb77f88677fd79da557b7b5326e3f3950/examples/front-end/react/tanstack-react-query)_
 
 Get started with the [dedicated guide on GraphQL Code Generator documentation](https://www.the-guild.dev/graphql/codegen/docs/guides/react-vue).
+[//]: # (Codegen)