Creating an update mutation with tRPC
Hi everyone, I'm trying to use an update mutation in this way:
But when trying to call it here:
I get squiggly lines under
It seemed to me that I was supposed to use the useMutation in the same way as UseQuery, but this does not seem to work. Anyone know how this is supposed to be done? My apologies if this is a nooby question, I am quite new to web development
export const beerRouter = createTRPCRouter({
# other operations...
updateQuantityById: publicProcedure
.input(z.object({ id: z.number(), quantity: z.number() }))
.mutation(({ ctx, input }) => {
return ctx.prisma.beer.update({
where: {
id: input.id
},
data: {
quantity: input.quantity
},
})
}),
});export const beerRouter = createTRPCRouter({
# other operations...
updateQuantityById: publicProcedure
.input(z.object({ id: z.number(), quantity: z.number() }))
.mutation(({ ctx, input }) => {
return ctx.prisma.beer.update({
where: {
id: input.id
},
data: {
quantity: input.quantity
},
})
}),
});But when trying to call it here:
const submitQuantity = (event: React.FormEvent<HTMLInputElement>) => {
event.preventDefault();
api.beer.updateQuantityById.useMutation({
id: myId,
quantity: +event.currentTarget.value,
});
};const submitQuantity = (event: React.FormEvent<HTMLInputElement>) => {
event.preventDefault();
api.beer.updateQuantityById.useMutation({
id: myId,
quantity: +event.currentTarget.value,
});
};I get squiggly lines under
id: myIdid: myId saying the following: Argument of type '{ id: number; quantity: number; }' is not assignable to parameter of type 'UseTRPCMutationOptions<{ id: number; quantity: number; }, TRPCClientErrorLike<BuildProcedure<"mutation", { _config: RootConfig<{ ctx: { prisma: PrismaClient<PrismaClientOptions, never, RejectOnNotFound | RejectPerOperation | undefined>; }; meta: object; errorShape: { ...; }; transformer: typeof SuperJSON; }>; ... 5 ...'.
Object literal may only specify known properties, and 'id' does not exist in type 'UseTRPCMutationOptions<{ id: number; quantity: number; }, TRPCClientErrorLike<BuildProcedure<"mutation", { _config: RootConfig<{ ctx: { prisma: PrismaClient<PrismaClientOptions, never, RejectOnNotFound | RejectPerOperation | undefined>; }; meta: object; errorShape: { ...; }; transformer: typeof SuperJSON; }>; ... 5 ...'.Argument of type '{ id: number; quantity: number; }' is not assignable to parameter of type 'UseTRPCMutationOptions<{ id: number; quantity: number; }, TRPCClientErrorLike<BuildProcedure<"mutation", { _config: RootConfig<{ ctx: { prisma: PrismaClient<PrismaClientOptions, never, RejectOnNotFound | RejectPerOperation | undefined>; }; meta: object; errorShape: { ...; }; transformer: typeof SuperJSON; }>; ... 5 ...'.
Object literal may only specify known properties, and 'id' does not exist in type 'UseTRPCMutationOptions<{ id: number; quantity: number; }, TRPCClientErrorLike<BuildProcedure<"mutation", { _config: RootConfig<{ ctx: { prisma: PrismaClient<PrismaClientOptions, never, RejectOnNotFound | RejectPerOperation | undefined>; }; meta: object; errorShape: { ...; }; transformer: typeof SuperJSON; }>; ... 5 ...'.It seemed to me that I was supposed to use the useMutation in the same way as UseQuery, but this does not seem to work. Anyone know how this is supposed to be done? My apologies if this is a nooby question, I am quite new to web development
