@tanstack/vue-query 5.0.0-beta.9 → 5.0.0-rc.11

package/src/devtools/devtools.ts

@@ -146,7 +146,7 @@ export function setupDevtools(app: any, queryClient: QueryClient) {
         api.sendInspectorTree(pluginId)
         api.sendInspectorState(pluginId)
 
-        const queryEvents: QueryCacheNotifyEvent['type'][] = [
+        const queryEvents: Array<QueryCacheNotifyEvent['type']> = [
           'added',
           'removed',
           'updated',
@@ -189,7 +189,7 @@ export function setupDevtools(app: any, queryClient: QueryClient) {
             (a, b) => sortFns[settings.sortFn]!(a, b) * settings.baseSort,
           )
 
-          const nodes: CustomInspectorNode[] = sorted.map((query) => {
+          const nodes: Array<CustomInspectorNode> = sorted.map((query) => {
             const stateLabel = getQueryStateLabel(query)
 
             return {

package/src/mutationCache.ts

@@ -19,7 +19,7 @@ export class MutationCache extends MC {
     return super.find(cloneDeepUnref(filters))
   }
 
-  findAll(filters: MaybeRefDeep<MutationFilters> = {}): Mutation[] {
+  findAll(filters: MaybeRefDeep<MutationFilters> = {}): Array<Mutation> {
     return super.findAll(cloneDeepUnref(filters))
   }
 }

package/src/queryCache.ts

@@ -15,7 +15,7 @@ export class QueryCache extends QC {
     return super.find(cloneDeepUnref(filters))
   }
 
-  findAll(filters: MaybeRefDeep<QueryFilters> = {}): Query[] {
+  findAll(filters: MaybeRefDeep<QueryFilters> = {}): Array<Query> {
     return super.findAll(cloneDeepUnref(filters))
   }
 }

package/src/queryClient.ts

@@ -29,12 +29,11 @@ import type {
 } from '@tanstack/query-core'
 
 export class QueryClient extends QC {
-  constructor(config: MaybeRefDeep<QueryClientConfig> = {}) {
-    const unreffedConfig = cloneDeepUnref(config)
-    const vueQueryConfig: QueryClientConfig = {
-      defaultOptions: unreffedConfig.defaultOptions,
-      queryCache: unreffedConfig.queryCache || new QueryCache(),
-      mutationCache: unreffedConfig.mutationCache || new MutationCache(),
+  constructor(config: QueryClientConfig = {}) {
+    const vueQueryConfig = {
+      defaultOptions: config.defaultOptions,
+      queryCache: config.queryCache || new QueryCache(),
+      mutationCache: config.mutationCache || new MutationCache(),
     }
     super(vueQueryConfig)
   }
@@ -57,7 +56,7 @@ export class QueryClient extends QC {
 
   getQueriesData<TData = unknown>(
     filters: MaybeRefDeep<QueryFilters>,
-  ): [QueryKey, TData | undefined][] {
+  ): Array<[QueryKey, TData | undefined]> {
     return super.getQueriesData(cloneDeepUnref(filters))
   }
 
@@ -77,7 +76,7 @@ export class QueryClient extends QC {
     filters: MaybeRefDeep<QueryFilters>,
     updater: Updater<TData | undefined, TData | undefined>,
     options: MaybeRefDeep<SetDataOptions> = {},
-  ): [QueryKey, TData | undefined][] {
+  ): Array<[QueryKey, TData | undefined]> {
     return super.setQueriesData(
       cloneDeepUnref(filters),
       updater,
@@ -134,17 +133,25 @@ export class QueryClient extends QC {
     TError = DefaultError,
     TData = TQueryFnData,
     TQueryKey extends QueryKey = QueryKey,
+    TPageParam = never,
   >(
-    options: FetchQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
+    options: FetchQueryOptions<
+      TQueryFnData,
+      TError,
+      TData,
+      TQueryKey,
+      TPageParam
+    >,
   ): Promise<TData>
   fetchQuery<
     TQueryFnData,
     TError = DefaultError,
     TData = TQueryFnData,
     TQueryKey extends QueryKey = QueryKey,
+    TPageParam = never,
   >(
     options: MaybeRefDeep<
-      FetchQueryOptions<TQueryFnData, TError, TData, TQueryKey>
+      FetchQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>
     >,
   ): Promise<TData> {
     return super.fetchQuery(cloneDeepUnref(options))

package/src/types.ts

@@ -1,7 +1,21 @@
-import type { Ref } from 'vue-demi'
+import type { Ref, UnwrapRef } from 'vue-demi'
+
+type Primitive = string | number | boolean | bigint | symbol | undefined | null
+type UnwrapLeaf =
+  | Primitive
+  | Function
+  | Date
+  | Error
+  | RegExp
+  | Map<any, any>
+  | WeakMap<any, any>
+  | Set<any>
+  | WeakSet<any>
 
 export type MaybeRef<T> = Ref<T> | T
 
+export type MaybeRefOrGetter<T> = MaybeRef<T> | (() => T)
+
 export type MaybeRefDeep<T> = MaybeRef<
   T extends Function
     ? T
@@ -12,6 +26,16 @@ export type MaybeRefDeep<T> = MaybeRef<
     : T
 >
 
+export type DeepUnwrapRef<T> = T extends UnwrapLeaf
+  ? T
+  : T extends Ref<infer U>
+  ? DeepUnwrapRef<U>
+  : T extends {}
+  ? {
+      [Property in keyof T]: DeepUnwrapRef<T[Property]>
+    }
+  : UnwrapRef<T>
+
 export type DistributiveOmit<T, K extends keyof any> = T extends any
   ? Omit<T, K>
   : never

package/src/useBaseQuery.ts

@@ -1,5 +1,6 @@
 import {
   computed,
+  getCurrentScope,
   onScopeDispose,
   reactive,
   readonly,
@@ -7,8 +8,8 @@ import {
   watch,
 } from 'vue-demi'
 import { useQueryClient } from './useQueryClient'
-import { cloneDeepUnref, updateState } from './utils'
-import type { ToRefs } from 'vue-demi'
+import { cloneDeepUnref, shouldThrowError, updateState } from './utils'
+import type { ToRef } from 'vue-demi'
 import type {
   DefaultedQueryObserverOptions,
   QueryKey,
@@ -16,14 +17,22 @@ import type {
   QueryObserverResult,
 } from '@tanstack/query-core'
 import type { QueryClient } from './queryClient'
-import type { UseQueryOptions } from './useQuery'
+import type { UseQueryOptions, UseQueryReturnType } from './useQuery'
 import type { UseInfiniteQueryOptions } from './useInfiniteQuery'
 
 export type UseBaseQueryReturnType<
   TData,
   TError,
   Result = QueryObserverResult<TData, TError>,
-> = ToRefs<Readonly<Result>> & {
+> = {
+  [K in keyof Result]: K extends
+    | 'fetchNextPage'
+    | 'fetchPreviousPage'
+    | 'refetch'
+    | 'remove'
+    ? Result[K]
+    : ToRef<Readonly<Result>[K]>
+} & {
   suspense: () => Promise<Result>
 }
 
@@ -64,16 +73,30 @@ export function useBaseQuery<
   >,
   queryClient?: QueryClient,
 ): UseBaseQueryReturnType<TData, TError> {
+  if (process.env.NODE_ENV === 'development') {
+    if (!getCurrentScope()) {
+      console.warn(
+        'vue-query composables like "useQuery()" should only be used inside a "setup()" function or a running effect scope. They might otherwise lead to memory leaks.',
+      )
+    }
+  }
+
   const client = queryClient || useQueryClient()
 
   const defaultedOptions = computed(() => {
+    const clonedOptions = cloneDeepUnref(options as any)
+
+    if (typeof clonedOptions.enabled === 'function') {
+      clonedOptions.enabled = clonedOptions.enabled()
+    }
+
     const defaulted: DefaultedQueryObserverOptions<
       TQueryFnData,
       TError,
       TData,
       TQueryData,
       TQueryKey
-    > = client.defaultQueryOptions(cloneDeepUnref(options as any))
+    > = client.defaultQueryOptions(clonedOptions)
 
     defaulted._optimisticResults = client.isRestoring.value
       ? 'isRestoring'
@@ -103,49 +126,79 @@ export function useBaseQuery<
     { immediate: true },
   )
 
-  watch(
-    defaultedOptions,
-    () => {
-      observer.setOptions(defaultedOptions.value)
-      updateState(state, observer.getCurrentResult())
-    },
-    { deep: true },
-  )
+  const updater = () => {
+    observer.setOptions(defaultedOptions.value)
+    updateState(state, observer.getCurrentResult())
+  }
+
+  watch(defaultedOptions, updater)
 
   onScopeDispose(() => {
     unsubscribe()
   })
 
+  // fix #5910
+  const refetch = (...args: Parameters<(typeof state)['refetch']>) => {
+    updater()
+    return state.refetch(...args)
+  }
+
   const suspense = () => {
-    return new Promise<QueryObserverResult<TData, TError>>((resolve) => {
-      let stopWatch = () => {
-        //noop
-      }
-      const run = () => {
-        if (defaultedOptions.value.enabled !== false) {
-          const optimisticResult = observer.getOptimisticResult(
-            defaultedOptions.value,
-          )
-          if (optimisticResult.isStale) {
-            stopWatch()
-            resolve(observer.fetchOptimistic(defaultedOptions.value))
-          } else {
-            stopWatch()
-            resolve(optimisticResult)
+    return new Promise<QueryObserverResult<TData, TError>>(
+      (resolve, reject) => {
+        let stopWatch = () => {
+          //noop
+        }
+        const run = () => {
+          if (defaultedOptions.value.enabled !== false) {
+            const optimisticResult = observer.getOptimisticResult(
+              defaultedOptions.value,
+            )
+            if (optimisticResult.isStale) {
+              stopWatch()
+              observer
+                .fetchOptimistic(defaultedOptions.value)
+                .then(resolve, reject)
+            } else {
+              stopWatch()
+              resolve(optimisticResult)
+            }
           }
         }
-      }
 
-      run()
+        run()
 
-      stopWatch = watch(defaultedOptions, run, { deep: true })
-    })
+        stopWatch = watch(defaultedOptions, run)
+      },
+    )
   }
 
-  return {
-    ...(toRefs(readonly(state)) as ToRefs<
-      Readonly<QueryObserverResult<TData, TError>>
-    >),
-    suspense,
+  // Handle error boundary
+  watch(
+    () => state.error,
+    (error) => {
+      if (
+        state.isError &&
+        !state.isFetching &&
+        shouldThrowError(defaultedOptions.value.throwOnError, [
+          error as TError,
+          observer.getCurrentQuery(),
+        ])
+      ) {
+        throw error
+      }
+    },
+  )
+
+  const object: any = toRefs(readonly(state))
+  for (const key in state) {
+    if (typeof state[key as keyof typeof state] === 'function') {
+      object[key] = state[key as keyof typeof state]
+    }
   }
+
+  object.suspense = suspense
+  object.refetch = refetch
+
+  return object as UseQueryReturnType<TData, TError>
 }

package/src/useInfiniteQuery.ts

@@ -12,9 +12,13 @@ import type {
 
 import type { UseBaseQueryReturnType } from './useBaseQuery'
 
-import type { DistributiveOmit, MaybeRefDeep } from './types'
+import type {
+  DeepUnwrapRef,
+  DistributiveOmit,
+  MaybeRefDeep,
+  MaybeRefOrGetter,
+} from './types'
 import type { QueryClient } from './queryClient'
-import type { UnwrapRef } from 'vue-demi'
 
 export type UseInfiniteQueryOptions<
   TQueryFnData = unknown,
@@ -37,9 +41,19 @@ export type UseInfiniteQueryOptions<
         TError,
         TData,
         TQueryData,
-        UnwrapRef<TQueryKey>,
+        DeepUnwrapRef<TQueryKey>,
         TPageParam
       >[Property]
+    : Property extends 'enabled'
+    ? MaybeRefOrGetter<
+        InfiniteQueryObserverOptions<
+          TQueryFnData,
+          TError,
+          TData,
+          TQueryData,
+          TQueryKey
+        >[Property]
+      >
     : MaybeRefDeep<
         WithRequired<
           InfiniteQueryObserverOptions<
@@ -96,10 +110,6 @@ export function useInfiniteQuery<
     options,
     queryClient,
   ) as InfiniteQueryReturnType<TData, TError>
-  return {
-    ...result,
-    fetchNextPage: result.fetchNextPage.value,
-    fetchPreviousPage: result.fetchPreviousPage.value,
-    refetch: result.refetch.value,
-  }
+
+  return result
 }

package/src/useIsFetching.ts

@@ -1,6 +1,5 @@
-import { computed, onScopeDispose, ref, watch } from 'vue-demi'
+import { getCurrentScope, onScopeDispose, ref, watchEffect } from 'vue-demi'
 import { useQueryClient } from './useQueryClient'
-import { cloneDeepUnref } from './utils'
 import type { Ref } from 'vue-demi'
 import type { QueryFilters as QF } from '@tanstack/query-core'
 import type { MaybeRefDeep } from './types'
@@ -12,22 +11,25 @@ export function useIsFetching(
   fetchingFilters: MaybeRefDeep<QF> = {},
   queryClient?: QueryClient,
 ): Ref<number> {
-  const filters = computed(() => cloneDeepUnref(fetchingFilters))
+  if (process.env.NODE_ENV === 'development') {
+    if (!getCurrentScope()) {
+      console.warn(
+        'vue-query composables like "useQuery()" should only be used inside a "setup()" function or a running effect scope. They might otherwise lead to memory leaks.',
+      )
+    }
+  }
+
   const client = queryClient || useQueryClient()
 
-  const isFetching = ref(client.isFetching(filters))
+  const isFetching = ref()
 
-  const unsubscribe = client.getQueryCache().subscribe(() => {
-    isFetching.value = client.isFetching(filters)
-  })
+  const listener = () => {
+    isFetching.value = client.isFetching(fetchingFilters)
+  }
+
+  const unsubscribe = client.getQueryCache().subscribe(listener)
 
-  watch(
-    filters,
-    () => {
-      isFetching.value = client.isFetching(filters)
-    },
-    { deep: true },
-  )
+  watchEffect(listener)
 
   onScopeDispose(() => {
     unsubscribe()

package/src/useMutation.ts

@@ -1,5 +1,6 @@
 import {
   computed,
+  getCurrentScope,
   onScopeDispose,
   reactive,
   readonly,
@@ -7,7 +8,7 @@ import {
   watch,
 } from 'vue-demi'
 import { MutationObserver } from '@tanstack/query-core'
-import { cloneDeepUnref, updateState } from './utils'
+import { cloneDeepUnref, shouldThrowError, updateState } from './utils'
 import { useQueryClient } from './useQueryClient'
 import type { ToRefs } from 'vue-demi'
 import type {
@@ -64,6 +65,14 @@ export function useMutation<
   >,
   queryClient?: QueryClient,
 ): UseMutationReturnType<TData, TError, TVariables, TContext> {
+  if (process.env.NODE_ENV === 'development') {
+    if (!getCurrentScope()) {
+      console.warn(
+        'vue-query composables like "useQuery()" should only be used inside a "setup()" function or a running effect scope. They might otherwise lead to memory leaks.',
+      )
+    }
+  }
+
   const client = queryClient || useQueryClient()
   const options = computed(() => {
     return client.defaultMutationOptions(cloneDeepUnref(mutationOptions))
@@ -84,13 +93,9 @@ export function useMutation<
     })
   }
 
-  watch(
-    options,
-    () => {
-      observer.setOptions(options.value)
-    },
-    { deep: true },
-  )
+  watch(options, () => {
+    observer.setOptions(options.value)
+  })
 
   onScopeDispose(() => {
     unsubscribe()
@@ -100,6 +105,18 @@ export function useMutation<
     Readonly<MutationResult<TData, TError, TVariables, TContext>>
   >
 
+  watch(
+    () => state.error,
+    (error) => {
+      if (
+        error &&
+        shouldThrowError(options.value.throwOnError, [error as TError])
+      ) {
+        throw error
+      }
+    },
+  )
+
   return {
     ...resultRefs,
     mutate,

package/src/useMutationState.ts

@@ -1,4 +1,11 @@
-import { computed, onScopeDispose, readonly, ref, watch } from 'vue-demi'
+import {
+  computed,
+  getCurrentScope,
+  onScopeDispose,
+  readonly,
+  ref,
+  watch,
+} from 'vue-demi'
 import { useQueryClient } from './useQueryClient'
 import { cloneDeepUnref } from './utils'
 import type { DeepReadonly, Ref } from 'vue-demi'
@@ -18,6 +25,14 @@ export function useIsMutating(
   filters: MutationFilters = {},
   queryClient?: QueryClient,
 ): Ref<number> {
+  if (process.env.NODE_ENV === 'development') {
+    if (!getCurrentScope()) {
+      console.warn(
+        'vue-query composables like "useQuery()" should only be used inside a "setup()" function or a running effect scope. They might otherwise lead to memory leaks.',
+      )
+    }
+  }
+
   const client = queryClient || useQueryClient()
   const unreffedFilters = computed(() => ({
     ...cloneDeepUnref(filters),
@@ -59,19 +74,15 @@ export function useMutationState<TResult = MutationState>(
 ): DeepReadonly<Ref<Array<TResult>>> {
   const filters = computed(() => cloneDeepUnref(options.filters))
   const mutationCache = (queryClient || useQueryClient()).getMutationCache()
-  const state = ref(getResult(mutationCache, options)) as Ref<TResult[]>
+  const state = ref(getResult(mutationCache, options)) as Ref<Array<TResult>>
   const unsubscribe = mutationCache.subscribe(() => {
     const result = getResult(mutationCache, options)
     state.value = result
   })
 
-  watch(
-    filters,
-    () => {
-      state.value = getResult(mutationCache, options)
-    },
-    { deep: true },
-  )
+  watch(filters, () => {
+    state.value = getResult(mutationCache, options)
+  })
 
   onScopeDispose(() => {
     unsubscribe()