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.
3 Replies
Call mutation in form onSubmit event
Maybe you need map it’s schema
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.
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