TTC
Theo's Typesafe CultYosif Stalin Gaming

How to sent a mutation procedure from the client

updateUserStats:protectedProcedure .input(z.object({ id:z.string().nonempty(), protein:z.number().int(), carbs:z.number().int(), fats:z.number().int(), calories:z.number().int(), })) .mutation(({ctx,input}) => { const {id,protein,carbs,fats,calories} = input; return ctx.prisma.foodStats.update({ where:{ userId:id }, data:{ protein, carbs, fats, calories } }) }) if thats the backend function how should i send a req from the client api.user.updateUserStats.useMutation({ data:{ calories:cals + formData.calories, protein:rawUserStats.protein + formData.protein, carbs:rawUserStats.carbs + formData.carbs, fats:rawUserStats.fat + formData.fat }, }) something like this
H
hutajoullach•336d ago
on client side, you have access to mutate from useMutation, so you can mutate it in your submit func. you can clear useState or do other stuff inside onSuccess, onError as well. const { mutate, isLoading } = api.user.updateUserStats.useMutation({ onSuccess: () => { do something }, onError: () => { do something }, }); const onSubmit = () => { mutate({ calories: cals + formData.calories, protein: rawUserStats.protein + formData.protein, carbs: rawUserStats.carbs + formData.carbs, fats: rawUserStats.fat + formData.fat }) }
YSG
Yosif Stalin Gaming•336d ago
Can you explain a bit more. Sorry I am new to T3, but how to actually send the data that will be used for the mutation.I mean how does mutate know to mutate user.something Also is there a docs where this is explained
D
deforestor•336d ago
that is done here: 
const onSubmit = () => {
  mutate({
    calories: cals + formData.calories,
    protein: rawUserStats.protein + formData.protein,
    carbs: rawUserStats.carbs + formData.carbs,
    fats: rawUserStats.fat + formData.fat
  })
} 
const onSubmit = () => {
  mutate({
    calories: cals + formData.calories,
    protein: rawUserStats.protein + formData.protein,
    carbs: rawUserStats.carbs + formData.carbs,
    fats: rawUserStats.fat + formData.fat
  })
}
mutate will call the procedure you made in the router. I recommend you try React Query for a day, you'll understand everything But in case you don't want to, the explanation is that React Query gives you all the tedious stuff from an API call, for example, isLoading, isError, status.code, etc. In the case of mutations, it also returns you a method (mutate) that calls your api (your tRPC procedure) with the input you declared on .input Hence why you do: 
const { mutate, isLoading } = api.user.updateUserStats.useMutation()
const { mutate, isLoading } = api.user.updateUserStats.useMutation()
and then the 
// your input in the {...}
 mutate({...})
// your input in the {...}
 mutate({...})
YSG
Yosif Stalin Gaming•336d ago
Thanks
Want results from more Discord servers?
Add your server
More Posts
Server Actions high level questions (scale, request library, exposing to other clients)**1) how are you supposed to scale a backend if your business logic is in react components?** if thiupload thing jesthow to i set up testing with jest on components that include uploadthing? [2:40 PM] seems like it keNextJS and Bare MetalWhat all features would break/may not work if I decide to deploy to NEXTjs to bare metal instead of Cloud storage solutions for collaborating on local filesI want to collaborate on .md files (via Obsidian. for developer documentaion) and video recordings wcold startsI’m having an issue with my first queries after the db going idle taking about 11s to 12s which is cAndroid emulator cannot connect to my Expo without tunnelHello, I am building an app with `create-t3-turbo` in windows 11. I keep getting the error connectis this middleware is good for longterm?hello guys, in these code snippet i want to check if user is subs and valid, but i im wondering if tBidrectional Infinite Scrolling ImplementationHi guys have you ever implemented something like this in a chat application? or any application for Is it possible to generate a github action to build a preview of a pull request in nextjs?Im looking for a way to generate preview for my nextjs project but I didnt find a way to do it that File Uploads to Local StorageI'm building a website for my brother's shop. They want an admin panel where they can add new producChange ctx.session.user values to include new ones? Bad idea?Right now when using `ctx.session.user` I get a few default options that come with t3-app. `.id`, `Next13 app-router: How to get request headers on client page comp?All my pages are client components because I want to use page transitions and need to wrap them in aCan i send a file from trcp router?I want to send a xlxs/csv file to FE (expo). Can i do this like expressJs? or do i need to first upluseSession has an empty user object {}When using the useSession hook, session.data contains `{ user: {}, expires: '2023-06-30T20:30:42.181TypeSafe external API ?I am currently communicating with an external API and after falling in love with TRPC, I would like Want to request only half of the audio file but not workingi request an audio file from my server and stream it to the browser .. on the browser i make a requeHow is realtime DB syncing accomplished without Firestore/Supabase?Hi! I've been working with Firestore for a long time now and gotten very used to the realtime db synDrag and drop library recommendation?Whats the community-favorite option right now? I saw that react-beautiful-dnd isn't being maintainedtRPC invalid_type error with ClerkHi, I have this weird issue I've been trying to resolve for a while now. This is the error in browsSave selected option on dropdownHii, I have a dropdown list that is being made from an array and a Save button. When I click the sav