@tanstack/react-query 5.0.0-rc.0 → 5.0.0-rc.12

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

@@ -0,0 +1,163 @@
+import { QueryClient } from '@tanstack/query-core'
+import { infiniteQueryOptions } from '../infiniteQueryOptions'
+import { useInfiniteQuery } from '../useInfiniteQuery'
+import { useSuspenseInfiniteQuery } from '../useSuspenseInfiniteQuery'
+import { doNotExecute } from './utils'
+import type { InfiniteData, dataTagSymbol } from '@tanstack/query-core'
+import type { Equal, Expect } from './utils'
+
+describe('queryOptions', () => {
+  it('should not allow excess properties', () => {
+    doNotExecute(() => {
+      return infiniteQueryOptions({
+        queryKey: ['key'],
+        queryFn: () => Promise.resolve('data'),
+        getNextPageParam: () => 1,
+        initialPageParam: 1,
+        // @ts-expect-error this is a good error, because stallTime does not exist!
+        stallTime: 1000,
+      })
+    })
+  })
+  it('should infer types for callbacks', () => {
+    doNotExecute(() => {
+      return infiniteQueryOptions({
+        queryKey: ['key'],
+        queryFn: () => Promise.resolve('data'),
+        staleTime: 1000,
+        getNextPageParam: () => 1,
+        initialPageParam: 1,
+        select: (data) => {
+          const result: Expect<
+            Equal<InfiniteData<string, number>, typeof data>
+          > = true
+          return result
+        },
+      })
+    })
+  })
+  it('should work when passed to useInfiniteQuery', () => {
+    doNotExecute(() => {
+      const options = infiniteQueryOptions({
+        queryKey: ['key'],
+        queryFn: () => Promise.resolve('string'),
+        getNextPageParam: () => 1,
+        initialPageParam: 1,
+      })
+
+      const { data } = useInfiniteQuery(options)
+
+      // known issue: type of pageParams is unknown when returned from useInfiniteQuery
+      const result: Expect<
+        Equal<typeof data, InfiniteData<string, unknown> | undefined>
+      > = true
+      return result
+    })
+  })
+  it('should work when passed to useSuspenseInfiniteQuery', () => {
+    doNotExecute(() => {
+      const options = infiniteQueryOptions({
+        queryKey: ['key'],
+        queryFn: () => Promise.resolve('string'),
+        getNextPageParam: () => 1,
+        initialPageParam: 1,
+      })
+
+      const { data } = useSuspenseInfiniteQuery(options)
+
+      const result: Expect<Equal<typeof data, InfiniteData<string, unknown>>> =
+        true
+      return result
+    })
+  })
+  it('should work when passed to fetchInfiniteQuery', () => {
+    doNotExecute(async () => {
+      const options = infiniteQueryOptions({
+        queryKey: ['key'],
+        queryFn: () => Promise.resolve('string'),
+        getNextPageParam: () => 1,
+        initialPageParam: 1,
+      })
+
+      const data = await new QueryClient().fetchInfiniteQuery(options)
+
+      const result: Expect<Equal<typeof data, InfiniteData<string, number>>> =
+        true
+      return result
+    })
+  })
+  it('should tag the queryKey with the result type of the QueryFn', () => {
+    doNotExecute(() => {
+      const { queryKey } = infiniteQueryOptions({
+        queryKey: ['key'],
+        queryFn: () => Promise.resolve('string'),
+        getNextPageParam: () => 1,
+        initialPageParam: 1,
+      })
+
+      const result: Expect<
+        Equal<(typeof queryKey)[typeof dataTagSymbol], InfiniteData<string>>
+      > = true
+      return result
+    })
+
+    it('should tag the queryKey even if no promise is returned', () => {
+      doNotExecute(() => {
+        const { queryKey } = infiniteQueryOptions({
+          queryKey: ['key'],
+          queryFn: () => 'string',
+          getNextPageParam: () => 1,
+          initialPageParam: 1,
+        })
+
+        const result: Expect<
+          Equal<(typeof queryKey)[typeof dataTagSymbol], InfiniteData<string>>
+        > = true
+        return result
+      })
+    })
+
+    it('should return the proper type when passed to getQueryData', () => {
+      doNotExecute(() => {
+        const { queryKey } = infiniteQueryOptions({
+          queryKey: ['key'],
+          queryFn: () => Promise.resolve('string'),
+          getNextPageParam: () => 1,
+          initialPageParam: 1,
+        })
+
+        const queryClient = new QueryClient()
+        const data = queryClient.getQueryData(queryKey)
+
+        const result: Expect<
+          Equal<typeof data, InfiniteData<string, unknown> | undefined>
+        > = true
+        return result
+      })
+    })
+
+    it('should properly type when passed to setQueryData', () => {
+      doNotExecute(() => {
+        const { queryKey } = infiniteQueryOptions({
+          queryKey: ['key'],
+          queryFn: () => Promise.resolve('string'),
+          getNextPageParam: () => 1,
+          initialPageParam: 1,
+        })
+
+        const queryClient = new QueryClient()
+        const data = queryClient.setQueryData(queryKey, (prev) => {
+          const result: Expect<
+            Equal<typeof prev, InfiniteData<string, unknown> | undefined>
+          > = true
+          return result ? prev : { pages: ['foo'], pageParams: [1] }
+        })
+
+        const result: Expect<
+          Equal<typeof data, InfiniteData<string, unknown> | undefined>
+        > = true
+        return result
+      })
+    })
+  })
+})

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

