Aborting Procedures

@trpc/react-query

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

client.ts
ts
// @filename: utils.ts
import { createTRPCReact } from '@trpc/react-query';
 
export const trpc = createTRPCReact<AppRouter>();
trpc.createClient({
  // ...
  abortOnUnmount: true,
});

client.ts
ts
// @filename: utils.ts
import { createTRPCReact } from '@trpc/react-query';
 
export const trpc = createTRPCReact<AppRouter>();
trpc.createClient({
  // ...
  abortOnUnmount: true,
});

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

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

Note: @tanstack/react-query only allows aborting queries.

@trpc/client

tRPC adheres to the industry standard when it comes to aborting procedures. All you have to do is pass an AbortSignal to the query-options and then call its parent AbortController's abort method.

utils.ts
ts
// @filename: server.ts
import { createTRPCProxyClient, httpBatchLink } from '@trpc/client';
import type { AppRouter } from 'server.ts';
 
const proxy = createTRPCProxyClient<AppRouter>({
  links: [
    httpBatchLink({
      url: 'http://localhost:3000/trpc',
    }),
  ],
});
 
const ac = new AbortController();
const query = proxy.userById.query('id_bilbo', { signal: ac.signal });
 
// Cancelling
ac.abort();
 
console.log(query.status);

utils.ts
ts
// @filename: server.ts
import { createTRPCProxyClient, httpBatchLink } from '@trpc/client';
import type { AppRouter } from 'server.ts';
 
const proxy = createTRPCProxyClient<AppRouter>({
  links: [
    httpBatchLink({
      url: 'http://localhost:3000/trpc',
    }),
  ],
});
 
const ac = new AbortController();
const query = proxy.userById.query('id_bilbo', { signal: ac.signal });
 
// Cancelling
ac.abort();
 
console.log(query.status);

Note: The vanilla tRPC client allows aborting both queries and mutations