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

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
Mini
Mini131d ago
Call mutation in form onSubmit event Maybe you need map it’s schema
Paddy
Paddy131d ago
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.
Paddy
Paddy131d ago
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