TTC
Theo's Typesafe CultRuben

Creating an update mutation with tRPC

Hi everyone, I'm trying to use an update mutation in this way: 
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: 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
K
korgko•367d ago
Hey! What you're trying to do is to call the useMutation hook itself from inside of a function, and inside your submit function call the mutate property in order to execute your mutation. Here is an example of how it should look like: 
const ExampleComponent = ({myId}) => {
  const [quantity, setQuantity] = useState(0);
  const updateBeerQuantities = api.beer.updateQuantityById.useMutation();
  
  const submitQuantity = (event: React.FormEvent<HTMLInputElement>) => {
    event.preventDefault();
    updateBeerQuantities.mutate({
      id: myId,
      quantity: quantity,
    });
  };

  return (
  <div>
    <button onClick={submitQuantity}>Send mutation</button>
  </div>
  )
}
const ExampleComponent = ({myId}) => {
  const [quantity, setQuantity] = useState(0);
  const updateBeerQuantities = api.beer.updateQuantityById.useMutation();
  
  const submitQuantity = (event: React.FormEvent<HTMLInputElement>) => {
    event.preventDefault();
    updateBeerQuantities.mutate({
      id: myId,
      quantity: quantity,
    });
  };

  return (
  <div>
    <button onClick={submitQuantity}>Send mutation</button>
  </div>
  )
}
Want results from more Discord servers?
Add your server
More Posts
Create and Download PDFI have a web app that allows users to edit a table including drag/dropping rows, change row colors, Is it possible to pass a zod schema as a prop?I have this ```ts interface Props { schema: ZodSchema; children: React.ReactNode; defaulLoading state of a `'use server'` componentIs it possible to have a loading state for e.g. a form submission using the new `use server` directiHow do you self host your projects in a vpswithout relying on any cpanel or vercel, i have a vps and i usually move the project using git and