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

ts

// @filename: utils.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

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

}