Aborting Procedure Calls (v10)

By default, tRPC does not cancel requests on unmount. If you want to opt into this behavior, you can provide abortOnUnmount in your configuration callback.

Globally

client.ts

import { createTRPCNext } from '@trpc/next';

export const trpc = createTRPCNext<AppRouter>({
  config() {
    return {
      // ...
      abortOnUnmount: true,
    };
  },
});

Per-request

You may also override this behavior at the request level.

client.ts

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 (...)
}