@@ -1,14 +1,19 @@
+import { QueryClient } from '@tanstack/query-core'
 import { queryOptions } from '../queryOptions'
+import { useQuery } from '../useQuery'
+import { useQueries } from '../useQueries'
+import { useSuspenseQuery } from '../useSuspenseQuery'
 import { doNotExecute } from './utils'
+import type { dataTagSymbol } from '@tanstack/query-core'
 import type { Equal, Expect } from './utils'
 
 describe('queryOptions', () => {
   it('should not allow excess properties', () => {
     doNotExecute(() => {
-      // @ts-expect-error this is a good error, because stallTime does not exist!
       return queryOptions({
         queryKey: ['key'],
         queryFn: () => Promise.resolve(5),
+        // @ts-expect-error this is a good error, because stallTime does not exist!
         stallTime: 1000,
       })
     })
@@ -20,12 +25,158 @@ describe('queryOptions', () => {
         queryFn: () => Promise.resolve(5),
         staleTime: 1000,
         select: (data) => {
-          // @ts-expect-error data is in fact inferred as unknown
-          // see https://github.com/microsoft/TypeScript/issues/47599
           const result: Expect<Equal<number, typeof data>> = true
           return result
         },
       })
     })
   })
+  it('should work when passed to useQuery', () => {
+    doNotExecute(() => {
+      const options = queryOptions({
+        queryKey: ['key'],
+        queryFn: () => Promise.resolve(5),
+      })
+
+      const { data } = useQuery(options)
+
+      const result: Expect<Equal<typeof data, number | undefined>> = true
+      return result
+    })
+  })
+  it('should work when passed to useSuspenseQuery', () => {
+    doNotExecute(() => {
+      const options = queryOptions({
+        queryKey: ['key'],
+        queryFn: () => Promise.resolve(5),
+      })
+
+      const { data } = useSuspenseQuery(options)
+
+      const result: Expect<Equal<typeof data, number>> = true
+      return result
+    })
+  })
+  it('should work when passed to fetchQuery', () => {
+    doNotExecute(async () => {
+      const options = queryOptions({
+        queryKey: ['key'],
+        queryFn: () => Promise.resolve(5),
+      })
+
+      const data = await new QueryClient().fetchQuery(options)
+
+      const result: Expect<Equal<typeof data, number>> = true
+      return result
+    })
+  })
+  it('should work when passed to useQueries', () => {
+    doNotExecute(() => {
+      const options = queryOptions({
+        queryKey: ['key'],
+        queryFn: () => Promise.resolve(5),
+      })
+
+      const [{ data }] = useQueries({
+        queries: [options],
+      })
+
+      const result: Expect<Equal<typeof data, number | undefined>> = true
+      return result
+    })
+  })
+  it('should tag the queryKey with the result type of the QueryFn', () => {
+    doNotExecute(() => {
+      const { queryKey } = queryOptions({
+        queryKey: ['key'],
+        queryFn: () => Promise.resolve(5),
+      })
+
+      const result: Expect<
+        Equal<(typeof queryKey)[typeof dataTagSymbol], number>
+      > = true
+      return result
+    })
+
+    it('should tag the queryKey even if no promise is returned', () => {
+      doNotExecute(() => {
+        const { queryKey } = queryOptions({
+          queryKey: ['key'],
+          queryFn: () => 5,
+        })
+
+        const result: Expect<
+          Equal<(typeof queryKey)[typeof dataTagSymbol], number>
+        > = true
+        return result
+      })
+    })
+
+    it('should tag the queryKey with unknown if there is no queryFn', () => {
+      doNotExecute(() => {
+        const { queryKey } = queryOptions({
+          queryKey: ['key'],
+        })
+
+        const result: Expect<
+          Equal<(typeof queryKey)[typeof dataTagSymbol], unknown>
+        > = true
+        return result
+      })
+    })
+
+    it('should return the proper type when passed to getQueryData', () => {
+      doNotExecute(() => {
+        const { queryKey } = queryOptions({
+          queryKey: ['key'],
+          queryFn: () => Promise.resolve(5),
+        })
+
+        const queryClient = new QueryClient()
+        const data = queryClient.getQueryData(queryKey)
+
+        const result: Expect<Equal<typeof data, number | undefined>> = true
+        return result
+      })
+    })
+
+    it('should properly type updaterFn when passed to setQueryData', () => {
+      doNotExecute(() => {
+        const { queryKey } = queryOptions({
+          queryKey: ['key'],
+          queryFn: () => Promise.resolve(5),
+        })
+
+        const queryClient = new QueryClient()
+        const data = queryClient.setQueryData(queryKey, (prev) => {
+          const result: Expect<Equal<typeof prev, number | undefined>> = true
+          return result ? prev : 1
+        })
+
+        const result: Expect<Equal<typeof data, number | undefined>> = true
+        return result
+      })
+    })
+
+    it('should properly type value when passed to setQueryData', () => {
+      doNotExecute(() => {
+        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)
+
+        const result: Expect<Equal<typeof data, number | undefined>> = true
+        return result
+      })
+    })
+  })
 })

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

