docs(vue-query): add missing links and pages (#7414)

docs/config.json

@@ -325,6 +325,10 @@
               "label": "Query Functions",
               "to": "framework/vue/guides/query-functions"
             },
+            {
+              "label": "Query Options",
+              "to": "framework/vue/guides/query-options"
+            },
             {
               "label": "Network Mode",
               "to": "framework/vue/guides/network-mode"
@@ -369,10 +373,6 @@
               "label": "Placeholder Query Data",
               "to": "framework/vue/guides/placeholder-query-data"
             },
-            {
-              "label": "Prefetching",
-              "to": "framework/vue/guides/prefetching"
-            },
             {
               "label": "Mutations",
               "to": "framework/vue/guides/mutations"
@@ -386,7 +386,7 @@
               "to": "framework/vue/guides/invalidations-from-mutations"
             },
             {
-              "label": "Updates from Mutation",
+              "label": "Updates from Mutation Responses",
               "to": "framework/vue/guides/updates-from-mutation-responses"
             },
             {
@@ -405,6 +405,10 @@
               "label": "Filters",
               "to": "framework/vue/guides/filters"
             },
+            {
+              "label": "Prefetching",
+              "to": "framework/vue/guides/prefetching"
+            },
             {
               "label": "SSR & Nuxt",
               "to": "framework/vue/guides/ssr"
@@ -691,10 +695,22 @@
               "label": "useIsMutating",
               "to": "framework/vue/reference/useIsMutating"
             },
+            {
+              "label": "useMutationState",
+              "to": "framework/vue/reference/useMutationState"
+            },
             {
               "label": "useQueryClient",
               "to": "framework/vue/reference/useQueryClient"
             },
+            {
+              "label": "queryOptions",
+              "to": "framework/vue/reference/queryOptions"
+            },
+            {
+              "label": "infiniteQueryOptions",
+              "to": "framework/vue/reference/infiniteQueryOptions"
+            },
             {
               "label": "hydration",
               "to": "framework/vue/reference/hydration"
@@ -758,8 +774,8 @@
               "to": "framework/vue/community/tkdodos-blog"
             },
             {
-              "label": "Query Key Factory",
-              "to": "framework/vue/community/lukemorales-query-key-factory"
+              "label": "Community Projects",
+              "to": "framework/vue/community/community-projects"
             }
           ]
         }
@@ -1000,6 +1016,19 @@
               "to": "framework/react/plugins/createPersister"
             }
           ]
+        },
+        {
+          "label": "vue",
+          "children": [
+            {
+              "label": "broadcastQueryClient (Experimental)",
+              "to": "framework/vue/plugins/broadcastQueryClient"
+            },
+            {
+              "label": "createPersister (Experimental)",
+              "to": "framework/vue/plugins/createPersister"
+            }
+          ]
         }
       ]
     }

docs/framework/react/guides/mutations.md

