fix(useQueries): allow types to work with strongly typed QueryFunction + QueryKey (TanStack#3214)

Author: artysidorenko

src/react/tests/useQueries.test.tsx

@@ -18,6 +18,7 @@ import {
   QueryCache,
   QueryObserverResult,
   QueriesObserver,
+  QueryFunction,
 } from '../..'
 
 describe('useQueries', () => {
@@ -899,6 +900,62 @@ describe('useQueries', () => {
     }
   })
 
+  it('handles types for QueryFunction factory with strongly typed QueryKey', () => {
+    type QueryKeyA = ['queryA']
+    const getQueryKeyA = (): QueryKeyA => ['queryA']
+    type GetQueryFunctionA = () => QueryFunction<number, QueryKeyA>
+    const getQueryFunctionA: GetQueryFunctionA = () => async () => {
+      return 1
+    }
+    type SelectorA = (data: number) => [number, string]
+    const getSelectorA = (): SelectorA => data => [data, data.toString()]
+
+    type QueryKeyB = ['queryB', string]
+    const getQueryKeyB = (id: string): QueryKeyB => ['queryB', id]
+    type GetQueryFunctionB = () => QueryFunction<string, QueryKeyB>
+    const getQueryFunctionB: GetQueryFunctionB = () => async () => {
+      return '1'
+    }
+    type SelectorB = (data: string) => [string, number]
+    const getSelectorB = (): SelectorB => data => [data, +data]
+
+    // @ts-expect-error (Page component is not rendered)
+    // eslint-disable-next-line
+    function Page() {
+      const result = useQueries([
+        {
+          queryKey: getQueryKeyA(),
+          queryFn: getQueryFunctionA(),
+        },
+        {
+          queryKey: getQueryKeyB('id'),
+          queryFn: getQueryFunctionB(),
+        },
+      ])
+      expectType<QueryObserverResult<number, unknown>>(result[0])
+      expectType<QueryObserverResult<string, unknown>>(result[1])
+
+      const withSelector = useQueries([
+        {
+          queryKey: getQueryKeyA(),
+          queryFn: getQueryFunctionA(),
+          select: getSelectorA(),
+        },
+        {
+          queryKey: getQueryKeyB('id'),
+          queryFn: getQueryFunctionB(),
+          select: getSelectorB(),
+        },
+      ])
+      expectType<QueryObserverResult<[number, string], unknown>>(
+        withSelector[0]
+      )
+      expectType<QueryObserverResult<[string, number], unknown>>(
+        withSelector[1]
+      )
+    }
+  })
+
   it('should not change state if unmounted', async () => {
     const key1 = queryKey()
 

src/react/useQueries.ts

@@ -30,12 +30,12 @@ type GetOptions<T extends any> =
     ? UseQueryOptions<TQueryFnData>
     : // Part 3: responsible for inferring and enforcing type if no explicit parameter was provided
     T extends {
-        queryFn?: QueryFunction<infer TQueryFnData>
+        queryFn?: QueryFunction<infer TQueryFnData, infer TQueryKey>
         select: (data: any) => infer TData
       }
-    ? UseQueryOptions<TQueryFnData, unknown, TData>
-    : T extends { queryFn?: QueryFunction<infer TQueryFnData> }
-    ? UseQueryOptions<TQueryFnData>
+    ? UseQueryOptions<TQueryFnData, unknown, TData, TQueryKey>
+    : T extends { queryFn?: QueryFunction<infer TQueryFnData, infer TQueryKey> }
+    ? UseQueryOptions<TQueryFnData, unknown, TQueryFnData, TQueryKey>
     : // Fallback
       UseQueryOptions
 
@@ -56,11 +56,11 @@ type GetResults<T> =
     ? UseQueryResult<TQueryFnData>
     : // Part 3: responsible for mapping inferred type to results, if no explicit parameter was provided
     T extends {
-        queryFn?: QueryFunction<any>
+        queryFn?: QueryFunction<any, any>
         select: (data: any) => infer TData
       }
     ? UseQueryResult<TData>
-    : T extends { queryFn?: QueryFunction<infer TQueryFnData> }
+    : T extends { queryFn?: QueryFunction<infer TQueryFnData, any> }
     ? UseQueryResult<TQueryFnData>
     : // Fallback
       UseQueryResult