@@ -0,0 +1,146 @@
+import { useSuspenseQuery } from '../useSuspenseQuery'
+import { useSuspenseInfiniteQuery } from '../useSuspenseInfiniteQuery'
+import { doNotExecute } from './utils'
+import type { InfiniteData } from '@tanstack/query-core'
+import type { Equal, Expect } from './utils'
+
+describe('useSuspenseQuery', () => {
+  it('should always have data defined', () => {
+    doNotExecute(() => {
+      const { data } = useSuspenseQuery({
+        queryKey: ['key'],
+        queryFn: () => Promise.resolve(5),
+      })
+
+      const result: Expect<Equal<typeof data, number>> = true
+      return result
+    })
+  })
+
+  it('should not have pending status', () => {
+    doNotExecute(() => {
+      const { status } = useSuspenseQuery({
+        queryKey: ['key'],
+        queryFn: () => Promise.resolve(5),
+      })
+
+      const result: Expect<Equal<typeof status, 'error' | 'success'>> = true
+      return result
+    })
+  })
+
+  it('should not allow placeholderData, enabled or throwOnError props', () => {
+    doNotExecute(() => {
+      useSuspenseQuery({
+        queryKey: ['key'],
+        queryFn: () => Promise.resolve(5),
+        // @ts-expect-error TS2345
+        placeholderData: 5,
+        enabled: true,
+      })
+
+      useSuspenseQuery({
+        queryKey: ['key'],
+        queryFn: () => Promise.resolve(5),
+        // @ts-expect-error TS2345
+        enabled: true,
+      })
+
+      useSuspenseQuery({
+        queryKey: ['key'],
+        queryFn: () => Promise.resolve(5),
+        // @ts-expect-error TS2345
+        throwOnError: true,
+      })
+    })
+  })
+
+  it('should not return isPlaceholderData', () => {
+    doNotExecute(() => {
+      const query = useSuspenseQuery({
+        queryKey: ['key'],
+        queryFn: () => Promise.resolve(5),
+      })
+
+      // @ts-expect-error TS2339
+      void query.isPlaceholderData
+    })
+  })
+})
+
+describe('useSuspenseInfiniteQuery', () => {
+  it('should always have data defined', () => {
+    doNotExecute(() => {
+      const { data } = useSuspenseInfiniteQuery({
+        queryKey: ['key'],
+        queryFn: () => Promise.resolve(5),
+        initialPageParam: 1,
+        getNextPageParam: () => 1,
+      })
+
+      const result: Expect<Equal<typeof data, InfiniteData<number, unknown>>> =
+        true
+      return result
+    })
+  })
+
+  it('should not have pending status', () => {
+    doNotExecute(() => {
+      const { status } = useSuspenseInfiniteQuery({
+        queryKey: ['key'],
+        queryFn: () => Promise.resolve(5),
+        initialPageParam: 1,
+        getNextPageParam: () => 1,
+      })
+
+      const result: Expect<Equal<typeof status, 'error' | 'success'>> = true
+      return result
+    })
+  })
+
+  it('should not allow placeholderData, enabled or throwOnError props', () => {
+    doNotExecute(() => {
+      useSuspenseInfiniteQuery({
+        queryKey: ['key'],
+        queryFn: () => Promise.resolve(5),
+        initialPageParam: 1,
+        getNextPageParam: () => 1,
+        // @ts-expect-error TS2345
+        placeholderData: 5,
+        enabled: true,
+      })
+
+      useSuspenseInfiniteQuery({
+        queryKey: ['key'],
+        queryFn: () => Promise.resolve(5),
+        initialPageParam: 1,
+        getNextPageParam: () => 1,
+        // @ts-expect-error TS2345
+        enabled: true,
+      })
+
+      useSuspenseInfiniteQuery({
+        queryKey: ['key'],
+        queryFn: () => Promise.resolve(5),
+        initialPageParam: 1,
+        getNextPageParam: () => 1,
+        // @ts-expect-error TS2345
+        throwOnError: true,
+      })
+    })
+  })
+
+  it('should not return isPlaceholderData', () => {
+    doNotExecute(() => {
+      const query = useSuspenseInfiniteQuery({
+        queryKey: ['key'],
+        queryFn: () => Promise.resolve(5),
+        initialPageParam: 1,
+        getNextPageParam: () => 1,
+      })
+
+      // @ts-expect-error TS2339
+      void query.isPlaceholderData
+    })
+  })
+})

