Cancelación de llamadas a procedimientos

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Por defecto, tRPC no cancela solicitudes mediante React Query. Si deseas activar este comportamiento, puedes incluir abortOnUnmount en tu configuración.

nota

@tanstack/react-query solo admite la cancelación de consultas (queries).

Globalmente

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

Por solicitud

También puedes anular este comportamiento a nivel de consulta.

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