feat(vue-query): allow to pass queryClient directly in useQueries options (#4625)

* feat(vue-query): allow to pass queryClient directly in useQueries options

* chore: fix formatting

* fix: remove deprecation message in production

Co-authored-by: Dominik Dorfmeister <[email protected]>

Author: DamianOsipiuk

packages/vue-query/src/__tests__/useQueries.test.ts

@@ -7,6 +7,8 @@ import {
   getSimpleFetcherWithReturnData,
 } from './test-utils'
 import { useQueries } from '../useQueries'
+import { useQueryClient } from '../useQueryClient'
+import { QueryClient } from '../queryClient'
 
 jest.mock('../useQueryClient')
 
@@ -190,4 +192,43 @@ describe('useQueries', () => {
       },
     ])
   })
+
+  test('should use queryClient provided via options', async () => {
+    const queryClient = new QueryClient()
+    const queries = [
+      {
+        queryKey: ['key41'],
+        queryFn: simpleFetcher,
+      },
+      {
+        queryKey: ['key42'],
+        queryFn: simpleFetcher,
+      },
+    ]
+
+    useQueries({ queries, queryClient })
+    await flushPromises()
+
+    expect(useQueryClient).toHaveBeenCalledTimes(0)
+  })
+
+  test('should use queryClient provided via query options', async () => {
+    const queryClient = new QueryClient()
+    const queries = [
+      {
+        queryKey: ['key41'],
+        queryFn: simpleFetcher,
+        queryClient,
+      },
+      {
+        queryKey: ['key42'],
+        queryFn: simpleFetcher,
+      },
+    ]
+
+    useQueries({ queries })
+    await flushPromises()
+
+    expect(useQueryClient).toHaveBeenCalledTimes(0)
+  })
 })

packages/vue-query/src/useQueries.ts

@@ -135,8 +135,10 @@ type UseQueriesOptionsArg<T extends any[]> = readonly [...UseQueriesOptions<T>]
 
 export function useQueries<T extends any[]>({
   queries,
+  queryClient: queryClientInjected,
 }: {
   queries: Ref<UseQueriesOptionsArg<T>> | UseQueriesOptionsArg<T>
+  queryClient?: QueryClient
 }): Readonly<UseQueriesResults<T>> {
   const unreffedQueries = computed(
     () => cloneDeepUnref(queries) as UseQueriesOptionsArg<T>,
@@ -146,7 +148,19 @@ export function useQueries<T extends any[]>({
   const optionsQueryClient = unreffedQueries.value[0]?.queryClient as
     | QueryClient
     | undefined
-  const queryClient = optionsQueryClient ?? useQueryClient(queryClientKey)
+  const queryClient =
+    queryClientInjected ?? optionsQueryClient ?? useQueryClient(queryClientKey)
+  if (
+    process.env.NODE_ENV !== 'production' &&
+    (queryClientKey || optionsQueryClient)
+  ) {
+    queryClient
+      .getLogger()
+      .error(
+        `Providing queryClient to individual queries in useQueries has been deprecated and will be removed in the next major version. You can still pass queryClient as an option directly to useQueries hook.`,
+      )
+  }
+
   const defaultedQueries = computed(() =>
     unreffedQueries.value.map((options) => {
       const defaulted = queryClient.defaultQueryOptions(options)