Aborting Procedure Calls (v10)

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.

Globally

client.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

import { trpc } from '../utils/trpc';

function PostViewPage() {
  const { query } = useRouter();
  const postQuery = trpc.post.byId.useQuery(
    { id: query.id },
    { trpc: { abortOnUnmount: true } }
  );

  // ...
}