Skip to main content
Version: 10.x

Aborting Procedure Calls

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