useMutation()

非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

@trpc/react 提供的钩子函数是对 React Query 的轻量封装。如需深入了解配置选项和使用模式，请参考其官方文档中的变更操作。

工作方式与 react-query 的变更操作相同 - 详见其文档。

示例

Backend code

server/routers/_app.ts
tsx
import * as trpc from '@trpc/server';
import { z } from 'zod';
export const appRouter = trpc.router()
  // Create procedure at path 'login'
  // The syntax is identical to creating queries
  .mutation('login', {
    // using zod schema to validate and infer input values
    input: z
      .object({
        name: z.string(),
      })
    async resolve({ input }) {
      // Here some login stuff would happen
      return {
        user: {
          name: input.name,
          role: 'ADMIN'
        },
      };
    },
  })

server/routers/_app.ts
tsx
import * as trpc from '@trpc/server';
import { z } from 'zod';
export const appRouter = trpc.router()
  // Create procedure at path 'login'
  // The syntax is identical to creating queries
  .mutation('login', {
    // using zod schema to validate and infer input values
    input: z
      .object({
        name: z.string(),
      })
    async resolve({ input }) {
      // Here some login stuff would happen
      return {
        user: {
          name: input.name,
          role: 'ADMIN'
        },
      };
    },
  })

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>
  );
}

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>
  );
}