中止过程调用

默认情况下，tRPC 不会通过 React Query 取消请求。如果你想选择此行为，你可以在配置中提供 abortOnUnmount。

¥By default, tRPC does not cancel requests via React Query. If you want to opt into this behaviour, you can provide abortOnUnmount in your configuration.

注意

@tanstack/react-query only supports aborting queries.

全局地

¥Globally

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

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

预请求

¥Per-request

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

¥You may also override this behaviour at the query level.

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