TTC
Theo's Typesafe Cult•15mo ago
vansh

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
cje•15mo ago
The arguments belong in the mutate call, not when you create the mutation
vansh
vanshOP•15mo 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
cje•15mo 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
vanshOP•15mo ago
Thanks!

Did you find this page helpful?