Signin method with Nextjs and trpc returning resolver is not a function

Question

So im trying to build my register method without re-enventing nothing crazy with the create-t3-app stack with nextjs, trpc and nextauth:

export const signUpRouter = router({
  signup: publicProcedure.input(UserModel).mutation(async ({ ctx, input }) => {
    debugger;
    try {
      const { nickname, email, password } = input;

      //check duplicate users
      const checkingUsers = await ctx.prisma.user.findFirst({
        where: {
          email,
        },
      });

      if (checkingUsers) {
        return { message: "User already exists..." };
      }

      //hash password
      return await ctx.prisma.user.create({
        data: {
          nickname,
          email,
          password: await hash(password, 12),
        },
      });
    } catch (error: any) {
      console.log("error", error);
      throw new Error(error);
    }
  }),
});

export default signUpRouter;

This file is inside pages/api/auth/signup.ts Should I have this on the server part ?

I have the router on my appRouter file

export const appRouter = router({
  userLogin: userLoginRouter,
  auth: authRouter,
  signin: signInRouter,
  signup: signUpRouter,
});

And when clicking on the register button:

async function onSumitRegisterValues(values: any) {
    const options = {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(values),
    };

    await fetch("http://localhost:3000/api/auth/signup", options)
      .then((res) => res.json())
      .then((data) => {
        if (data?.ok) router.push("http://localhost:3000");
      });
  }

The values form contains nickname, email, password and cpassword to confirm password. im getting a 500 on post

Server Error TypeError: resolver is not a function

This error happened while generating the page. Any console logs will be displayed in the terminal window.

Maybe its my lack of knowledge with trpc and next but ngl, its making me want to separate my backend into something different. But since im not rushing in building this project i really want to try to figure out what i shoud be doing better.

Answer 1

Why are you using fetch instead of using your useQuery method from trpc? The whole point of trpc is that you can skip fetch and will also have type safety.

https://trpc.io/docs/useQuery