fix(types): useQuery types (#5803)

* fix: add extra overload for the part that's handled by the implementation

* refactor: remove generics from overload implementation

so that we can easily see that this is the implementation that doesn't contribute to the types interface at all

* feat: export types

Author: TkDodo

packages/react-query/src/__tests__/useQuery.types.test.tsx

@@ -1,6 +1,7 @@
 import { useQuery } from '../useQuery'
 import { queryOptions } from '../queryOptions'
 import { doNotExecute } from './utils'
+import type { UseQueryOptions } from '../types'
 import type { Equal, Expect } from './utils'
 
 describe('initialData', () => {
@@ -99,77 +100,24 @@ describe('initialData', () => {
     })
   })
 
-  describe('Query key overload', () => {
-    it('TData should always be defined when initialData is provided', () => {
+  describe('custom hook', () => {
+    it('should allow custom hooks using UseQueryOptions', () => {
       doNotExecute(() => {
-        const { data } = useQuery({
-          queryKey: ['key'],
-          queryFn: () => {
-            return {
-              wow: true,
-            }
-          },
-          initialData: {
-            wow: true,
-          },
-        })
-
-        const result: Expect<Equal<{ wow: boolean }, typeof data>> = true
-        return result
-      })
-    })
+        type Data = string
 
-    it('TData should have undefined in the union when initialData is NOT provided', () => {
-      doNotExecute(() => {
-        const { data } = useQuery({
-          queryKey: ['key'],
-          queryFn: () => {
-            return {
-              wow: true,
-            }
-          },
-        })
+        const useCustomQuery = (
+          options?: Omit<UseQueryOptions<Data>, 'queryKey' | 'queryFn'>,
+        ) => {
+          return useQuery({
+            ...options,
+            queryKey: ['todos-key'],
+            queryFn: () => Promise.resolve('data'),
+          })
+        }
 
-        const result: Expect<Equal<{ wow: boolean } | undefined, typeof data>> =
-          true
-        return result
-      })
-    })
-  })
+        const { data } = useCustomQuery()
 
-  describe('Query key and func', () => {
-    it('TData should always be defined when initialData is provided', () => {
-      doNotExecute(() => {
-        const { data } = useQuery({
-          queryKey: ['key'],
-          queryFn: () => {
-            return {
-              wow: true,
-            }
-          },
-          initialData: {
-            wow: true,
-          },
-        })
-
-        const result: Expect<Equal<{ wow: boolean }, typeof data>> = true
-        return result
-      })
-    })
-
-    it('TData should have undefined in the union when initialData is NOT provided', () => {
-      doNotExecute(() => {
-        const { data } = useQuery({
-          queryKey: ['key'],
-          queryFn: () => {
-            return {
-              wow: true,
-            }
-          },
-        })
-
-        const result: Expect<Equal<{ wow: boolean } | undefined, typeof data>> =
-          true
+        const result: Expect<Equal<Data | undefined, typeof data>> = true
         return result
       })
     })

packages/react-query/src/index.ts

@@ -11,7 +11,15 @@ export { useQuery } from './useQuery'
 export { useSuspenseQuery } from './useSuspenseQuery'
 export { useSuspenseInfiniteQuery } from './useSuspenseInfiniteQuery'
 export { queryOptions } from './queryOptions'
+export type {
+  DefinedInitialDataOptions,
+  UndefinedInitialDataOptions,
+} from './queryOptions'
 export { infiniteQueryOptions } from './infiniteQueryOptions'
+export type {
+  DefinedInitialDataInfiniteOptions,
+  UndefinedInitialDataInfiniteOptions,
+} from './infiniteQueryOptions'
 export {
   QueryClientContext,
   QueryClientProvider,

packages/react-query/src/useInfiniteQuery.ts

@@ -70,11 +70,16 @@ export function useInfiniteQuery<
     TPageParam
   >,
   queryClient?: QueryClient,
-): UseInfiniteQueryResult<TData, TError> {
+): UseInfiniteQueryResult<TData, TError>
+
+export function useInfiniteQuery(
+  options: UseInfiniteQueryOptions,
+  queryClient?: QueryClient,
+) {
   return useBaseQuery(
     options,
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
     InfiniteQueryObserver as typeof QueryObserver,
     queryClient,
-  ) as UseInfiniteQueryResult<TData, TError>
+  )
 }

packages/react-query/src/useQuery.ts

@@ -40,6 +40,8 @@ export function useQuery<
 >(
   options: UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
   queryClient?: QueryClient,
-) {
+): UseQueryResult<TData, TError>
+
+export function useQuery(options: UseQueryOptions, queryClient?: QueryClient) {
   return useBaseQuery(options, QueryObserver, queryClient)
 }