[pull] main from TanStack:main

docs/framework/react/guides/migrating-to-v5.md

@@ -9,7 +9,7 @@ v5 is a major version, so there are some breaking changes to be aware of:
 
 ### Supports a single signature, one object
 
-useQuery and friends used to have many overloads in TypeScript - different ways how the function can be invoked. Not only this was tough to maintain, type wise, it also required a runtime check to see which type the first and the second parameter, to correctly create options.
+useQuery and friends used to have many overloads in TypeScript: different ways how the function could be invoked. Not only was this tough to maintain, type wise, it also required a runtime check to see which types the first and the second parameter were, to correctly create options.
 
 now we only support the object format.
 

docs/framework/react/plugins/createPersister.md

@@ -39,6 +39,7 @@ bun add @tanstack/query-persist-client-core
 - Pass that `persister` as an option to your Query. This can be done either by passing it to the `defaultOptions` of the `QueryClient` or to any `useQuery` hook instance.
   - If you pass this `persister` as `defaultOptions`, all queries will be persisted to the provided `storage`. You can additionally narrow this down by passing `filters`. In contrast to the `persistClient` plugin, this will not persist the whole query client as a single item, but each query separately. As a key, the query hash is used.
   - If you provide this `persister` to a single `useQuery` hook, only this Query will be persisted.
+- Note: `queryClient.setQueryData()` operations are not persisted, this means that if you perform an optimistic update and refresh the page before the query has been invalidated, your changes to the query data will be lost. See https://github.com/TanStack/query/issues/6310
 
 This way, you do not need to store whole `QueryClient`, but choose what is worth to be persisted in your application. Each query is lazily restored (when the Query is first used) and persisted (after each run of the `queryFn`), so it does not need to be throttled. `staleTime` is also respected after restoring the Query, so if data is considered `stale`, it will be refetched immediately after restoring. If data is `fresh`, the `queryFn` will not run.
 

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

@@ -18,15 +18,16 @@ const { isLoading, isError, data, error, refetch, isFetching } = useQuery({
 </script>
 
 <template>
-  <button @click="refetch">Fetch Todos</button>
-  <span v-if="isIdle">Not ready...</span>
-  <span v-else-if="isError">Error: {{ error.message }}</span>
+  <button @click="refetch()">Fetch Todos</button>
+  <span v-if="isLoading">Loading...</span>
+  <span v-else-if="isError">Error: {{ error?.message }}</span>
   <div v-else-if="data">
     <span v-if="isFetching">Fetching...</span>
     <ul>
       <li v-for="todo in data" :key="todo.id">{{ todo.title }}</li>
     </ul>
   </div>
+  <span v-else>Not ready...</span>
 </template>
 ```
 

packages/vue-query/src/queryClient.ts

@@ -3,6 +3,9 @@ import { QueryClient as QC } from '@tanstack/query-core'
 import { cloneDeepUnref } from './utils'
 import { QueryCache } from './queryCache'
 import { MutationCache } from './mutationCache'
+import type { UseQueryOptions } from './useQuery'
+import type { Ref } from 'vue-demi'
+import type { MaybeRefDeep, NoUnknown, QueryClientConfig } from './types'
 import type {
   CancelOptions,
   DefaultError,
@@ -20,7 +23,6 @@ import type {
   MutationObserverOptions,
   NoInfer,
   OmitKeyof,
-  QueryClientConfig,
   QueryFilters,
   QueryKey,
   QueryObserverOptions,
@@ -31,9 +33,6 @@ import type {
   SetDataOptions,
   Updater,
 } from '@tanstack/query-core'
-import type { UseQueryOptions } from './useQuery'
-import type { Ref } from 'vue-demi'
-import type { MaybeRefDeep, NoUnknown } from './types'
 
 export class QueryClient extends QC {
   constructor(config: QueryClientConfig = {}) {

packages/vue-query/src/types.ts

@@ -1,3 +1,13 @@
+import type {
+  DefaultError,
+  DehydrateOptions,
+  HydrateOptions,
+  MutationCache,
+  MutationObserverOptions,
+  OmitKeyof,
+  QueryCache,
+  QueryObserverOptions,
+} from '@tanstack/query-core'
 import type { ComputedRef, Ref, UnwrapRef } from 'vue-demi'
 
 type Primitive = string | number | boolean | bigint | symbol | undefined | null
@@ -48,3 +58,29 @@ export type DeepUnwrapRef<T> = T extends UnwrapLeaf
 export type DistributiveOmit<T, TKeyOfAny extends keyof any> = T extends any
   ? Omit<T, TKeyOfAny>
   : never
+
+export interface DefaultOptions<TError = DefaultError> {
+  queries?: OmitKeyof<
+    QueryObserverOptions<unknown, TError>,
+    'queryKey' | 'queryFn'
+  > & {
+    /**
+     * Return data in a shallow ref object (it is `false` by default). It can be set to `true` to return data in a shallow ref object, which can improve performance if your data does not need to be deeply reactive.
+     */
+    shallow?: boolean
+  }
+  mutations?: MutationObserverOptions<unknown, TError, unknown, unknown> & {
+    /**
+     * Return data in a shallow ref object (it is `false` by default). It can be set to `true` to return data in a shallow ref object, which can improve performance if your data does not need to be deeply reactive.
+     */
+    shallow?: boolean
+  }
+  hydrate?: HydrateOptions['defaultOptions']
+  dehydrate?: DehydrateOptions
+}
+
+export interface QueryClientConfig {
+  queryCache?: QueryCache
+  mutationCache?: MutationCache
+  defaultOptions?: DefaultOptions
+}

packages/vue-query/src/useMutation.ts

@@ -29,6 +29,9 @@ type MutationResult<TData, TError, TVariables, TContext> = DistributiveOmit<
 
 type UseMutationOptionsBase<TData, TError, TVariables, TContext> =
   MutationObserverOptions<TData, TError, TVariables, TContext> & {
+    /**
+     * Return data in a shallow ref object (it is `false` by default). It can be set to `true` to return data in a shallow ref object, which can improve performance if your data does not need to be deeply reactive.
+     */
     shallow?: boolean
   }
 

packages/vue-query/src/useQuery.ts

@@ -51,6 +51,9 @@ export type UseQueryOptions<
           >[Property]
         >
   } & {
+    /**
+     * Return data in a shallow ref object (it is `false` by default). It can be set to `true` to return data in a shallow ref object, which can improve performance if your data does not need to be deeply reactive.
+     */
     shallow?: boolean
   }
 >

packages/vue-query/src/vueQueryPlugin.ts

@@ -4,7 +4,7 @@ import { isServer } from '@tanstack/query-core'
 import { QueryClient } from './queryClient'
 import { getClientKey } from './utils'
 import { setupDevtools } from './devtools/devtools'
-import type { QueryClientConfig } from '@tanstack/query-core'
+import type { QueryClientConfig } from './types'
 
 type ClientPersister = (client: QueryClient) => [() => void, Promise<void>]