Interruption des 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 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
// @filename: utils.ts
import { createTRPCNext } from '@trpc/next';
 
export const trpc = createTRPCNext<AppRouter>({
  config() {
    return {
      // ...
      abortOnUnmount: true,
    };
  },
});

client.ts
ts
// @filename: utils.ts
import { createTRPCNext } from '@trpc/next';
 
export const trpc = createTRPCNext<AppRouter>({
  config() {
    return {
      // ...
      abortOnUnmount: true,
    };
  },
});

Par requête

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

client.ts
ts
// @filename: pages/posts/[id].tsx
import { trpc } from '~/utils/trpc';
 
const PostViewPage: NextPageWithLayout = () => {
  const id = useRouter().query.id as string;
  const postQuery = trpc.post.byId.useQuery({ id }, { trpc: { abortOnUnmount: true } });
 
  return (...)
}

client.ts
ts
// @filename: pages/posts/[id].tsx
import { trpc } from '~/utils/trpc';
 
const PostViewPage: NextPageWithLayout = () => {
  const id = useRouter().query.id as string;
  const postQuery = trpc.post.byId.useQuery({ id }, { trpc: { abortOnUnmount: true } });
 
  return (...)
}