package/src/__tests__/useQuery.test.tsx

@@ -4146,7 +4146,7 @@ describe('useQuery', () => {
           await sleep(10)
           return count++
         },
-        refetchInterval: (data = 0) => (data < 2 ? 10 : false),
+        refetchInterval: ({ state: { data = 0 } }) => (data < 2 ? 10 : false),
       })
 
       states.push(queryInfo)
@@ -5975,11 +5975,11 @@ describe('useQuery', () => {
           <div>data: {state.data}</div>
           <div>dataUpdatedAt: {state.dataUpdatedAt}</div>
           <button
-            onClick={() =>
+            onClick={() => {
               queryClient.setQueryData(key, 'newData', {
                 updatedAt: 100,
               })
-            }
+            }}
           >
             setQueryData
           </button>

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

@@ -51,10 +51,16 @@ describe('initialData', () => {
           queryKey: ['key'],
           queryFn: () => Promise.resolve(1),
         })
-        useQuery({
+
+        const query = useQuery({
           ...options,
           select: (data) => data > 1,
         })
+
+        const result: Expect<
+          Equal<boolean | undefined, (typeof query)['data']>
+        > = true
+        return result
       })
     })
 

package/src/infiniteQueryOptions.ts

@@ -1,50 +1,50 @@
+import type { DataTag } from '@tanstack/query-core'
 import type { InfiniteData } from '@tanstack/query-core'
 import type { UseInfiniteQueryOptions } from './types'
 import type { DefaultError, QueryKey } from '@tanstack/query-core'
 
 export type UndefinedInitialDataInfiniteOptions<
-  TQueryFnData = unknown,
+  TQueryFnData,
   TError = DefaultError,
-  TData = TQueryFnData,
-  TQueryData = TQueryFnData,
+  TData = InfiniteData<TQueryFnData>,
   TQueryKey extends QueryKey = QueryKey,
   TPageParam = unknown,
 > = UseInfiniteQueryOptions<
   TQueryFnData,
   TError,
   TData,
-  TQueryData,
+  TQueryFnData,
   TQueryKey,
   TPageParam
 > & {
   initialData?: undefined
 }
 
+type NonUndefinedGuard<T> = T extends undefined ? never : T
+
 export type DefinedInitialDataInfiniteOptions<
