tRPC Mutation

Hi, I don't quite understand how to pass the input when using with useMutation Server:

create: protectedProcedure
    .input(
      z.object({
        name: z.string().min(1).max(16),
        description: z.string().min(1).max(100).optional(),
        balance: z.number(),
        deposit_type: z.enum(["CURRENT", "CASH", "CREDIT", "OTHER"]),
      })
    )
    .mutation(async ({ ctx, input }) => {
      const deposit = await ctx.prisma.deposit.create({
        data: {
          name: input.name,
          description: input.description,
          balance: input.balance,
          deposit_type: input.deposit_type,
          userId: ctx.session.user.id,
        },
      });
      return deposit;
    }),

create: protectedProcedure
    .input(
      z.object({
        name: z.string().min(1).max(16),
        description: z.string().min(1).max(100).optional(),
        balance: z.number(),
        deposit_type: z.enum(["CURRENT", "CASH", "CREDIT", "OTHER"]),
      })
    )
    .mutation(async ({ ctx, input }) => {
      const deposit = await ctx.prisma.deposit.create({
        data: {
          name: input.name,
          description: input.description,
          balance: input.balance,
          deposit_type: input.deposit_type,
          userId: ctx.session.user.id,
        },
      });
      return deposit;
    }),

Client:

import { DepositForm, type DepositFormProps } from '~/components/deposit/depositForm';
import { api } from '~/utils/api';

const Deposit = () => {
  const handleSubmit = (formData: DepositFormProps) => {
    api.deposit.create.useMutation(
      {
        name: formData.name,
        description: formData.description,
        balance: formData.balance,
        depositType: formData.depositType,
      }
    )
  };

import { DepositForm, type DepositFormProps } from '~/components/deposit/depositForm';
import { api } from '~/utils/api';

const Deposit = () => {
  const handleSubmit = (formData: DepositFormProps) => {
    api.deposit.create.useMutation(
      {
        name: formData.name,
        description: formData.description,
        balance: formData.balance,
        depositType: formData.depositType,
      }
    )
  };

Solution:

api.deposit.create.useMutation is a hook so you cant use it like that it expose a mutate function, so you can use it to actually send the data to the server, something like ```ts const Deposit = () => {...

Jump to solution

5 Replies

Solution

cornflour•15mo ago

api.deposit.create.useMutation is a hook so you cant use it like that it expose a mutate function, so you can use it to actually send the data to the server, something like

const Deposit = () => {
  const { mutate } = api.deposit.create.useMutation()
  const handleSubmit = (formData: DepositFormProps) => {
    mutate({
      name: formData.name
      description: formData.description
      balance: formData.balance
      depositType: formData.depositType
    })
  }
}

const Deposit = () => {
  const { mutate } = api.deposit.create.useMutation()
  const handleSubmit = (formData: DepositFormProps) => {
    mutate({
      name: formData.name
      description: formData.description
      balance: formData.balance
      depositType: formData.depositType
    })
  }
}

ayato_g•15mo ago

Ahh, thanks

rujmah•14mo ago

Thanks, @corn flour that really wasn't clear to me. I was reading two sets of documentation for React Query and TRPC couldn't join the dots until reading your answer. Perhaps the T3 docs should be updated with description of mutations as well.

cornflour•14mo ago

The doc page for tRPC on ct3a does have a mutation example here https://create.t3.gg/en/usage/trpc#inferring-errors but perhaps having an actual section on mutation similar to query in that page might be a bit clearer for beginners? i personally find the trpc doc for mutation pretty decently clear though; I didn't have trouble trying to figure that out: https://trpc.io/docs/reactjs/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.

Create T3 App

tRPC 🚀 Create T3 App

The best way to start a full-stack, typesafe Next.js app.

Jai•14mo ago

also no calling hooks inside other functions 😄

Gaming

Programming

tRPC Mutation