@@ -388,8 +388,6 @@ export default function App() {
 
 We also have an extensive [offline example](../../examples/offline) that covers both queries and mutations.
 
-[//]: # 'Materials'
-
 ## Mutation Scopes
 
 Per default, all mutations run in parallel - even if you invoke `.mutate()` of the same mutation multiple times. Mutations can be given a `scope` with an `id` to avoid that. All mutations with the same `scope.id` will run in serial, which means when they are triggered, they will start in `isPaused: true` state if there is already a mutation for that scope in progress. They will be put into a queue and will automatically resume once their time in the queue has come.
@@ -406,6 +404,7 @@ const mutation = useMutation({
 ```
 
 [//]: # 'ExampleScopes'
+[//]: # 'Materials'
 
 ## Further reading
 

docs/framework/react/guides/query-options.md

@@ -3,7 +3,7 @@ id: query-options
 title: Query Options
 ---
 
-One of the best ways to share `queryKey` and `queryFn` between multiple places, yet keep them co-located to one another, is to use the `queryOptions` helper. At runtime, this helper just returns whatever you pass into it, but it has a lot of advantages when using it [with TypeScript](../../../react/typescript#typing-query-options). You can define all possible options for a query in one place, and you'll also get type inference and type safety for all of them.
+One of the best ways to share `queryKey` and `queryFn` between multiple places, yet keep them co-located to one another, is to use the `queryOptions` helper. At runtime, this helper just returns whatever you pass into it, but it has a lot of advantages when using it [with TypeScript](../typescript#typing-query-options). You can define all possible options for a query in one place, and you'll also get type inference and type safety for all of them.
 
 [//]: # 'Example1'
 

docs/framework/react/typescript.md

@@ -86,7 +86,6 @@ if (isSuccess) {
 
 The type for error defaults to `Error`, because that is what most users expect.
 
-[//]: # 'TypingError'
 [//]: # 'TypingError'
 
 ```tsx
@@ -153,8 +152,6 @@ const { error } = useQuery({ queryKey: ['groups'], queryFn: fetchGroups })
 
 ## Typing meta
 
-[//]: # 'RegisterMetaType'
-
 ### Registering global Meta
 
 Similarly to registering a [global error type](#registering-a-global-error) you can also register a global `Meta` type. This ensures the optional `meta` field on [queries](../reference/useQuery) and [mutations](../reference/useMutation) stays consistent and is type-safe. Note that the registered type must extend `Record<string, unknown>` so that `meta` remains an object.
@@ -174,7 +171,6 @@ declare module '@tanstack/react-query' {
 }
 ```
 
-[//]: # 'RegisterMetaType'
 [//]: # 'TypingMeta'
 [//]: # 'TypingQueryOptions'
 

docs/framework/vue/community/community-projects.md

@@ -1,5 +1,14 @@
 ---
 id: community-projects
 title: Community Projects
-ref: docs/framework/react/community/community-projects.md
 ---
+
+There are lots of community projects that build on top of Vue Query and use it to provide additional functionality or enhanced developer experience. Projects are listed in alphabetical order. If you have a project that you would like to add to this list, please open a PR!
+
+> Please note that these projects are entirely community maintained. If you have questions about these projects, please reach out to the project maintainers.
+
+## Query Key factory
+
+A library for creating typesafe standardized query keys, useful for cache management in `@tanstack/query`
+
+Link: https://github.com/lukemorales/query-key-factory

docs/framework/vue/guides/disabling-queries.md

@@ -60,11 +60,13 @@ const { data } = useQuery({
 import { useQuery, skipToken } from '@tanstack/vue-query'
 
 const filter = ref('')
-const isEnabled = computed(() => !!filter.value)
+const queryFn = computed(() =>
+  !!filter.value ? () => fetchTodos(filter) : skipToken,
+)
 const { data } = useQuery({
   queryKey: ['todos', filter],
   // ⬇️ disabled as long as the filter is undefined or empty
-  queryFn: filter ? () => fetchTodos(filter) : skipToken,
+  queryFn: queryFn,
 })
 </script>
 

docs/framework/vue/guides/optimistic-updates.md

@@ -2,102 +2,5 @@
 id: optimistic-updates
 title: Optimistic Updates
 ref: docs/framework/react/guides/optimistic-updates.md
+replace: { 'React': 'Vue' }
 ---
-
-When you optimistically update your state before performing a mutation, there is a chance that the mutation will fail. In most of these failure cases, you can just trigger a refetch for your optimistic queries to revert them to their true server state. In some circumstances though, refetching may not work correctly and the mutation error could represent some type of server issue that won't make it possible to refetch. In this event, you can instead choose to rollback your update.
-
-To do this, `useMutation`'s `onMutate` handler option allows you to return a value that will later be passed to both `onError` and `onSettled` handlers as the last argument. In most cases, it is most useful to pass a rollback function.
-
-## Updating a list of todos when adding a new todo
-
-[//]: # 'Example'
-
-```tsx
-const queryClient = useQueryClient()
-
-useMutation({
-  mutationFn: updateTodo,
-  // When mutate is called:
-  onMutate: async (newTodo) => {
-    // Cancel any outgoing refetches
-    // (so they don't overwrite our optimistic update)
-    await queryClient.cancelQueries({ queryKey: ['todos'] })
-
-    // Snapshot the previous value
-    const previousTodos = queryClient.getQueryData(['todos'])
-
-    // Optimistically update to the new value
-    queryClient.setQueryData(['todos'], (old) => [...old, newTodo])
-
-    // Return a context object with the snapshotted value
-    return { previousTodos }
-  },
-  // If the mutation fails,
-  // use the context returned from onMutate to roll back
-  onError: (err, newTodo, context) => {
-    queryClient.setQueryData(['todos'], context.previousTodos)
-  },
-  // Always refetch after error or success:
-  onSettled: () => {
-    queryClient.invalidateQueries({ queryKey: ['todos'] })
-  },
-})
-```
-
-[//]: # 'Example'
-
-## Updating a single todo
-
-[//]: # 'Example2'
-
-```tsx
-useMutation({
-  mutationFn: updateTodo,
-  // When mutate is called:
-  onMutate: async (newTodo) => {
-    // Cancel any outgoing refetches
-    // (so they don't overwrite our optimistic update)
-    await queryClient.cancelQueries({ queryKey: ['todos', newTodo.id] })
-
-    // Snapshot the previous value
-    const previousTodo = queryClient.getQueryData(['todos', newTodo.id])
-
-    // Optimistically update to the new value
-    queryClient.setQueryData(['todos', newTodo.id], newTodo)
-
-    // Return a context with the previous and new todo
-    return { previousTodo, newTodo }
-  },
-  // If the mutation fails, use the context we returned above
-  onError: (err, newTodo, context) => {
-    queryClient.setQueryData(
-      ['todos', context.newTodo.id],
-      context.previousTodo,
-    )
-  },
-  // Always refetch after error or success:
-  onSettled: (newTodo) => {
-    queryClient.invalidateQueries({ queryKey: ['todos', newTodo.id] })
-  },
-})
-```
-
-[//]: # 'Example2'
-
-You can also use the `onSettled` function in place of the separate `onError` and `onSuccess` handlers if you wish:
-
-[//]: # 'Example3'
-
-```tsx
-useMutation({
-  mutationFn: updateTodo,
-  // ...
-  onSettled: (newTodo, error, variables, context) => {
-    if (error) {
-      // do something
-    }
-  },
-})
-```
-
-[//]: # 'Example3'

docs/framework/vue/guides/query-options.md

@@ -2,4 +2,5 @@
 id: query-options
 title: Query Options
 ref: docs/framework/react/guides/query-options.md
+replace: { '@tanstack/react-query': '@tanstack/vue-query' }
 ---

docs/framework/vue/installation.md

@@ -5,8 +5,6 @@ title: Installation
 
 You can install Vue Query via [NPM](https://npmjs.com).
 
-> v5 is currently available as a release-candidate. We don't anticipate any major API changes from here on out. We encourage you to try it out and report any issues you find.
-
 ### NPM
 
 ```bash

docs/framework/vue/plugins/broadcastQueryClient.md

@@ -0,0 +1,6 @@
+---
+id: broadcastQueryClient
+title: broadcastQueryClient (Experimental)
+ref: docs/framework/react/plugins/broadcastQueryClient.md
+replace: { 'react-query': 'vue-query' }
+---