fix(types): useQueries to also handle array-params with typed QueryKey (#3267)

artysidorenko · web-flow · commit a470f4601b04 · 2022-02-06T09:33:59.000+01:00
* fix(types): handle useQueries wrappers with strongly-typed array parameters

* test(types): confirm typecheck passes without explicit type for mapped query

* test(types): add typecheck on queryFn in mapped query
diff --git a/src/react/tests/useQueries.test.tsx b/src/react/tests/useQueries.test.tsx
@@ -19,7 +19,10 @@ import {
   QueryObserverResult,
   QueriesObserver,
   QueryFunction,
+  UseQueryOptions,
+  QueryKey,
 } from '../..'
+import { EnsuredQueryKey, QueryFunctionContext } from '../../core'
 
 describe('useQueries', () => {
   const queryCache = new QueryCache()
@@ -900,7 +903,8 @@ describe('useQueries', () => {
     }
   })
 
-  it('handles types for QueryFunction factory with strongly typed QueryKey', () => {
+  it('handles strongly typed queryFn factories and useQueries wrappers', () => {
+    // QueryKey + queryFn factory
     type QueryKeyA = ['queryA']
     const getQueryKeyA = (): QueryKeyA => ['queryA']
     type GetQueryFunctionA = () => QueryFunction<number, QueryKeyA>
@@ -919,6 +923,28 @@ describe('useQueries', () => {
     type SelectorB = (data: string) => [string, number]
     const getSelectorB = (): SelectorB => data => [data, +data]
 
+    // Wrapper with strongly typed array-parameter
+    function useWrappedQueries<TQueryFnData, TError, TData, TQueryKey extends QueryKey>(
+      queries: UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>[]
+    ) {
+      return useQueries(
+        queries.map(
+          // no need to type the mapped query
+          (query) => {
+          const { queryFn: fn, queryKey: key, onError: err } = query;
+          expectType<QueryFunction<TQueryFnData, TQueryKey> | undefined>(fn)
+          return {
+            queryKey: key,
+            onError: err,
+            queryFn: (ctx: QueryFunctionContext<TQueryKey>) => {
+              expectType<EnsuredQueryKey<TQueryKey>>(ctx.queryKey)
+              return fn?.call({}, ctx);
+            }
+          }
+        })
+      )
+    }
+
     // @ts-expect-error (Page component is not rendered)
     // eslint-disable-next-line
     function Page() {
@@ -953,6 +979,14 @@ describe('useQueries', () => {
       expectType<QueryObserverResult<[string, number], unknown>>(
         withSelector[1]
       )
+
+      const withWrappedQueries = useWrappedQueries(Array(10).map(() => ({
+        queryKey: getQueryKeyA(),
+        queryFn: getQueryFunctionA(),
+        select: getSelectorA(),
+      })))
+
+      expectType<QueryObserverResult<number | undefined, unknown>[]>(withWrappedQueries);
     }
   })
 
diff --git a/src/react/useQueries.ts b/src/react/useQueries.ts
@@ -84,8 +84,8 @@ export type QueriesOptions<
   ? T
   : // If T is *some* array but we couldn't assign unknown[] to it, then it must hold some known/homogenous type!
   // use this to infer the param types in the case of Array.map() argument
-  T extends UseQueryOptions<infer TQueryFnData, infer TError, infer TData>[]
-  ? UseQueryOptions<TQueryFnData, TError, TData>[]
+  T extends UseQueryOptions<infer TQueryFnData, infer TError, infer TData, infer TQueryKey>[]
+  ? UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>[]
   : // Fallback
     UseQueryOptions[]
 
@@ -104,7 +104,7 @@ export type QueriesResults<
   ? [...Result, GetResults<Head>]
   : T extends [infer Head, ...infer Tail]
   ? QueriesResults<[...Tail], [...Result, GetResults<Head>], [...Depth, 1]>
-  : T extends UseQueryOptions<infer TQueryFnData, infer TError, infer TData>[]
+  : T extends UseQueryOptions<infer TQueryFnData, infer TError, infer TData, any>[]
   ? // Dynamic-size (homogenous) UseQueryOptions array: map directly to array of results
     UseQueryResult<unknown extends TData ? TQueryFnData : TData, TError>[]
   : // Fallback
