T
tRPC

❓-help

Node 20, NPM: Send form values to DB with tRPC?

PPaddy1/10/2024
Hey all, anyone in here with some tRPC experience? I have been going through YouTube video's and the doc's, it helped me for a lot of things, while still learning and trying to understand what I am actually doing.. When using the tRPC package with Kirimase I am a little overwhelmed with everything that's coming with the package, and that's great, because it looks amazing and a lot of the dirty work already seems to be done for you, this also makes me a bit clueless in the sence that I am not very sure what everything is doing. A lot of the YouTube video's I have been watching tend to differ from the already done work 'plug-and-play' Kirimase tRPC package. I see a bunch of interesting stuff in 'src/lib/api/posts', like mutations & queries. QUESTION In mutations I see what seems to be a create, update & delete, I would love to use these for my form field that I am using with shadcn/ui following their docs, using zod & react-hook-form. How do I call these "mutations" and "queries", or what do I need to do, to use these? I basically want to send my form 'values' to the database using tRPC, and later return them on a page. Any other docs, video's or anything would be super appreciated! Thank you so much! Best regards. Please ask for snippets if needed.
No description
MMini1/10/2024
Call mutation in form onSubmit event Maybe you need map it’s schema
PPaddy1/10/2024
Hey, thank you so much for your answer! How can I call the mutation exactly that's in the form component, I understand I'll put it in the onSubmit event, but I am not so sure on how to get the mutation? And sorry, what do you mean with 'map it's schema'? Please let me know, I would very appreciate your help with this. Best regards.
PPaddy1/10/2024
In my preferred use case I would like to have an api request, trpc route for example ''/api/post" in 'src/app/api/trpc/route.ts' that is being called in the onSubmit event, hopefully you understand what I mean, is there any docs where I could find this more. I was looking at this now: https://trpc.io/docs/server/adapters/nextjs#route-handlers This seems interesting but can't seem to understand how to use a mutation in here. Please let me know, I am very clueless at this point.
Next.js Adapter | tRPC
tRPC's support for Next.js is far more expansive than just an adapter. This page covers a brief summary of how to set up the adapter, but complete documentation is available here

Looking for more? Join the community!