andreas•7d ago

public/protectedProcedure returns `any` in client usage

Environment: Node v23.3.0 pnpm Problem: hey all, i'm having trouble with defining base procedures for my app.. whenever i call a tRPC prodecure that uses a custom publicProcedure or protectedProcedure method on the client, the types on that procedure are any instead of the types returned by t.procedure. for instance, app.helloWorld.protected_getName will be any on the client, but is fully typed on the server. code in the next msg:

Solution:

Fixed! See: https://discord.com/channels/867764511159091230/1102931936416124998/1371001271229743194

Jump to solution

2 Replies

andreasOP•7d ago

right now the only workaround to this is to define all my routers directly where my AppRouter lives (i.e.:

export const rootRouter = t.router({
  app: t.router({
    helloWorld: t.router({ ... }),
    // instead of
    // helloWorld: helloWorldRouter
  }),
});

export const rootRouter = t.router({
  app: t.router({
    helloWorld: t.router({ ... }),
    // instead of
    // helloWorld: helloWorldRouter
  }),
});

here are my public/privateProcedure(s):

export const publicProcedure = t.procedure;
export const protectedProcedure = t.procedure.use((opts) => {
  const { ctx } = opts;

  if (!ctx.session) {
    throw new TRPCError({
      code: "UNAUTHORIZED",
      message: "You are not signed in.",
    });
  }

  return opts.next({ ctx });
});

export const publicProcedure = t.procedure;
export const protectedProcedure = t.procedure.use((opts) => {
  const { ctx } = opts;

  if (!ctx.session) {
    throw new TRPCError({
      code: "UNAUTHORIZED",
      message: "You are not signed in.",
    });
  }

  return opts.next({ ctx });
});

here is a router using these procedures:

export const helloWorldRouter = t.router({
  getName: publicProcedure.input(z.string().min(2)).mutation(async (opts) => {
    return HelloWorldModule.build().getName(opts);
  }),
  protected_getName: protectedProcedure
    .input(z.string().min(2))
    .mutation(async (opts) => {
      return HelloWorldModule.build().getName(opts);
    }),
});

export const helloWorldRouter = t.router({
  getName: publicProcedure.input(z.string().min(2)).mutation(async (opts) => {
    return HelloWorldModule.build().getName(opts);
  }),
  protected_getName: protectedProcedure
    .input(z.string().min(2))
    .mutation(async (opts) => {
      return HelloWorldModule.build().getName(opts);
    }),
});

here's the client code where the types are incorrectly returned as any

export default function LoginForm() {
  const router = useRouter();
  const session = authClient.useSession();

  const { app } = useTRPC();
  const getNameQuery = useMutation(app.helloWorld.getName.mutationOptions());
                                               // ^^^^
                                               // is typeof any but should be whatever type `t.procedure` is
  const protected_getNameQuery = useMutation(app.helloWorld.protected_getName.mutationOptions());
                                                            // ^^^^
                                                            // is typeof any but should be whatever type `t.procedure` is

export default function LoginForm() {
  const router = useRouter();
  const session = authClient.useSession();

  const { app } = useTRPC();
  const getNameQuery = useMutation(app.helloWorld.getName.mutationOptions());
                                               // ^^^^
                                               // is typeof any but should be whatever type `t.procedure` is
  const protected_getNameQuery = useMutation(app.helloWorld.protected_getName.mutationOptions());
                                                            // ^^^^
                                                            // is typeof any but should be whatever type `t.procedure` is

Solution

andreas•6d ago

Fixed! See: https://discord.com/channels/867764511159091230/1102931936416124998/1371001271229743194

public/protectedProcedure returns `any` in client usage

Did you find this page helpful?