-  TQueryFnData = unknown,
+  TQueryFnData,
   TError = DefaultError,
-  TData = TQueryFnData,
-  TQueryData = TQueryFnData,
+  TData = InfiniteData<TQueryFnData>,
   TQueryKey extends QueryKey = QueryKey,
   TPageParam = unknown,
 > = UseInfiniteQueryOptions<
   TQueryFnData,
   TError,
   TData,
-  TQueryData,
+  TQueryFnData,
   TQueryKey,
   TPageParam
 > & {
   initialData:
-    | InfiniteData<TQueryData, TPageParam>
-    | (() => InfiniteData<TQueryData, TPageParam>)
+    | NonUndefinedGuard<InfiniteData<TQueryFnData, TPageParam>>
+    | (() => NonUndefinedGuard<InfiniteData<TQueryFnData, TPageParam>>)
 }
 
 export function infiniteQueryOptions<
-  TQueryFnData = unknown,
+  TQueryFnData,
   TError = DefaultError,
-  TData = TQueryFnData,
-  TQueryData = TQueryFnData,
+  TData = InfiniteData<TQueryFnData>,
   TQueryKey extends QueryKey = QueryKey,
   TPageParam = unknown,
 >(
@@ -52,7 +52,6 @@ export function infiniteQueryOptions<
     TQueryFnData,
     TError,
     TData,
-    TQueryFnData,
     TQueryKey,
     TPageParam
   >,
@@ -60,16 +59,16 @@ export function infiniteQueryOptions<
   TQueryFnData,
   TError,
   TData,
-  TQueryFnData,
   TQueryKey,
   TPageParam
->
+> & {
+  queryKey: DataTag<TQueryKey, TData>
+}
 
 export function infiniteQueryOptions<
-  TQueryFnData = unknown,
+  TQueryFnData,
   TError = DefaultError,
-  TData = TQueryFnData,
-  TQueryData = TQueryFnData,
+  TData = InfiniteData<TQueryFnData>,
   TQueryKey extends QueryKey = QueryKey,
   TPageParam = unknown,
 >(
@@ -77,7 +76,6 @@ export function infiniteQueryOptions<
     TQueryFnData,
     TError,
     TData,
-    TQueryFnData,
     TQueryKey,
     TPageParam
   >,
@@ -85,10 +83,11 @@ export function infiniteQueryOptions<
   TQueryFnData,
   TError,
   TData,
-  TQueryFnData,
   TQueryKey,
   TPageParam
->
+> & {
+  queryKey: DataTag<TQueryKey, TData>
+}
 
 export function infiniteQueryOptions(options: unknown) {
   return options

package/src/queryOptions.ts

@@ -1,4 +1,4 @@
-import type { DefaultError, QueryKey } from '@tanstack/query-core'
+import type { DataTag, DefaultError, QueryKey } from '@tanstack/query-core'
 import type { UseQueryOptions } from './types'
 
 export type UndefinedInitialDataOptions<
@@ -23,35 +23,27 @@ export type DefinedInitialDataOptions<
     | (() => NonUndefinedGuard<TQueryFnData>)
 }
 
-type ValidateQueryOptions<T> = {
-  [K in keyof T]: K extends keyof UseQueryOptions ? T[K] : never
-}
-
 export function queryOptions<
   TQueryFnData = unknown,
   TError = DefaultError,
   TData = TQueryFnData,
   TQueryKey extends QueryKey = QueryKey,
-  TOptions extends UndefinedInitialDataOptions<
-    TQueryFnData,
-    TError,
-    TData,
-    TQueryKey
-  > = UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>,
->(options: ValidateQueryOptions<TOptions>): TOptions
+>(
+  options: UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>,
+): UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey> & {
+  queryKey: DataTag<TQueryKey, TData>
+}
 
 export function queryOptions<
   TQueryFnData = unknown,
   TError = DefaultError,
   TData = TQueryFnData,
   TQueryKey extends QueryKey = QueryKey,
-  TOptions extends DefinedInitialDataOptions<
-    TQueryFnData,
-    TError,
-    TData,
-    TQueryKey
-  > = DefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>,
->(options: ValidateQueryOptions<TOptions>): TOptions
+>(
+  options: DefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>,
+): DefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey> & {
+  queryKey: DataTag<TQueryKey, TData>
+}
 
 export function queryOptions(options: unknown) {
   return options