tRPC Mutation

Hi, I don't quite understand how to pass the input when using with useMutation Server:
create: protectedProcedure
.input(
z.object({
name: z.string().min(1).max(16),
description: z.string().min(1).max(100).optional(),
balance: z.number(),
deposit_type: z.enum(["CURRENT", "CASH", "CREDIT", "OTHER"]),
})
)
.mutation(async ({ ctx, input }) => {
const deposit = await ctx.prisma.deposit.create({
data: {
name: input.name,
description: input.description,
balance: input.balance,
deposit_type: input.deposit_type,
userId: ctx.session.user.id,
},
});
return deposit;
}),
create: protectedProcedure
.input(
z.object({
name: z.string().min(1).max(16),
description: z.string().min(1).max(100).optional(),
balance: z.number(),
deposit_type: z.enum(["CURRENT", "CASH", "CREDIT", "OTHER"]),
})
)
.mutation(async ({ ctx, input }) => {
const deposit = await ctx.prisma.deposit.create({
data: {
name: input.name,
description: input.description,
balance: input.balance,
deposit_type: input.deposit_type,
userId: ctx.session.user.id,
},
});
return deposit;
}),
Client:
import { DepositForm, type DepositFormProps } from '~/components/deposit/depositForm';
import { api } from '~/utils/api';

const Deposit = () => {
const handleSubmit = (formData: DepositFormProps) => {
api.deposit.create.useMutation(
{
name: formData.name,
description: formData.description,
balance: formData.balance,
depositType: formData.depositType,
}
)
};
import { DepositForm, type DepositFormProps } from '~/components/deposit/depositForm';
import { api } from '~/utils/api';

const Deposit = () => {
const handleSubmit = (formData: DepositFormProps) => {
api.deposit.create.useMutation(
{
name: formData.name,
description: formData.description,
balance: formData.balance,
depositType: formData.depositType,
}
)
};
Solution:
api.deposit.create.useMutation is a hook so you cant use it like that it expose a mutate function, so you can use it to actually send the data to the server, something like ```ts const Deposit = () => {...
Jump to solution
5 Replies
Solution
cornflour
cornflour2y ago
api.deposit.create.useMutation is a hook so you cant use it like that it expose a mutate function, so you can use it to actually send the data to the server, something like
const Deposit = () => {
const { mutate } = api.deposit.create.useMutation()
const handleSubmit = (formData: DepositFormProps) => {
mutate({
name: formData.name
description: formData.description
balance: formData.balance
depositType: formData.depositType
})
}
}
const Deposit = () => {
const { mutate } = api.deposit.create.useMutation()
const handleSubmit = (formData: DepositFormProps) => {
mutate({
name: formData.name
description: formData.description
balance: formData.balance
depositType: formData.depositType
})
}
}
Ayato
Ayato2y ago
Ahh, thanks
Robin 🐦
Robin 🐦2y ago
Thanks, @corn flour that really wasn't clear to me. I was reading two sets of documentation for React Query and TRPC couldn't join the dots until reading your answer. Perhaps the T3 docs should be updated with description of mutations as well.
cornflour
cornflour2y ago
The doc page for tRPC on ct3a does have a mutation example here https://create.t3.gg/en/usage/trpc#inferring-errors but perhaps having an actual section on mutation similar to query in that page might be a bit clearer for beginners? i personally find the trpc doc for mutation pretty decently clear though; I didn't have trouble trying to figure that out: https://trpc.io/docs/reactjs/usemutation
useMutation() | tRPC
The hooks provided by @trpc/react-query are a thin wrapper around @tanstack/react-query. For in-depth information about options and usage patterns, refer to their docs on mutations.
Create T3 App
tRPC 🚀 Create T3 App
The best way to start a full-stack, typesafe Next.js app.
Jai
Jai2y ago
also no calling hooks inside other functions 😄
Want results from more Discord servers?
Add your server