fix(query-core): widen QueriesObserver queries type (#7446) (#7492)

* fix(query-core): widen QueriesObserver queries type (#7446) Widen the `QueriesObserver` queries type so we can assign `UseQueryOptions` to `QueryObserverOptions`. The result from the `queryOptions` helper can now be passed to `QueriesObserver`. * chore: prettier * fix(types): QueryKey needs to default to `any`, too --------- Co-authored-by: Yannick CROISSANT <[email protected]> Co-authored-by: Dominik Dorfmeister <[email protected]>
TanStack · Jul 17, 2024 · a87c2fe · a87c2fe
1 parent 91cfc10
commit a87c2fe
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 2 deletions.
diff --git a/packages/query-core/src/queriesObserver.ts b/packages/query-core/src/queriesObserver.ts
@@ -45,7 +45,7 @@ export class QueriesObserver<
 
   constructor(
     client: QueryClient,
-    queries: Array<QueryObserverOptions>,
+    queries: Array<QueryObserverOptions<any, any, any, any, any>>,
     _options?: QueriesObserverOptions<TCombinedResult>,
   ) {
     super()

diff --git a/packages/react-query/src/__tests__/queryOptions.test-d.tsx b/packages/react-query/src/__tests__/queryOptions.test-d.tsx
@@ -1,9 +1,15 @@
 import { describe, expect, expectTypeOf, it } from 'vitest'
-import { QueryClient, dataTagSymbol, skipToken } from '@tanstack/query-core'
+import {
+  QueriesObserver,
+  QueryClient,
+  dataTagSymbol,
+  skipToken,
+} from '@tanstack/query-core'
 import { queryOptions } from '../queryOptions'
 import { useQuery } from '../useQuery'
 import { useQueries } from '../useQueries'
 import { useSuspenseQuery } from '../useSuspenseQuery'
+import type { QueryObserverResult } from '@tanstack/query-core'
 
 describe('queryOptions', () => {
   it('should not allow excess properties', () => {
@@ -169,4 +175,17 @@ describe('queryOptions', () => {
     const data = queryClient.getQueryData(options.queryKey)
     expectTypeOf(data).toEqualTypeOf<unknown>()
   })
+
+  it('should return the proper type when passed to QueriesObserver', () => {
+    const options = queryOptions({
+      queryKey: ['key'],
+      queryFn: () => Promise.resolve(5),
+    })
+
+    const queryClient = new QueryClient()
+    const queriesObserver = new QueriesObserver(queryClient, [options])
+    expectTypeOf(queriesObserver).toEqualTypeOf<
+      QueriesObserver<Array<QueryObserverResult>>
+    >()
+  })
 })