Ruben Posts - Answer Overflow

Ruben

•Created by Ruben on 5/13/2023 in #questions

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

2 replies

Gaming

Programming