中止过程调用

非官方测试版翻译

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

默认情况下，tRPC 不会通过 React Query 取消请求。如需启用该行为，可在配置中提供 abortOnUnmount 选项。

备注

@tanstack/react-query 仅支持中止查询（queries）。

全局设置

client.ts
ts
import { createTRPCReact } from '@trpc/react-query';
import type { AppRouter } from './server';
 
export const trpc = createTRPCReact<AppRouter>({
  abortOnUnmount: true,
});

client.ts
ts
import { createTRPCReact } from '@trpc/react-query';
import type { AppRouter } from './server';
 
export const trpc = createTRPCReact<AppRouter>({
  abortOnUnmount: true,
});

按请求设置

你也可以在查询级别覆盖此行为。

pages/post/[id].tsx
tsx
import { trpc } from '../utils/trpc';
 
function PostViewPage() {
  const { query } = useRouter();
  const postQuery = trpc.post.byId.useQuery(
    { id: query.id },
    { trpc: { abortOnUnmount: true } }
  );
 
  // ...
}

pages/post/[id].tsx
tsx
import { trpc } from '../utils/trpc';
 
function PostViewPage() {
  const { query } = useRouter();
  const postQuery = trpc.post.byId.useQuery(
    { id: query.id },
    { trpc: { abortOnUnmount: true } }
  );
 
  // ...
}