Theo's Typesafe Cult•2y ago

trpc first callH

Hi there! I'm trying to create my first trpc route, trying to copy the example route 1. Define a router in src/server/trpc/router/route_name; 2. Import and register the router in src/tprc/router/_app 3. import the router into the component from src/utils/trpc"; 4. Call the registered route 1, url router

export const urlRouter = router({
  create: publicProcedure.input(urlFormSchema).query(async () => {
    console.log("RUNNING CREATE URL");
  }),
...

export const urlRouter = router({
  create: publicProcedure.input(urlFormSchema).query(async () => {
    console.log("RUNNING CREATE URL");
  }),
...

2. _app

export const appRouter = router({
  urls: urlRouter,
});

export const appRouter = router({
  urls: urlRouter,
});

3. component

    trpc.urls.create();

    trpc.urls.create();

4. ERROR in the component

Unhandled Runtime Error
TypeError: hooks[lastArg] is not a function

Unhandled Runtime Error
TypeError: hooks[lastArg] is not a function

Any idea why im getting this error? is urls not registered correctly or?

74 Replies

fotofloOP•2y ago

looks like the route is importing correctly

rocawear•2y ago

You have input on your router but you are not passing any input when you are calling it

fotofloOP•2y ago

fotofloOP•2y ago

like this right?

fotofloOP•2y ago

fotofloOP•2y ago

Thank you @rocawear

rocawear•2y ago

On your server return "running create url" and on your call log the result

fotofloOP•2y ago

im feeling that's the error too but cant figure out how to call it

fotofloOP•2y ago

same error

Piotrek•2y ago

You have to write the component differently

fotofloOP•2y ago

never gets to the retun statement (or the console log)

Piotrek•2y ago

trpc creates hooks you than have to use useMutation and .mutate() on the hook

fotofloOP•2y ago

ooo?

Piotrek•2y ago

Above the oSubmit function write:

const { mutate } = trpc.urls.create.useMutation();

const { mutate } = trpc.urls.create.useMutation();

and use the mutate function in onSubmit method

rocawear•2y ago

Snippet from my project:

  const mutation = trpc.auth.register.useMutation({
    onError: (e) => setErrorMessage(e.message),
    onSuccess: () => router.push("/login"),
  });

  const mutation = trpc.auth.register.useMutation({
    onError: (e) => setErrorMessage(e.message),
    onSuccess: () => router.push("/login"),
  });

 const onSubmit: SubmitHandler<IRegister> = async (data) => {
    await mutation.mutateAsync(data);
  };

 const onSubmit: SubmitHandler<IRegister> = async (data) => {
    await mutation.mutateAsync(data);
  };

fotofloOP•2y ago

rocawear•2y ago

You need to use useQuery instead since you are not mutating

Piotrek•2y ago

don't use query change api

rocawear•2y ago

But since you should mutate you should change your query to mutate

Piotrek•2y ago

from .query to .mutation exactly

rocawear•2y ago

https://github.com/ruhap/t3-credentials/blob/main/src/components/form/RegisterForm.tsx I drop this here if it helps you

fotofloOP•2y ago

fotofloOP•2y ago

BOOOM 🔥 thank you!

rocawear•2y ago

Lets go 🙂 !

Piotrek•2y ago

gl with your project 🔥

fotofloOP•2y ago

thank you! hey one more question while ive got you guys this public procedure doesnt check auth and there's a private procedure that does, is that correct?

Piotrek•2y ago

yes, you should have procedure called protectedProcedure or sth like that it gets session from next auth

fotofloOP•2y ago

boom

fotofloOP•2y ago

fotofloOP•2y ago

awesome thank you!

Piotrek•2y ago

it also assigns your session to ctx.session if I'm not mistaken

fotofloOP•2y ago

yes its there

Piotrek•2y ago

and you can use it to get info of your authed user

fotofloOP•2y ago

fotofloOP•2y ago

and prisma is there commiting!

Piotrek•2y ago

nice, gl 😄

fotofloOP•2y ago

cheers mate ok im back! wtf! the ssession.user doesn't have an id? @Piotrek is this default? does it get stripped somewhere by ct3a?

Piotrek•2y ago

it should have one, it's assigned in here: https://create.t3.gg/en/usage/next-auth#inclusion-of-userid-on-the-session

Create T3 App

NextAuth.js 🚀 Create T3 App

The best way to start a full-stack, typesafe Next.js app.

Piotrek•2y ago

see if you have this code there's a small chance you used older version of ct3a by not adding @latest when initializing it, but most of the versions had the id inclusion anyway so idk

fotofloOP•2y ago

i dont think i do

fotofloOP•2y ago

Piotrek•2y ago

it's not in trpc it's inside of the next auth handler

fotofloOP•2y ago

just add that file

Piotrek•2y ago

where do you have your nextAuth initializer? config*?

fotofloOP•2y ago

this one?

Piotrek•2y ago

yep go there and check for the session callback

fotofloOP•2y ago

looks like its there

fotofloOP•2y ago

and it's on the ytpe type

fotofloOP•2y ago

Piotrek•2y ago

why is your callbacks underlined? what's the error?

fotofloOP•2y ago

but its not there in the trpc Router is there a way to show the whole thing in vscode?

Piotrek•2y ago

what thing?

fotofloOP•2y ago

fotofloOP•2y ago

the whole error

rocawear•2y ago

https://github.com/ruhap/t3-credentials/blob/main/src/types/next-auth.d.ts https://github.com/ruhap/t3-credentials/blob/main/src/pages/api/auth/%5B...nextauth%5D.ts#L21

Piotrek•2y ago

i'm not sure

fotofloOP•2y ago

fotofloOP•2y ago

does this answer that question? what is the callbacks error?

Piotrek•2y ago

it seems like it has to be token.id as string not user.id 🤷‍♂️ maybe there was some change in nextAuth or you're using jwt

rocawear•2y ago

Actually no, I am using jwt. Sorry Bad example

Piotrek•2y ago

@fotoflo are you using jwt there? or default config

fotofloOP•2y ago

no im using prisma

rocawear•2y ago

With discord auth?

fotofloOP•2y ago

rocawear•2y ago

https://create.t3.gg/en/usage/next-auth#inclusion-of-userid-on-the-session

fotofloOP•2y ago

i dopped a debugger on that session callback and logged in and out and it didnt stop at the breakpoint @rocawear i have that code in my session callback already ... oh i have something dumb in there lol i had the callbacks property defined twice oops resolved tahnk you ... i dumb but now i know how this works

fotofloOP•2y ago

fotofloOP•2y ago

thank you @Piotrek and @rocawear !

Gaming

Programming

trpc first callH