@trpc/next
Version:
49 lines (35 loc) • 1.49 kB
Markdown
> 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
> [!WARNING] Deprecated
> The Next.js Pages Router integration (`@trpc/next`) is deprecated in favor of the [TanStack React Query integration](https://trpc.io/docs/client/tanstack-react-query) (`@trpc/tanstack-react-query`). To use it with Next.js, follow [Set up with Next.js App Router](https://trpc.io/docs/client/nextjs/app-router-setup).
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,
};
},
});
```
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;
}
```