types(vue-query): add shallow support to QueryClientConfig (#8692)

Co-authored-by: Damian Osipiuk <[email protected]>

Author: Mini-ghost

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>]