tsx

import { trpc } from '../utils/trpc';

export function MyComponent() {

// This can either be a tuple ['login'] or string 'login'

const mutation = trpc.useMutation(['login']);

const handleLogin = async () => {

`const name = 'John Doe';`

`mutation.mutate({ name });`

};

return (

`<div>`

  `<h1>Login Form</h1>`

  `<button onClick={handleLogin} disabled={mutation.isLoading}>`

    `Login`

  `</button>`

  `{mutation.error && <p>Something went wrong! {mutation.error.message}</p>}`

`</div>`

);

}