fix(react-query): prevent type errors and improve inference for dynamic queries on useQueries, useSuspenseQueries and createQueries

packages/react-query/src/__tests__/useQueries.test.tsx

@@ -1621,4 +1621,65 @@ describe('useQueries', () => {
       ),
     )
   })
+
+  it('should return correct data for dynamic queries with mixed result types', async () => {
+    const key1 = queryKey()
+    const key2 = queryKey()
+
+    function Page() {
+      const Queries1 = {
+        get: () =>
+          queryOptions({
+            queryKey: key1,
+            queryFn: async () => {
+              await sleep(10)
+              return 1
+            },
+          }),
+      }
+      const Queries2 = {
+        get: () =>
+          queryOptions({
+            queryKey: key2,
+            queryFn: async () => {
+              await sleep(10)
+              return true
+            },
+          }),
+      }
+
+      const queries1List = [1, 2, 3].map(() => ({ ...Queries1.get() }))
+      const result = useQueries({
+        queries: [...queries1List, { ...Queries2.get() }],
+      })
+
+      expectTypeOf(result).toEqualTypeOf<
+        [
+          ...Array<UseQueryResult<number, Error>>,
+          UseQueryResult<boolean, Error>,
+        ]
+      >()
+
+      expectTypeOf(result[0]?.data).toEqualTypeOf<
+        number | boolean | undefined
+      >()
+
+      return (
+        <div>
+          <div>
+            data1: {String(result[0]?.data ?? 'null')}, data2:{' '}
+            {String(result[1]?.data ?? 'null')}, data3:{' '}
+            {String(result[2]?.data ?? 'null')}, data4:{' '}
+            {String(result[3]?.data ?? 'null')}
+          </div>
+        </div>
+      )
+    }
+
+    const rendered = renderWithClient(queryClient, <Page />)
+
+    await waitFor(() =>
+      rendered.getByText('data1: 1, data2: 1, data3: 1, data4: true'),
+    )
+  })
 })

packages/react-query/src/__tests__/useSuspenseQueries.test.tsx

@@ -4,15 +4,21 @@ import {
   beforeAll,
   describe,
   expect,
+  expectTypeOf,
   it,
   vi,
 } from 'vitest'
 import { act, fireEvent, render, waitFor } from '@testing-library/react'
 import * as React from 'react'
 import { ErrorBoundary } from 'react-error-boundary'
-import { skipToken, useSuspenseQueries, useSuspenseQuery } from '..'
+import {
+  queryOptions,
+  skipToken,
+  useSuspenseQueries,
+  useSuspenseQuery,
+} from '..'
 import { createQueryClient, queryKey, renderWithClient, sleep } from './utils'
-import type { UseSuspenseQueryOptions } from '..'
+import type { UseSuspenseQueryOptions, UseSuspenseQueryResult } from '..'
 
 type NumberQueryOptions = UseSuspenseQueryOptions<number>
 
@@ -693,4 +699,63 @@ describe('useSuspenseQueries 2', () => {
     )
     consoleErrorSpy.mockRestore()
   })
+
+  it('should return correct data for dynamic queries with mixed result types', async () => {
+    const key1 = queryKey()
+    const key2 = queryKey()
+
+    function Page() {
+      const Queries1 = {
+        get: () =>
+          queryOptions({
+            queryKey: key1,
+            queryFn: async () => {
+              await sleep(10)
+              return 1
+            },
+          }),
+      }
+      const Queries2 = {
+        get: () =>
+          queryOptions({
+            queryKey: key2,
+            queryFn: async () => {
+              await sleep(10)
+              return true
+            },
+          }),
+      }
+
+      const queries1List = [1, 2, 3].map(() => ({ ...Queries1.get() }))
+      const result = useSuspenseQueries({
+        queries: [...queries1List, { ...Queries2.get() }],
+      })
+
+      expectTypeOf(result).toEqualTypeOf<
+        [
+          ...Array<UseSuspenseQueryResult<number, Error>>,
+          UseSuspenseQueryResult<boolean, Error>,
+        ]
+      >()
+
+      expectTypeOf(result[0]?.data).toEqualTypeOf<number | boolean>()
+
+      return (
+        <React.Suspense fallback="loading...">
+          <div>
+            data1: {String(result[0]?.data ?? 'null')}, data2:{' '}
+            {String(result[1]?.data ?? 'null')}, data3:{' '}
+            {String(result[2]?.data ?? 'null')}, data4:{' '}
+            {String(result[3]?.data ?? 'null')}
+          </div>
+        </React.Suspense>
+      )
+    }
+
+    const rendered = renderWithClient(queryClient, <Page />)
+
+    await waitFor(() =>
+      rendered.getByText('data1: 1, data2: 1, data3: 1, data4: true'),
+    )
+  })
 })

