@tanstack/vue-query 5.40.0 → 5.41.0

package/src/__tests__/queryClient.test.ts

@@ -2,6 +2,7 @@ import { describe, expect, test, vi } from 'vitest'
 import { ref } from 'vue-demi'
 import { QueryClient as QueryClientOrigin } from '@tanstack/query-core'
 import { QueryClient } from '../queryClient'
+import { infiniteQueryOptions } from '../infiniteQueryOptions'
 import { flushPromises } from './test-utils'
 
 vi.mock('@tanstack/query-core')
@@ -264,6 +265,22 @@ describe('QueryCache', () => {
         initialPageParam: 0,
       })
 
+      expect(QueryClientOrigin.prototype.fetchInfiniteQuery).toBeCalledWith({
+        initialPageParam: 0,
+        queryKey: queryKeyUnref,
+      })
+    })
+    test('should properly unwrap parameter using infiniteQueryOptions with unref', async () => {
+      const queryClient = new QueryClient()
+
+      const options = infiniteQueryOptions({
+        queryKey: queryKeyUnref,
+        initialPageParam: 0,
+        getNextPageParam: () => 12,
+      })
+
+      queryClient.fetchInfiniteQuery(options)
+
       expect(QueryClientOrigin.prototype.fetchInfiniteQuery).toBeCalledWith({
         initialPageParam: 0,
         queryKey: queryKeyUnref,

package/src/__tests__/queryOptions.test-d.ts

@@ -0,0 +1,125 @@
+import { describe, expectTypeOf, it } from 'vitest'
+import { reactive, ref } from 'vue-demi'
+import { dataTagSymbol } from '@tanstack/query-core'
+import { QueryClient } from '../queryClient'
+import { queryOptions } from '../queryOptions'
+import { useQuery } from '../useQuery'
+
+describe('queryOptions', () => {
+  it('should not allow excess properties', () => {
+    queryOptions({
+      queryKey: ['key'],
+      queryFn: () => Promise.resolve(5),
+      // @ts-expect-error this is a good error, because stallTime does not exist!
+      stallTime: 1000,
+    })
+  })
+  it('should infer types for callbacks', () => {
+    queryOptions({
+      queryKey: ['key'],
+      queryFn: () => Promise.resolve(5),
+      staleTime: 1000,
+      select: (data) => {
+        expectTypeOf(data).toEqualTypeOf<number>()
+      },
+    })
+  })
+  it('should work when passed to useQuery', () => {
+    const options = queryOptions({
+      queryKey: ['key'],
+      queryFn: () => Promise.resolve(5),
+    })
+
+    const { data } = reactive(useQuery(options))
+    expectTypeOf(data).toEqualTypeOf<number | undefined>()
+  })
+  it('should tag the queryKey with the result type of the QueryFn', () => {
+    const { queryKey } = queryOptions({
+      queryKey: ['key'],
+      queryFn: () => Promise.resolve(5),
+    })
+
+    expectTypeOf(queryKey[dataTagSymbol]).toEqualTypeOf<number>()
+  })
+  it('should tag the queryKey even if no promise is returned', () => {
+    const { queryKey } = queryOptions({
+      queryKey: ['key'],
+      queryFn: () => 5,
+    })
+
+    expectTypeOf(queryKey[dataTagSymbol]).toEqualTypeOf<number>()
+  })
+  it('should tag the queryKey with unknown if there is no queryFn', () => {
+    const { queryKey } = queryOptions({
+      queryKey: ['key'],
+    })
+
+    expectTypeOf(queryKey[dataTagSymbol]).toEqualTypeOf<unknown>()
+  })
+  it('should tag the queryKey with the result type of the QueryFn if select is used', () => {
+    const { queryKey } = queryOptions({
+      queryKey: ['key'],
+      queryFn: () => Promise.resolve(5),
+      select: (data) => data.toString(),
+    })
+
+    expectTypeOf(queryKey[dataTagSymbol]).toEqualTypeOf<number>()
+  })
+  it('should return the proper type when passed to getQueryData', () => {
+    const { queryKey } = queryOptions({
+      queryKey: ['key'],
+      queryFn: () => Promise.resolve(5),
+    })
+
+    const queryClient = new QueryClient()
+    const data = queryClient.getQueryData(queryKey)
+
+    expectTypeOf(data).toEqualTypeOf<number | undefined>()
+  })
+  it('should properly type updaterFn when passed to setQueryData', () => {
+    const { queryKey } = queryOptions({
+      queryKey: ['key'],
+      queryFn: () => Promise.resolve(5),
+    })
+
+    const queryClient = new QueryClient()
+    const data = queryClient.setQueryData(queryKey, (prev) => {
+      expectTypeOf(prev).toEqualTypeOf<number | undefined>()
+      return prev
+    })
+    expectTypeOf(data).toEqualTypeOf<number | undefined>()
+  })
+  it('should properly type value when passed to setQueryData', () => {
+    const { queryKey } = queryOptions({
+      queryKey: ['key'],
+      queryFn: () => Promise.resolve(5),
+    })
+
+    const queryClient = new QueryClient()
+
+    // @ts-expect-error value should be a number
+    queryClient.setQueryData(queryKey, '5')
+    // @ts-expect-error value should be a number
+    queryClient.setQueryData(queryKey, () => '5')
+
+    const data = queryClient.setQueryData(queryKey, 5)
+
+    expectTypeOf(data).toEqualTypeOf<number | undefined>()
+  })
+  it('should allow to be passed to QueryClient methods while containing ref in queryKey', () => {
+    const options = queryOptions({
+      queryKey: ['key', ref(1), { nested: ref(2) }],
+      queryFn: () => Promise.resolve(5),
+    })
+
+    const queryClient = new QueryClient()
+
+    // Should not error
+    const data = queryClient.invalidateQueries(options)
+    // Should not error
+    const data2 = queryClient.fetchQuery(options)
+
+    expectTypeOf(data).toEqualTypeOf<Promise<void>>()
+    expectTypeOf(data2).toEqualTypeOf<Promise<number>>()
+  })
+})

package/src/__tests__/test-utils.ts

@@ -50,13 +50,3 @@ export function successMutator<T>(param: T): Promise<T> {
 export function errorMutator<T>(_: T): Promise<Error> {
   return rejectFetcher()
 }
-
-export type Equal<TTargetA, TTargetB> = (<T>() => T extends TTargetA
-  ? 1
-  : 2) extends <T>() => T extends TTargetB ? 1 : 2
-  ? true
-  : false
-
-export type Expect<T extends true> = T
-
-export const doNotExecute = (_func: () => void) => true

package/src/__tests__/useInfiniteQuery.test-d.tsx

@@ -0,0 +1,84 @@
+import { describe, expectTypeOf, it } from 'vitest'
+import { reactive } from 'vue-demi'
+import { useInfiniteQuery } from '../useInfiniteQuery'
+import { simpleFetcher } from './test-utils'
+import type { InfiniteData } from '@tanstack/query-core'
+
+describe('Discriminated union return type', () => {
+  it('data should be possibly undefined by default', () => {
+    const query = reactive(
+      useInfiniteQuery({
+        queryKey: ['infiniteQuery'],
+        queryFn: simpleFetcher,
+        getNextPageParam: () => undefined,
+        initialPageParam: 0,
+      }),
+    )
+
+    // TODO: Order of generics prevents pageParams to be typed correctly. Using `unknown` for now
+    expectTypeOf(query.data).toEqualTypeOf<
+      InfiniteData<string, unknown> | undefined
+    >()
+  })
+
+  it('data should be defined when query is success', () => {
+    const query = reactive(
+      useInfiniteQuery({
+        queryKey: ['infiniteQuery'],
+        queryFn: simpleFetcher,
+        getNextPageParam: () => undefined,
+        initialPageParam: 0,
+      }),
+    )
+
+    if (query.isSuccess) {
+      // TODO: Order of generics prevents pageParams to be typed correctly. Using `unknown` for now
+      expectTypeOf(query.data).toEqualTypeOf<InfiniteData<string, unknown>>()
+    }
+  })
+
+  it('error should be null when query is success', () => {
+    const query = reactive(
+      useInfiniteQuery({
+        queryKey: ['infiniteQuery'],
+        queryFn: simpleFetcher,
+        getNextPageParam: () => undefined,
+        initialPageParam: 0,
+      }),
+    )
+
+    if (query.isSuccess) {
+      expectTypeOf(query.error).toEqualTypeOf<null>()
+    }
+  })
+
+  it('data should be undefined when query is pending', () => {
+    const query = reactive(
+      useInfiniteQuery({
+        queryKey: ['infiniteQuery'],
+        queryFn: simpleFetcher,
+        getNextPageParam: () => undefined,
+        initialPageParam: 0,
+      }),
+    )
+
+    if (query.isPending) {
+      expectTypeOf(query.data).toEqualTypeOf<undefined>()
+    }
+  })
+
+  it('error should be defined when query is error', () => {
+    const query = reactive(
+      useInfiniteQuery({
+        queryKey: ['infiniteQuery'],
+        queryFn: simpleFetcher,
+        getNextPageParam: () => undefined,
+        initialPageParam: 0,
+      }),
+    )
+
+    if (query.isError) {
+      expectTypeOf(query.error).toEqualTypeOf<Error>()
+    }
+  })
+})

package/src/__tests__/useInfiniteQuery.test.ts

@@ -1,5 +1,6 @@
 import { describe, expect, test, vi } from 'vitest'
 import { useInfiniteQuery } from '../useInfiniteQuery'
+import { infiniteQueryOptions } from '../infiniteQueryOptions'
 import { flushPromises, infiniteFetcher } from './test-utils'
 
 vi.mock('../useQueryClient')
@@ -28,6 +29,37 @@ describe('useQuery', () => {
 
     await flushPromises()
 
+    expect(data.value).toStrictEqual({
+      pageParams: [0, 12],
+      pages: ['data on page 0', 'data on page 12'],
+    })
+    expect(status.value).toStrictEqual('success')
+  })
+  test('should properly execute infinite query using infiniteQueryOptions', async () => {
+    const options = infiniteQueryOptions({
+      queryKey: ['infiniteQueryOptions'],
+      queryFn: infiniteFetcher,
+      initialPageParam: 0,
+      getNextPageParam: () => 12,
+    })
+
+    const { data, fetchNextPage, status } = useInfiniteQuery(options)
+
+    expect(data.value).toStrictEqual(undefined)
+    expect(status.value).toStrictEqual('pending')
+
+    await flushPromises()
+
+    expect(data.value).toStrictEqual({
+      pageParams: [0],
+      pages: ['data on page 0'],
+    })
+    expect(status.value).toStrictEqual('success')
+
+    fetchNextPage()
+
+    await flushPromises()
+
     expect(data.value).toStrictEqual({
       pageParams: [0, 12],
       pages: ['data on page 0', 'data on page 12'],

package/src/__tests__/useMutation.test-d.tsx

@@ -0,0 +1,74 @@
+import { describe, expectTypeOf, it } from 'vitest'
+import { reactive } from 'vue-demi'
+import { useMutation } from '../useMutation'
+import { successMutator } from './test-utils'
+
+describe('Discriminated union return type', () => {
+  it('data should be possibly undefined by default', () => {
+    const mutation = reactive(
+      useMutation({ mutationFn: successMutator<string> }),
+    )
+
+    expectTypeOf(mutation.data).toEqualTypeOf<string | undefined>()
+  })
+
+  it('data should be defined when mutation is success', () => {
+    const mutation = reactive(
+      useMutation({ mutationFn: successMutator<string> }),
+    )
+
+    if (mutation.isSuccess) {
+      expectTypeOf(mutation.data).toEqualTypeOf<string>()
+    }
+  })
+
+  it('error should be null when mutation is success', () => {
+    const mutation = reactive(
+      useMutation({ mutationFn: successMutator<string> }),
+    )
+
+    if (mutation.isSuccess) {
+      expectTypeOf(mutation.error).toEqualTypeOf<null>()
+    }
+  })
+
+  it('data should be undefined when mutation is pending', () => {
+    const mutation = reactive(
+      useMutation({ mutationFn: successMutator<string> }),
+    )
+
+    if (mutation.isPending) {
+      expectTypeOf(mutation.data).toEqualTypeOf<undefined>()
+    }
+  })
+
+  it('error should be defined when mutation is error', () => {
+    const mutation = reactive(
+      useMutation({ mutationFn: successMutator<string> }),
+    )
+
+    if (mutation.isError) {
+      expectTypeOf(mutation.error).toEqualTypeOf<Error>()
+    }
+  })
+
+  it('should narrow variables', () => {
+    const mutation = reactive(
+      useMutation({ mutationFn: successMutator<string> }),
+    )
+
+    if (mutation.isIdle) {
+      expectTypeOf(mutation.variables).toEqualTypeOf<undefined>()
+      return
+    }
+    if (mutation.isPending) {
+      expectTypeOf(mutation.variables).toEqualTypeOf<string>()
+      return
+    }
+    if (mutation.isSuccess) {
+      expectTypeOf(mutation.variables).toEqualTypeOf<string>()
+      return
+    }
+    expectTypeOf(mutation.variables).toEqualTypeOf<string>()
+  })
+})

package/src/__tests__/useQueries.test-d.ts

@@ -0,0 +1,145 @@
+import { describe, expectTypeOf, it } from 'vitest'
+import { reactive } from 'vue'
+import { skipToken, useQueries } from '..'
+import { queryOptions } from '../queryOptions'
+import type { OmitKeyof, QueryObserverResult } from '..'
+import type { UseQueryOptions } from '../useQuery'
+
+describe('UseQueries config object overload', () => {
+  it('TData should always be defined when initialData is provided as an object', () => {
+    const query1 = {
+      queryKey: ['key1'],
+      queryFn: () => {
+        return {
+          wow: true,
+        }
+      },
+      initialData: {
+        wow: false,
+      },
+    }
+
+    const query2 = queryOptions({
+      queryKey: ['key2'],
+      queryFn: () => 'Query Data',
+      initialData: 'initial data',
+    })
+
+    const query3 = {
+      queryKey: ['key2'],
+      queryFn: () => 'Query Data',
+    }
+
+    const { value: queriesState } = useQueries({
+      queries: [query1, query2, query3],
+    })
+
+    expectTypeOf(queriesState[0].data).toEqualTypeOf<{ wow: boolean }>()
+    expectTypeOf(queriesState[1].data).toEqualTypeOf<string>()
+    expectTypeOf(queriesState[2].data).toEqualTypeOf<string | undefined>()
+  })
+
+  it('TData should be defined when passed through queryOptions', () => {
+    const options = queryOptions({
+      queryKey: ['key'],
+      queryFn: () => {
+        return {
+          wow: true,
+        }
+      },
+      initialData: {
+        wow: true,
+      },
+    })
+
+    const { value: queriesState } = useQueries({ queries: [options] })
+
+    expectTypeOf(queriesState[0].data).toEqualTypeOf<{ wow: boolean }>()
+  })
+
+  it('it should be possible to define a different TData than TQueryFnData using select with queryOptions spread into useQueries', () => {
+    const query1 = queryOptions({
+      queryKey: ['key'],
+      queryFn: () => Promise.resolve(1),
+      select: (data) => data > 1,
+    })
+
+    const query2 = {
+      queryKey: ['key'],
+      queryFn: () => Promise.resolve(1),
+      select: (data: any) => data > 1,
+    }
+
+    const queriesState = reactive(useQueries({ queries: [query1, query2] }))
+
+    expectTypeOf(queriesState.value[0].data).toEqualTypeOf<
+      boolean | undefined
+    >()
+    expectTypeOf(queriesState.value[1].data).toEqualTypeOf<
+      boolean | undefined
+    >()
+  })
+
+  it('TData should have undefined in the union when initialData is provided as a function which can return undefined', () => {
+    const { value: queriesState } = useQueries({
+      queries: [
+        {
+          queryKey: ['key'],
+          queryFn: () => {
+            return {
+              wow: true,
+            }
+          },
+          initialData: () => undefined as { wow: boolean } | undefined,
+        },
+      ],
+    })
+
+    expectTypeOf(queriesState[0].data).toEqualTypeOf<
+      { wow: boolean } | undefined
+    >()
+  })
+
+  it('TData should have correct type when conditional skipToken is passed', () => {
+    const { value: queriesState } = useQueries({
+      queries: [
+        queryOptions({
+          queryKey: ['key'],
+          queryFn: Math.random() > 0.5 ? skipToken : () => Promise.resolve(5),
+        }),
+      ],
+    })
+
+    const firstResult = queriesState[0]
+
+    expectTypeOf(firstResult).toEqualTypeOf<
+      QueryObserverResult<number, Error>
+    >()
+    expectTypeOf(firstResult.data).toEqualTypeOf<number | undefined>()
+  })
+
+  describe('custom hook', () => {
+    it('should allow custom hooks using UseQueryOptions', () => {
+      const useCustomQueries = (
+        options?: OmitKeyof<
+          UseQueryOptions<string>,
+          'queryKey' | 'queryFn',
+          'safely'
+        >,
+      ) =>
+        useQueries({
+          queries: [
+            {
+              ...options,
+              queryKey: ['todos-key'],
+              queryFn: () => Promise.resolve('data'),
+            },
+          ],
+        })
+
+      const { value: queriesState } = useCustomQueries()
+
+      expectTypeOf(queriesState[0].data).toEqualTypeOf<string | undefined>()
+    })
+  })
+})