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.

note

@tanstack/react-query only supports aborting queries.

Globally​

client.ts

ts

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

tsx

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

function PostViewPage() {

const { query } = useRouter();

const postQuery = trpc.post.byId.useQuery(

`{ id: query.id },`

`{ trpc: { abortOnUnmount: true } }`

);

// ...

}