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

1 Reply

korgko•2y 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>
  )
}

Gaming

Programming

Creating an update mutation with tRPC