packages/react-query/src/useQueries.ts

@@ -203,23 +203,19 @@ export type QueriesResults<
             [...TResults, GetUseQueryResult<Head>],
             [...TDepth, 1]
           >
-        : T extends Array<
-              UseQueryOptionsForUseQueries<
-                infer TQueryFnData,
-                infer TError,
-                infer TData,
-                any
-              >
-            >
-          ? // Dynamic-size (homogenous) UseQueryOptions array: map directly to array of results
-            Array<
-              UseQueryResult<
-                unknown extends TData ? TQueryFnData : TData,
-                unknown extends TError ? DefaultError : TError
-              >
+        : {
+            [K in keyof T]: T[K] extends UseQueryOptionsForUseQueries<
+              infer TQueryFnData,
+              infer TError,
+              infer TData,
+              any
             >
-          : // Fallback
-            Array<UseQueryResult>
+              ? UseQueryResult<
+                  unknown extends TData ? TQueryFnData : TData,
+                  unknown extends TError ? DefaultError : TError
+                >
+              : GetUseQueryResult<T[number]>
+          }
 
 export function useQueries<
   T extends Array<any>,
@@ -229,7 +225,9 @@ export function useQueries<
     queries,
     ...options
   }: {
-    queries: readonly [...QueriesOptions<T>]
+    queries:
+      | readonly [...QueriesOptions<T>]
+      | readonly [...{ [K in keyof T]: GetUseQueryOptionsForUseQueries<T[K]> }]
     combine?: (result: QueriesResults<T>) => TCombinedResult
     subscribed?: boolean
   },

packages/react-query/src/useSuspenseQueries.ts

@@ -160,30 +160,28 @@ export type SuspenseQueriesResults<
             [...TResults, GetUseSuspenseQueryResult<Head>],
             [...TDepth, 1]
           >
-        : T extends Array<
-              UseSuspenseQueryOptions<
-                infer TQueryFnData,
-                infer TError,
-                infer TData,
-                any
-              >
-            >
-          ? // Dynamic-size (homogenous) UseQueryOptions array: map directly to array of results
-            Array<
-              UseSuspenseQueryResult<
-                unknown extends TData ? TQueryFnData : TData,
-                unknown extends TError ? DefaultError : TError
-              >
+        : {
+            [K in keyof T]: T[K] extends UseSuspenseQueryOptions<
+              infer TQueryFnData,
+              infer TError,
+              infer TData,
+              any
             >
-          : // Fallback
-            Array<UseSuspenseQueryResult>
+              ? UseSuspenseQueryResult<
+                  unknown extends TData ? TQueryFnData : TData,
+                  unknown extends TError ? DefaultError : TError
+                >
+              : GetUseSuspenseQueryResult<T[number]>
+          }
 
 export function useSuspenseQueries<
   T extends Array<any>,
   TCombinedResult = SuspenseQueriesResults<T>,
 >(
   options: {
-    queries: readonly [...SuspenseQueriesOptions<T>]
+    queries:
+      | readonly [...SuspenseQueriesOptions<T>]
+      | readonly [...{ [K in keyof T]: GetUseSuspenseQueryOptions<T[K]> }]
     combine?: (result: SuspenseQueriesResults<T>) => TCombinedResult
   },
   queryClient?: QueryClient,