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

package/src/__tests__/queryClient.test.ts

@@ -259,11 +259,11 @@ describe('QueryCache', () => {
 
       queryClient.fetchInfiniteQuery({
         queryKey: queryKeyRef,
-        defaultPageParam: 0,
+        initialPageParam: 0,
       })
 
       expect(QueryClientOrigin.prototype.fetchInfiniteQuery).toBeCalledWith({
-        defaultPageParam: 0,
+        initialPageParam: 0,
         queryKey: queryKeyUnref,
       })
     })
@@ -276,11 +276,11 @@ describe('QueryCache', () => {
       queryClient.prefetchInfiniteQuery({
         queryKey: queryKeyRef,
         queryFn: fn,
-        defaultPageParam: 0,
+        initialPageParam: 0,
       })
 
       expect(QueryClientOrigin.prototype.prefetchInfiniteQuery).toBeCalledWith({
-        defaultPageParam: 0,
+        initialPageParam: 0,
         queryKey: queryKeyUnref,
         queryFn: fn,
       })

package/src/__tests__/useInfiniteQuery.test.ts

@@ -9,7 +9,7 @@ describe('useQuery', () => {
     const { data, fetchNextPage, status } = useInfiniteQuery({
       queryKey: ['infiniteQuery'],
       queryFn: infiniteFetcher,
-      defaultPageParam: 0,
+      initialPageParam: 0,
       getNextPageParam: () => 12,
     })
 

package/src/__tests__/useInfiniteQuery.types.test.tsx

@@ -12,7 +12,7 @@ describe('Discriminated union return type', () => {
           queryKey: ['infiniteQuery'],
           queryFn: simpleFetcher,
           getNextPageParam: () => undefined,
-          defaultPageParam: 0,
+          initialPageParam: 0,
         }),
       )
 
@@ -31,7 +31,7 @@ describe('Discriminated union return type', () => {
           queryKey: ['infiniteQuery'],
           queryFn: simpleFetcher,
           getNextPageParam: () => undefined,
-          defaultPageParam: 0,
+          initialPageParam: 0,
         }),
       )
 
@@ -53,7 +53,7 @@ describe('Discriminated union return type', () => {
           queryKey: ['infiniteQuery'],
           queryFn: simpleFetcher,
           getNextPageParam: () => undefined,
-          defaultPageParam: 0,
+          initialPageParam: 0,
         }),
       )
 
@@ -72,7 +72,7 @@ describe('Discriminated union return type', () => {
           queryKey: ['infiniteQuery'],
           queryFn: simpleFetcher,
           getNextPageParam: () => undefined,
-          defaultPageParam: 0,
+          initialPageParam: 0,
         }),
       )
 
@@ -91,7 +91,7 @@ describe('Discriminated union return type', () => {
           queryKey: ['infiniteQuery'],
           queryFn: simpleFetcher,
           getNextPageParam: () => undefined,
-          defaultPageParam: 0,
+          initialPageParam: 0,
         }),
       )
 

package/src/__tests__/useMutation.test.ts

@@ -99,7 +99,7 @@ describe('useMutation', () => {
         name: string
       }
     }
-    const mutationKey = ref<MutationKeyTest[]>([
+    const mutationKey = ref<Array<MutationKeyTest>>([
       {
         entity: 'test',
         otherObject: { name: 'objectName' },
@@ -128,13 +128,13 @@ describe('useMutation', () => {
     })
 
     expect(
-      (relevantMutation?.options.mutationKey as MutationKeyTest[])[0]
+      (relevantMutation?.options.mutationKey as Array<MutationKeyTest>)[0]
         ?.otherObject.name === 'someOtherObjectName',
     )
   })
 
   test('should allow for non-options object (mutationFn or mutationKey) passed as arg1 & arg2 to trigger reactive updates', async () => {
-    const mutationKey = ref<string[]>(['foo2'])
+    const mutationKey = ref<Array<string>>(['foo2'])
     const mutationFn = ref((params: string) => successMutator(params))
     const queryClient = useQueryClient()
     const mutationCache = queryClient.getMutationCache()
@@ -332,4 +332,24 @@ describe('useMutation', () => {
       })
     })
   })
+
+  describe('throwOnError', () => {
+    test('should evaluate throwOnError when mutation is expected to throw', async () => {
+      const err = new Error('Expected mock error. All is well!')
+      const boundaryFn = vi.fn()
+      const { mutate } = useMutation({
+        mutationFn: () => {
+          return Promise.reject(err)
+        },
+        throwOnError: boundaryFn,
+      })
+
+      mutate()
+
+      await flushPromises()
+
+      expect(boundaryFn).toHaveBeenCalledTimes(1)
+      expect(boundaryFn).toHaveBeenCalledWith(err)
+    })
+  })
 })

