fix: issue in the query client, forgot to support input parameter

Author: arnaudpfu

example/app/page.tsx

@@ -7,6 +7,12 @@ export default async function Home() {
   const user = await serverTrpc.getUser.fetch();
   console.log({ user });
 
+  const mockOrganizationSlug = 'my-mock-org-slug';
+  const org = await serverTrpc.getOrganization.fetch({
+    'orgSlug':mockOrganizationSlug
+  });
+  console.log({ org });
+
   return (
     <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
       <main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">

example/components/client-comp.tsx

@@ -7,6 +7,14 @@ export const ClientComp: React.FC = () => {
   const user = clientTrpc.getUser.useQuery();
   console.log({ clientUser: user.data });
 
+  const mockOrganizationSlug = "my-mock-org-slug";
+  const organization = clientTrpc.getOrganization.useQuery({
+    input: {
+      orgSlug: mockOrganizationSlug,
+    },
+  });
+  console.log({ clientOrganization: organization });
+
   if (user.isLoading) {
     return <>Loading...</>;
   }

example/trpc/router.ts

@@ -16,6 +16,15 @@ interface MockUser {
   email:string,
   avatar:string
 }
+
+interface MockOrganization {
+  id: string,
+  name: string,
+  slug: string,
+  description: string,
+  memberCount: number,
+  createdAt: string
+}
 export const appRouter = ctx.router({
   getUser: ctx.endpoint.action(async ({ hello, howAreYou, request }) => {
     console.log({
@@ -61,6 +70,35 @@ export const appRouter = ctx.router({
         }, 1000);
       });
     }),
+    getOrganization: ctx.endpoint
+      .input(
+        z.object({
+          orgSlug: z.string(),
+        })
+      )
+      .action(async ({ orgSlug }, { hello, howAreYou, request }) => {
+        console.log({
+          myCustomContext: {
+            hello,
+            howAreYou,
+          },
+          nextjsRequest: request,
+          orgSlug,
+        });
+
+        return new Promise<MockOrganization>((resolve) => {
+          setTimeout(() => {
+            resolve({
+              id: "org-123",
+              name: `Organization ${orgSlug}`,
+              slug: orgSlug,
+              description: `This is a mock organization for ${orgSlug}`,
+              memberCount: 25,
+              createdAt: "2023-01-01T00:00:00.000Z",
+            });
+          }, 1000);
+        });
+      }),
 });
 
 export type AppRouter = typeof appRouter;

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@creatorem/next-trpc",
-    "version": "1.0.10",
+    "version": "1.0.11",
     "repository": {
         "type": "git",
         "url": "git+https://github.com/creatorem/next-trpc"

src/create-trpc-query-client.ts

@@ -7,26 +7,48 @@ import {
   getTrpcFetch,
 } from "./create-trpc-client";
 import type { Router, Endpoint, router } from "./core";
+import z from "zod";
 
 type TrpcClientWithQuery<R extends Router<any>> = {
   [K in keyof R]: R[K] extends Endpoint<infer Output, infer Input, any>
     ? EndpointClient<Input, Output> & {
-        useQuery: (
-          queryOptions?: Omit<
-            Parameters<typeof useQueryType>[0],
-            "queryKey" | "queryFn"
-          >
-        ) => ReturnType<
-          typeof useQueryType<Awaited<Output>, Error, Awaited<Output>, string[]>
-        >;
+        useQuery: Input extends import("zod").Schema
+          ? (
+              queryOptions: Omit<
+                Parameters<typeof useQueryType>[0],
+                "queryKey" | "queryFn"
+              > & {
+                input: z.infer<Input>;
+              }
+            ) => ReturnType<
+              typeof useQueryType<
+                Awaited<Output>,
+                Error,
+                Awaited<Output>,
+                string[]
+              >
+            >
+          : (
+              queryOptions?: Omit<
+                Parameters<typeof useQueryType>[0],
+                "queryKey" | "queryFn"
+              >
+            ) => ReturnType<
+              typeof useQueryType<
+                Awaited<Output>,
+                Error,
+                Awaited<Output>,
+                string[]
+              >
+            >;
       }
     : never;
 };
 
 export const createTrpcQueryClient = <
   R extends ReturnType<typeof router<any, Router<any>>>
 >(
-  opts: createTrpcClientOptions & {useQuery: typeof useQueryType}
+  opts: createTrpcClientOptions & { useQuery: typeof useQueryType }
 ): TrpcClientWithQuery<R> => {
   return new Proxy({} as TrpcClientWithQuery<R>, {
     get(target, prop) {
@@ -40,16 +62,21 @@ export const createTrpcQueryClient = <
             queryOptions?: Omit<
               Parameters<typeof useQueryType>[0],
               "queryKey" | "queryFn"
-            >
+            > & {
+              input?: any;
+            }
           ) => {
             const endpointName = prop.replace(/([A-Z])/g, "-$1").toLowerCase();
             return opts.useQuery({
               ...queryOptions,
               queryKey: [endpointName],
-              queryFn: getTrpcFetch({
-                endpointSlug: prop,
-                ...opts,
-              }),
+              queryFn: async () => {
+                const fetcher = getTrpcFetch({
+                  endpointSlug: prop,
+                  ...opts,
+                });
+                return await fetcher(queryOptions?.input);
+              },
             });
           },
         };