Interrompre les appels de procédure

Traduction Bêta Non Officielle

Cette page a été traduite par PageTurner AI (bêta). Non approuvée officiellement par le projet. Vous avez trouvé une erreur ? Signaler un problème →

Par défaut, tRPC n'annule pas les requêtes via React Query. Si vous souhaitez activer ce comportement, vous pouvez fournir abortOnUnmount dans votre configuration.

note

@tanstack/react-query ne prend en charge que l'annulation des requêtes (queries).

Globalement

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

Par requête

Vous pouvez également surcharger ce comportement au niveau de la requête.

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