package/src/__tests__/useQuery.test.ts

@@ -138,8 +138,6 @@ describe('useQuery', () => {
     })
 
     secondKeyRef.value = 'key8'
-    await flushPromises()
-
     expect(query).toMatchObject({
       status: { value: 'pending' },
       data: { value: undefined },
@@ -168,9 +166,6 @@ describe('useQuery', () => {
     })
 
     enabled.value = true
-
-    await flushPromises()
-
     expect(query).toMatchObject({
       fetchStatus: { value: 'fetching' },
       data: { value: undefined },
@@ -191,16 +186,18 @@ describe('useQuery', () => {
 
     const enabled = computed(() => !!data.value)
 
+    const dependentQueryFn = vi.fn().mockImplementation(simpleFetcher)
     const { fetchStatus, status } = useQuery(
       reactive({
         queryKey: ['dependant2'],
-        queryFn: simpleFetcher,
+        queryFn: dependentQueryFn,
         enabled,
       }),
     )
 
     expect(data.value).toStrictEqual(undefined)
     expect(fetchStatus.value).toStrictEqual('idle')
+    expect(dependentQueryFn).not.toHaveBeenCalled()
 
     await flushPromises()
 
@@ -211,6 +208,10 @@ describe('useQuery', () => {
 
     expect(fetchStatus.value).toStrictEqual('idle')
     expect(status.value).toStrictEqual('success')
+    expect(dependentQueryFn).toHaveBeenCalledTimes(1)
+    expect(dependentQueryFn).toHaveBeenCalledWith(
+      expect.objectContaining({ queryKey: ['dependant2'] }),
+    )
   })
 
   test('should stop listening to changes on onScopeDispose', async () => {
@@ -235,6 +236,56 @@ describe('useQuery', () => {
     expect(status.value).toStrictEqual('pending')
   })
 
+  test('should use the current value for the queryKey when refetch is called', async () => {
+    const fetchFn = vi.fn()
+    const keyRef = ref('key11')
+    const query = useQuery({
+      queryKey: ['key10', keyRef],
+      queryFn: fetchFn,
+      enabled: false,
+    })
+
+    expect(fetchFn).not.toHaveBeenCalled()
+    await query.refetch()
+    expect(fetchFn).toHaveBeenCalledTimes(1)
+    expect(fetchFn).toHaveBeenCalledWith(
+      expect.objectContaining({
+        queryKey: ['key10', 'key11'],
+      }),
+    )
+
+    keyRef.value = 'key12'
+    await query.refetch()
+    expect(fetchFn).toHaveBeenCalledTimes(2)
+    expect(fetchFn).toHaveBeenCalledWith(
+      expect.objectContaining({
+        queryKey: ['key10', 'key12'],
+      }),
+    )
+  })
+
+  describe('throwOnError', () => {
+    test('should evaluate throwOnError when query is expected to throw', async () => {
+      const boundaryFn = vi.fn()
+      useQuery({
+        queryKey: ['key0'],
+        queryFn: rejectFetcher,
+        retry: false,
+        throwOnError: boundaryFn,
+      })
+
+      await flushPromises()
+
+      expect(boundaryFn).toHaveBeenCalledTimes(1)
+      expect(boundaryFn).toHaveBeenCalledWith(
+        Error('Some error'),
+        expect.objectContaining({
+          state: expect.objectContaining({ status: 'error' }),
+        }),
+      )
+    })
+  })
+
   describe('suspense', () => {
     test('should return a Promise', () => {
       const getCurrentInstanceSpy = getCurrentInstance as Mock

package/src/__tests__/useQueryClient.test.ts

@@ -1,4 +1,4 @@
-import { getCurrentInstance, inject } from 'vue-demi'
+import { hasInjectionContext, inject } from 'vue-demi'
 import { vi } from 'vitest'
 import { useQueryClient } from '../useQueryClient'
 import { VUE_QUERY_CLIENT } from '../utils'
@@ -6,7 +6,7 @@ import type { Mock } from 'vitest'
 
 describe('useQueryClient', () => {
   const injectSpy = inject as Mock
-  const getCurrentInstanceSpy = getCurrentInstance as Mock
+  const hasInjectionContextSpy = hasInjectionContext as Mock
 
   beforeEach(() => {
     vi.restoreAllMocks()
@@ -32,10 +32,10 @@ describe('useQueryClient', () => {
   })
 
   test('should throw an error when used outside of setup function', () => {
-    getCurrentInstanceSpy.mockReturnValueOnce(undefined)
+    hasInjectionContextSpy.mockReturnValueOnce(false)
 
     expect(useQueryClient).toThrowError()
-    expect(getCurrentInstanceSpy).toHaveBeenCalledTimes(1)
+    expect(hasInjectionContextSpy).toHaveBeenCalledTimes(1)
   })
 
   test('should call inject with a custom key as a suffix', () => {

package/src/__tests__/utils.test.ts

@@ -79,7 +79,7 @@ describe('utils', () => {
       expect(cp).not.toBe(val)
       expect(cp[3]).toBe(val[3]) // Set([3, 4])
       expect(cp[4]).not.toBe(val[4]) // [5, 6, { a: 1 }]
-      expect((cp[4] as number[])[2]).not.toBe((val[4] as number[])[2]) // { a : 1 }
+      expect((cp[4] as Array<number>)[2]).not.toBe((val[4] as Array<number>)[2]) // { a : 1 }
     })
 
     test('should deeply copy object', () => {

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,4 +1,16 @@
-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
 
@@ -12,6 +24,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,7 +8,7 @@ import {
   watch,
 } from 'vue-demi'
 import { useQueryClient } from './useQueryClient'
-import { cloneDeepUnref, updateState } from './utils'
+import { cloneDeepUnref, shouldThrowError, updateState } from './utils'
 import type { ToRefs } from 'vue-demi'
 import type {
   DefaultedQueryObserverOptions,
@@ -64,6 +65,14 @@ export function useBaseQuery<
   >,
   queryClient?: QueryClient,
 ): UseBaseQueryReturnType<TData, TError> {
+  if (process.env.NODE_ENV === 'development') {
+    if (!getCurrentScope()) {
+      console.warn(
+        'vue-query composables like "uesQuery()" 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(() => {
@@ -109,7 +118,7 @@ export function useBaseQuery<
       observer.setOptions(defaultedOptions.value)
       updateState(state, observer.getCurrentResult())
     },
-    { deep: true },
+    { flush: 'sync' },
   )
 
   onScopeDispose(() => {
@@ -117,31 +126,52 @@ export function useBaseQuery<
   })
 
   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)
+      },
+    )
   }
 
+  // Handle error boundary
+  watch(
+    () => state.error,
+    (error) => {
+      if (
+        state.isError &&
+        !state.isFetching &&
+        shouldThrowError(defaultedOptions.value.throwOnError, [
+          error as TError,
+          observer.getCurrentQuery(),
+        ])
+      ) {
+        throw error
+      }
+    },
+  )
+
   return {
     ...(toRefs(readonly(state)) as ToRefs<
       Readonly<QueryObserverResult<TData, TError>>

package/src/useInfiniteQuery.ts

@@ -12,9 +12,8 @@ import type {
 
 import type { UseBaseQueryReturnType } from './useBaseQuery'
 
-import type { DistributiveOmit, MaybeRefDeep } from './types'
+import type { DeepUnwrapRef, DistributiveOmit, MaybeRefDeep } from './types'
 import type { QueryClient } from './queryClient'
-import type { UnwrapRef } from 'vue-demi'
 
 export type UseInfiniteQueryOptions<
   TQueryFnData = unknown,
@@ -37,7 +36,7 @@ export type UseInfiniteQueryOptions<
         TError,
         TData,
         TQueryData,
-        UnwrapRef<TQueryKey>,
+        DeepUnwrapRef<TQueryKey>,
         TPageParam
       >[Property]
     : MaybeRefDeep<

package/src/useIsFetching.ts

@@ -1,6 +1,5 @@
-import { computed, onScopeDispose, ref, watch } from 'vue-demi'
+import { getCurrentScope, onScopeDispose, ref, watchSyncEffect } 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 "uesQuery()" 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 },
-  )
+  watchSyncEffect(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 "uesQuery()" 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))
@@ -89,7 +98,7 @@ export function useMutation<
     () => {
       observer.setOptions(options.value)
     },
-    { deep: true },
+    { flush: 'sync' },
   )
 
   onScopeDispose(() => {
@@ -100,6 +109,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,