fix: 'No QueryClient set, use QueryClientProvider to set one' issue passing the useQuery hook from the consuming app

Author: arnaudpfu

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@creatorem/next-trpc",
-    "version": "1.0.6",
+    "version": "1.0.7",
     "repository": {
         "type": "git",
         "url": "git+https://github.com/creatorem/next-trpc"
@@ -62,10 +62,10 @@
         "server-only": "^0.0.1",
         "ts-jest": "^29.4.6",
         "turbo": "^2.6.3",
+        "@tanstack/react-query": "5.90.12",
         "typescript": "~5.9.2"
     },
     "peerDependencies": {
-        "@tanstack/react-query": "5.90.12",
         "next": "16.0.8",
         "zod": "^3.25.76"
     },

src/create-trpc-query-client.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { useQuery } from "@tanstack/react-query";
+import type { useQuery as useQueryType } from "@tanstack/react-query";
 import {
   type EndpointClient,
   createTrpcClientOptions,
@@ -13,11 +13,11 @@ type TrpcClientWithQuery<R extends Router<any>> = {
     ? EndpointClient<Input, Output> & {
         useQuery: (
           queryOptions?: Omit<
-            Parameters<typeof useQuery>[0],
+            Parameters<typeof useQueryType>[0],
             "queryKey" | "queryFn"
           >
         ) => ReturnType<
-          typeof useQuery<Promise<Output>, Error, Promise<Output>, string[]>
+          typeof useQueryType<Promise<Output>, Error, Promise<Output>, string[]>
         >;
       }
     : never;
@@ -26,7 +26,7 @@ type TrpcClientWithQuery<R extends Router<any>> = {
 export const createTrpcQueryClient = <
   R extends ReturnType<typeof router<any, Router<any>>>
 >(
-  opts: createTrpcClientOptions
+  opts: createTrpcClientOptions & {useQuery: typeof useQueryType}
 ): TrpcClientWithQuery<R> => {
   return new Proxy({} as TrpcClientWithQuery<R>, {
     get(target, prop) {
@@ -38,12 +38,12 @@ export const createTrpcQueryClient = <
           }),
           useQuery: (
             queryOptions?: Omit<
-              Parameters<typeof useQuery>[0],
+              Parameters<typeof useQueryType>[0],
               "queryKey" | "queryFn"
             >
           ) => {
             const endpointName = prop.replace(/([A-Z])/g, "-$1").toLowerCase();
-            return useQuery({
+            return opts.useQuery({
               ...queryOptions,
               queryKey: [endpointName],
               queryFn: getTrpcFetch({