Skip to content
tRPC

useMutation()

On this page

Example

Backend code
server/routers/_app.ts
import { const initTRPC: TRPCBuilder<object, object>initTRPC } from '@trpc/server';
import { import zz } from 'zod';

export const 
const t: TRPCRootObject<object, object, RuntimeConfigOptions<object, object>, {
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}>
t = const initTRPC: TRPCBuilder<object, object>initTRPC.
TRPCBuilder<object, object>.create<RuntimeConfigOptions<object, object>>(opts?: RuntimeConfigOptions<object, object> | undefined): TRPCRootObject<object, object, RuntimeConfigOptions<object, object>, {
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}>
create();

export const 
const appRouter: BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    login: MutationProcedure<{
        input: {
            name: string;
        };
        output: {
            user: {
                name: string;
                role: "ADMIN";
            };
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>
appRouter = 
const t: TRPCRootObject<object, object, RuntimeConfigOptions<object, object>, {
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}>
t.
TRPCRootObject<object, object, RuntimeConfigOptions<object, object>, { ctx: object; meta: object; errorShape: DefaultErrorShape; transformer: false; }>.router: RouterBuilder
<{
    login: MutationProcedure<{
        input: {
            name: string;
        };
        output: {
            user: {
                name: string;
                role: "ADMIN";
            };
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>(_: {
    login: MutationProcedure<{
        input: {
            name: string;
        };
        output: {
            user: {
                name: string;
                role: "ADMIN";
            };
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}) => BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    login: MutationProcedure<{
        input: {
            name: string;
        };
        output: {
            user: {
                name: string;
                role: "ADMIN";
            };
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>
router({
  // Create procedure at path 'login'
  // The syntax is identical to creating queries
  
login: MutationProcedure<{
    input: {
        name: string;
    };
    output: {
        user: {
            name: string;
            role: "ADMIN";
        };
    };
    meta: object;
    errorShape: DefaultErrorShape;
}>
login: 
const t: TRPCRootObject<object, object, RuntimeConfigOptions<object, object>, {
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}>
t.TRPCRootObject<object, object, RuntimeConfigOptions<object, object>, { ctx: object; meta: object; errorShape: DefaultErrorShape; transformer: false; }>.procedure: ProcedureBuilder<object, object, object, UnsetMarker, UnsetMarker, UnsetMarker, UnsetMarker, false, DefaultErrorShape>procedure
    // using zod schema to validate and infer input values
    .
ProcedureBuilder<object, object, object, UnsetMarker, UnsetMarker, UnsetMarker, UnsetMarker, false, DefaultErrorShape>.input<z.ZodObject<{
    name: z.ZodString;
}, z.core.$strip>>(schema: z.ZodObject<{
    name: z.ZodString;
}, z.core.$strip>): ProcedureBuilder<object, object, object, {
    name: string;
}, {
    name: string;
}, UnsetMarker, UnsetMarker, false, DefaultErrorShape>
input(
      import zz.
function object<{
    name: z.ZodString;
}>(shape?: {
    name: z.ZodString;
} | undefined, params?: string | {
    error?: string | z.core.$ZodErrorMap<NonNullable<z.core.$ZodIssueUnrecognizedKeys | z.core.$ZodIssueInvalidType<unknown>>> | undefined;
    message?: string | undefined | undefined;
} | undefined): z.ZodObject<{
    name: z.ZodString;
}, z.core.$strip>
object({
        name: z.ZodStringname: import zz.function string(params?: string | z.core.$ZodStringParams): z.ZodString (+1 overload)string(),
      }),
    )
    .
ProcedureBuilder<object, object, object, { name: string; }, { name: string; }, UnsetMarker, UnsetMarker, false, DefaultErrorShape>.mutation<{
    user: {
        name: string;
        role: "ADMIN";
    };
}>(resolver: ProcedureResolver<object, object, object, {
    name: string;
}, UnsetMarker, {
    user: {
        name: string;
        role: "ADMIN";
    };
}>): MutationProcedure<{
    input: {
        name: string;
    };
    output: {
        user: {
            name: string;
            role: "ADMIN";
        };
    };
    meta: object;
    errorShape: DefaultErrorShape;
}>
mutation((
opts: ProcedureResolverOptions<object, object, object, {
    name: string;
}>
opts) => {
      // Here some login stuff would happen
      return {
        
user: {
    name: string;
    role: "ADMIN";
}
user: {
          name: stringname: 
opts: ProcedureResolverOptions<object, object, object, {
    name: string;
}>
opts.
ProcedureResolverOptions<object, object, object, { name: string; }>.input: {
    name: string;
}
input.name: stringname,
          role: "ADMIN"role: 'ADMIN' as type const = "ADMIN"const,
        },
      };
    }),
});

export type 
type AppRouter = Router<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    login: MutationProcedure<{
        input: {
            name: string;
        };
        output: {
            user: {
                name: string;
                role: "ADMIN";
            };
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>> & DecorateCreateRouterOptions<{
    login: MutationProcedure<{
        input: {
            name: string;
        };
        output: {
            user: {
                name: string;
                role: "ADMIN";
            };
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>
AppRouter = typeof 
const appRouter: BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    login: MutationProcedure<{
        input: {
            name: string;
        };
        output: {
            user: {
                name: string;
                role: "ADMIN";
            };
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>
appRouter;
import { 
const trpc: CreateTRPCReactBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    login: MutationProcedure<{
        input: {
            name: string;
        };
        output: {
            user: {
                name: string;
                role: "ADMIN";
            };
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>, unknown> & DecorateRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    login: MutationProcedure<{
        input: {
            name: string;
        };
        output: {
            user: {
                name: string;
                role: "ADMIN";
            };
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>
trpc } from '../utils/trpc';

export function function MyComponent(): React.JSX.ElementMyComponent() {
  const 
const mutation: UseTRPCMutationResult<{
    user: {
        name: string;
        role: "ADMIN";
    };
}, TRPCClientErrorLike<{
    input: {
        name: string;
    };
    output: {
        user: {
            name: string;
            role: "ADMIN";
        };
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>, {
    name: string;
}, unknown>
mutation = 
const trpc: CreateTRPCReactBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    login: MutationProcedure<{
        input: {
            name: string;
        };
        output: {
            user: {
                name: string;
                role: "ADMIN";
            };
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>, unknown> & DecorateRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    login: MutationProcedure<{
        input: {
            name: string;
        };
        output: {
            user: {
                name: string;
                role: "ADMIN";
            };
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>
trpc.
login: DecoratedMutation<{
    input: {
        name: string;
    };
    output: {
        user: {
            name: string;
            role: "ADMIN";
        };
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>
login.
useMutation: <unknown>(opts?: UseTRPCMutationOptions<{
    name: string;
}, TRPCClientErrorLike<{
    input: {
        name: string;
    };
    output: {
        user: {
            name: string;
            role: "ADMIN";
        };
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>, {
    user: {
        name: string;
        role: "ADMIN";
    };
}, unknown> | undefined) => UseTRPCMutationResult<{
    user: {
        name: string;
        role: "ADMIN";
    };
}, TRPCClientErrorLike<{
    input: {
        name: string;
    };
    output: {
        user: {
            name: string;
            role: "ADMIN";
        };
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>, {
    name: string;
}, unknown>
useMutation();

  const const handleLogin: () => voidhandleLogin = () => {
    const const name: "John Doe"name = 'John Doe';

    
const mutation: UseTRPCMutationResult<{
    user: {
        name: string;
        role: "ADMIN";
    };
}, TRPCClientErrorLike<{
    input: {
        name: string;
    };
    output: {
        user: {
            name: string;
            role: "ADMIN";
        };
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>, {
    name: string;
}, unknown>
mutation.
mutate: (variables: {
    name: string;
}, options?: MutateOptions<{
    user: {
        name: string;
        role: "ADMIN";
    };
}, TRPCClientErrorLike<{
    input: {
        name: string;
    };
    output: {
        user: {
            name: string;
            role: "ADMIN";
        };
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>, {
    name: string;
}, unknown> | undefined) => void
mutate({ name: stringname });
  };

  return (
    <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
      <React.JSX.IntrinsicElements.h1: React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>h1>Login Form</React.JSX.IntrinsicElements.h1: React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>h1>
      <React.JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>button React.DOMAttributes<HTMLButtonElement>.onClick?: React.MouseEventHandler<HTMLButtonElement> | undefinedonClick={const handleLogin: () => voidhandleLogin} React.ButtonHTMLAttributes<HTMLButtonElement>.disabled?: boolean | undefineddisabled={
const mutation: UseTRPCMutationResult<{
    user: {
        name: string;
        role: "ADMIN";
    };
}, TRPCClientErrorLike<{
    input: {
        name: string;
    };
    output: {
        user: {
            name: string;
            role: "ADMIN";
        };
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>, {
    name: string;
}, unknown>
mutation.isPending: booleanisPending}>
        Login
      </React.JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>button>

      {
const mutation: UseTRPCMutationResult<{
    user: {
        name: string;
        role: "ADMIN";
    };
}, TRPCClientErrorLike<{
    input: {
        name: string;
    };
    output: {
        user: {
            name: string;
            role: "ADMIN";
        };
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>, {
    name: string;
}, unknown>
mutation.
error: TRPCClientErrorLike<{
    input: {
        name: string;
    };
    output: {
        user: {
            name: string;
            role: "ADMIN";
        };
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}> | null
error && <React.JSX.IntrinsicElements.p: React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>p>Something went wrong! {
const mutation: TRPCHookResult & Override<MutationObserverErrorResult<{
    user: {
        name: string;
        role: "ADMIN";
    };
}, TRPCClientErrorLike<{
    input: {
        name: string;
    };
    output: {
        user: {
            name: string;
            role: "ADMIN";
        };
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>, {
    name: string;
}, unknown>, {
    mutate: UseMutateFunction<{
        user: {
            name: string;
            role: "ADMIN";
        };
    }, TRPCClientErrorLike<{
        input: {
            name: string;
        };
        output: {
            user: {
                name: string;
                role: "ADMIN";
            };
        };
        transformer: false;
        errorShape: DefaultErrorShape;
    }>, {
        name: string;
    }, unknown>;
}> & {
    ...;
}
mutation.
error: TRPCClientErrorLike<{
    input: {
        name: string;
    };
    output: {
        user: {
            name: string;
            role: "ADMIN";
        };
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>
error.TRPCClientErrorBase<DefaultErrorShape>.message: stringmessage}</React.JSX.IntrinsicElements.p: React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>p>}
    </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
  );
}