feat: useQueries()

Author: DrJume

src/index.ts

@@ -4,9 +4,11 @@
 import {
   type InfiniteQueryPageParamsOptions,
   type QueryClient,
+  queryOptions as defineQueryOptions,
   skipToken,
   useInfiniteQuery,
   useMutation,
+  useQueries,
   useQuery,
 } from '@tanstack/vue-query'
 import {
@@ -72,11 +74,13 @@ function createVueQueryProxyDecoration<TRouter extends AnyTRPCRouter>(
     if (prop === 'query') {
       return trpc.query(joinedPath, firstArg, opts)
     }
-    if (prop === 'useQuery') {
-      const { trpc: trpcOptions, ...queryOptions } = opts
 
-      return useQuery({
-        queryKey: computed(() => getQueryKey(path, toValue(firstArg), 'query')),
+    function createQuery(
+      input: MaybeRefOrGetter<unknown>,
+      { trpcOptions, queryOptions }: { trpcOptions: any; queryOptions: any },
+    ) {
+      return defineQueryOptions({
+        queryKey: computed(() => getQueryKey(path, toValue(input), 'query')),
         queryFn: async ({ queryKey, signal }) =>
           trpc.query(joinedPath, queryKey[1]?.input, {
             signal,
@@ -85,6 +89,25 @@ function createVueQueryProxyDecoration<TRouter extends AnyTRPCRouter>(
         ...maybeToRefs(queryOptions),
       })
     }
+    if (prop === 'useQuery') {
+      const { trpc: trpcOptions, ...queryOptions } = opts
+      const input = firstArg
+
+      return useQuery(createQuery(input, { trpcOptions, queryOptions }))
+    }
+
+    if (prop === 'useQueries') {
+      const { trpc: trpcOptions, combine, shallow, ...queryOptions } = opts
+      const inputs = firstArg as MaybeRefOrGetter<unknown[]>
+
+      return useQueries({
+        queries: computed(() =>
+          toValue(inputs).map((i) => createQuery(i, { trpcOptions, queryOptions })),
+        ),
+        combine,
+        ...maybeToRefs({ shallow }),
+      })
+    }
 
     if (prop === 'invalidate') {
       return queryClient.invalidateQueries({

src/types.ts

@@ -7,6 +7,7 @@ import type {
   UseInfiniteQueryReturnType,
   UseMutationOptions,
   UseMutationReturnType,
+  UseQueriesResults,
   UseQueryOptions,
   UseQueryReturnType,
 } from '@tanstack/vue-query'
@@ -23,7 +24,7 @@ import type {
 } from '@trpc/server'
 import type { Unsubscribable } from '@trpc/server/observable'
 import type { ProcedureOptions } from '@trpc/server/unstable-core-do-not-import'
-import type { MaybeRefOrGetter, UnwrapRef } from 'vue'
+import type { MaybeRefOrGetter, Ref, UnwrapRef } from 'vue'
 
 type inferAsyncIterableYield<T> = T extends AsyncIterable<infer U> ? U : T
 
@@ -79,6 +80,26 @@ export type DecorateProcedure<
           }
         >,
       ) => UseQueryReturnType<TData, TError>
+      useQueries: <
+        TQueryFnData extends inferTransformedProcedureOutput<TRouter, TProcedure>,
+        TError extends TRPCClientErrorLike<TRouter>,
+        TData extends TQueryFnData,
+        TQueryData extends TQueryFnData,
+        TQueryKey extends QueryKey,
+        TInput extends inferProcedureInput<TProcedure>,
+        TQueries extends UseQueryOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey>,
+        TCombinedResult = UseQueriesResults<TQueries[]>,
+      >(
+        inputs: MaybeRefOrGetter<Exact<inferProcedureInput<TProcedure>, TInput>[]>,
+        opts?: MaybeRefOrGetter<
+          Omit<UnwrapRef<TQueries>, 'queryKey'> & {
+            trpc?: TRPCRequestOptions
+            queryKey?: never
+            combine?: (result: UseQueriesResults<TQueries[]>) => TCombinedResult
+            shallow?: boolean
+          }
+        >,
+      ) => Readonly<Ref<TCombinedResult>>
       query: <TInput extends inferProcedureInput<TProcedure>>(
         input: Exact<inferProcedureInput<TProcedure>, TInput>,
         opts?: ProcedureOptions,

test/basic.test.ts

@@ -1,4 +1,5 @@
 import { keepPreviousData } from '@tanstack/vue-query'
+import { until } from '@vueuse/core'
 import { describe, expect, test, vi } from 'vitest'
 import { ref } from 'vue'
 
@@ -168,3 +169,25 @@ test('useSubscription()', async () => {
     subscription.unsubscribe()
   })
 })
+
+test('useQueries()', async () => {
+  await app.runWithContext(async () => {
+    const trpc = useTRPC()
+
+    const hellos = Array.from({ length: 5 }, (_, i) => ({ name: i.toString() }))
+
+    const queries = trpc.hello.useQueries(() => hellos, {
+      suspense: true,
+      combine: (results) => {
+        return {
+          data: results.map((result) => result.data),
+          pending: results.some((result) => result.isPending),
+        }
+      },
+    })
+
+    await until(() => queries.value.pending).toBe(false)
+
+    expect(queries.value.data).toEqual(hellos.map((hello) => `Hello ${hello.name}!`))
+  })
+})

test/trpc/index.ts

@@ -19,7 +19,12 @@ export const appRouter = router({
   emptyMutation: publicProcedure.mutation(() => null),
 
   count: publicProcedure
-    .input(z.object({ max: z.number(), delayMs: z.number().optional().default(100) }))
+    .input(
+      z.object({
+        max: z.number(),
+        delayMs: z.number().optional().default(100),
+      }),
+    )
     .subscription(async function* ({ input }) {
       let i = 1
       while (i <= input.max) {