@trpc/next/skills/nextjs-pages-router/references/client-nextjs-pages-router-aborting-procedure-calls.md

The tRPC Next.js library

# Aborting Procedure Calls

> Cancel in-flight requests when a component unmounts with abortOnUnmount, globally or per request

From https://trpc.io/docs/client/nextjs/pages-router/aborting-procedure-calls

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

```ts no-check title="client.ts"
import { httpBatchLink } from '@trpc/client';
import { createTRPCNext } from '@trpc/next';
import type { AppRouter } from './server/routers/_app';

export const trpc = createTRPCNext<AppRouter>({
  config() {
    return {
      links: [
        httpBatchLink({
          url: '/api/trpc',
        }),
      ],
      abortOnUnmount: true,
    };
  },
});
```

### Per-request

You may also override this behavior at the request level.

```tsx no-check title="client.ts"
import { trpc } from './utils/trpc';
import { useRouter } from 'next/router';

function PostViewPage() {
  const id = useRouter().query.id as string;
  const postQuery = trpc.post.byId.useQuery({ id }, { trpc: { abortOnUnmount: true } });

  return null;
}
```