I was trying to make an app using tRPC, prisma and neon database I am facing some issues

So what I wanna do is push details of a playlist into DB Here is what I have defined in my trpc/index.ts :

 createPlaylist: privateProcedure.input(
    z.object({
      playlistId: z.string(),
      description: z.string(),
      title: z.string(),
    })).mutation(async ({ ctx, input }) => {
      const { userId } = ctx;

      return await db.playlist.create({
        data: {
          userId,
          playlistId: input.playlistId,
          description: input.description,
          title: input.title,
        },
      });

 createPlaylist: privateProcedure.input(
    z.object({
      playlistId: z.string(),
      description: z.string(),
      title: z.string(),
    })).mutation(async ({ ctx, input }) => {
      const { userId } = ctx;

      return await db.playlist.create({
        data: {
          userId,
          playlistId: input.playlistId,
          description: input.description,
          title: input.title,
        },
      });

Here is how I am trying to call the api :

  interface PlaylistInput {
    playlistId: string;
    title: string;
    description: string;
  }

trpc.createPlaylist.useMutation({
  playlistId: playlistID,
  title: playlistTitle,
  description: playlistDescription,
});

  interface PlaylistInput {
    playlistId: string;
    title: string;
    description: string;
  }

trpc.createPlaylist.useMutation({
  playlistId: playlistID,
  title: playlistTitle,
  description: playlistDescription,
});

It's throwing an error which is :

Argument of type '{ playlistId: string; title: string; description: string; }' is not assignable to parameter of type 'UseTRPCMutationOptions<{ title: string; description: string; playlistId: string; }, TRPCClientErrorLike<BuildProcedure<"mutation", { _config: RootConfig<{ ctx: object; meta: object; errorShape: DefaultErrorShape; transformer: DefaultDataTransformer; }>; ... 5 more ...; _output_out: unique symbol; }, { ...; }>>, { .....'.
  Object literal may only specify known properties, and 'playlistId' does not exist in type 'UseTRPCMutationOptions<{ title: string; description: string; playlistId: string; }, TRPCClientErrorLike<BuildProcedure<"mutation", { _config: RootConfig<{ ctx: object; meta: object; errorShape: DefaultErrorShape; transformer: DefaultDataTransformer; }>; ... 5 more ...; _output_out: unique symbol; }, { ...; }>>, { .....'.ts(2345)

Argument of type '{ playlistId: string; title: string; description: string; }' is not assignable to parameter of type 'UseTRPCMutationOptions<{ title: string; description: string; playlistId: string; }, TRPCClientErrorLike<BuildProcedure<"mutation", { _config: RootConfig<{ ctx: object; meta: object; errorShape: DefaultErrorShape; transformer: DefaultDataTransformer; }>; ... 5 more ...; _output_out: unique symbol; }, { ...; }>>, { .....'.
  Object literal may only specify known properties, and 'playlistId' does not exist in type 'UseTRPCMutationOptions<{ title: string; description: string; playlistId: string; }, TRPCClientErrorLike<BuildProcedure<"mutation", { _config: RootConfig<{ ctx: object; meta: object; errorShape: DefaultErrorShape; transformer: DefaultDataTransformer; }>; ... 5 more ...; _output_out: unique symbol; }, { ...; }>>, { .....'.ts(2345)

I have no clue how to fix this, help

4 Replies

cje•7mo ago

The arguments belong in the mutate call, not when you create the mutation

vansh•7mo ago

So how exactly do I go on about fixing that? Sorry I am very new to this so I am a lil confused

cje•7mo ago

https://trpc.io/docs/client/react/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.

vansh•7mo ago

Thanks!

Gaming

Programming

I was trying to make an app using tRPC, prisma and neon database I am facing some issues