Annulation des appels de procédures

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 lors du démontage des composants. Si vous souhaitez activer ce comportement, vous pouvez fournir abortOnUnmount dans votre callback de configuration.

Globalement

client.ts
ts
import { httpBatchLink } from '@trpc/client';
import { createTRPCNext } from '@trpc/next';
import type { AppRouter } from './server/routers/_app';
 
export const trpc = createTRPCNext<AppRouter>({
  config() {
    return {
      links: [
        httpBatchLink({
          url: '/api/trpc',
        }),
      ],
      abortOnUnmount: true,
    };
  },
});

client.ts
ts
import { httpBatchLink } from '@trpc/client';
import { createTRPCNext } from '@trpc/next';
import type { AppRouter } from './server/routers/_app';
 
export const trpc = createTRPCNext<AppRouter>({
  config() {
    return {
      links: [
        httpBatchLink({
          url: '/api/trpc',
        }),
      ],
      abortOnUnmount: true,
    };
  },
});

Par requête

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

client.ts
tsx
import { trpc } from './utils/trpc';
import { useRouter } from 'next/router';
 
function PostViewPage() {
  const id = useRouter().query.id as string;
  const postQuery = trpc.post.byId.useQuery({ id }, { trpc: { abortOnUnmount: true } });
 
  return null;
}

client.ts
tsx
import { trpc } from './utils/trpc';
import { useRouter } from 'next/router';
 
function PostViewPage() {
  const id = useRouter().query.id as string;
  const postQuery = trpc.post.byId.useQuery({ id }, { trpc: { abortOnUnmount: true } });
 
  return null;
}