Aborting Procedure Calls (v11)

By default, tRPC does not cancel requests via React Query. If you want to opt into this behavior, you can provide abortOnUnmount in your configuration.

Globally

client.ts

import { function createTRPCReact<TRouter extends AnyRouter, TSSRContext = unknown>(opts?: CreateTRPCReactOptions<TRouter>): CreateTRPCReact<TRouter, TSSRContext>createTRPCReact } from '@trpc/react-query';
import type { type AppRouter = Router<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        byId: QueryProcedure<{
            input: {
                id: string;
            };
            output: {
                id: string;
                title: string;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>> & DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        byId: QueryProcedure<{
            input: {
                id: string;
            };
            output: {
                id: string;
                title: string;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>AppRouter } from './server';

export const const trpc: CreateTRPCReactBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        byId: QueryProcedure<{
            input: {
                id: string;
            };
            output: {
                id: string;
                title: string;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>, unknown> & DecorateRouterRecord<...>trpc = createTRPCReact<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        byId: QueryProcedure<{
            input: {
                id: string;
            };
            output: {
                id: string;
                title: string;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>, unknown>(opts?: CreateTRPCReactOptions<...> | undefined): CreateTRPCReactBase<...> & DecorateRouterRecord<...>createTRPCReact<type AppRouter = Router<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        byId: QueryProcedure<{
            input: {
                id: string;
            };
            output: {
                id: string;
                title: string;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>> & DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        byId: QueryProcedure<{
            input: {
                id: string;
            };
            output: {
                id: string;
                title: string;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>AppRouter>({
  CreateTRPCReactOptions<BuiltRouter<{ ctx: object; meta: object; errorShape: DefaultErrorShape; transformer: false; }, DecorateCreateRouterOptions<{ post: BuiltRouter<{ ctx: object; meta: object; errorShape: DefaultErrorShape; transformer: false; }, DecorateCreateRouterOptions<...>>; }>>>.abortOnUnmount?: boolean | undefinedabortOnUnmount: true,
});

Per-request

You may also override this behavior at the query level.

pages/post/[id].tsx

import { const trpc: CreateTRPCReactBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        byId: QueryProcedure<{
            input: {
                id: string;
            };
            output: {
                id: string;
                title: string;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>, unknown> & DecorateRouterRecord<...>trpc } from '../utils/trpc';

function function PostViewPage(): voidPostViewPage() {
  const { const query: anyquery } = const useRouter: anyuseRouter();
  const const postQuery: UseTRPCQueryResult<{
    id: string;
    title: string;
}, TRPCClientErrorLike<{
    input: {
        id: string;
    };
    output: {
        id: string;
        title: string;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>>postQuery = const trpc: CreateTRPCReactBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        byId: QueryProcedure<{
            input: {
                id: string;
            };
            output: {
                id: string;
                title: string;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>, unknown> & DecorateRouterRecord<...>trpc.post: DecorateRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    byId: QueryProcedure<{
        input: {
            id: string;
        };
        output: {
            id: string;
            title: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>post.byId: DecoratedQuery<{
    input: {
        id: string;
    };
    output: {
        id: string;
        title: string;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>byId.useQuery: ProcedureUseQuery
<{
    id: string;
    title: string;
}, {
    id: string;
    title: string;
}>(input: {
    id: string;
} | unique symbol, opts?: UseTRPCQueryOptions<{
    id: string;
    title: string;
}, {
    id: string;
    title: string;
}, TRPCClientErrorLike<{
    input: {
        id: string;
    };
    output: {
        id: string;
        title: string;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>, {
    id: string;
    title: string;
}> | undefined) => UseTRPCQueryResult<{
    id: string;
    title: string;
}, TRPCClientErrorLike<{
    input: {
        id: string;
    };
    output: {
        id: string;
        title: string;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>> (+1 overload)useQuery(
    { id: stringid: const query: anyquery.id },
    { TRPCUseQueryBaseOptions.trpc?: TRPCReactRequestOptions | undefinedtrpc: { TRPCReactRequestOptions.abortOnUnmount?: boolean | undefinedabortOnUnmount: true } }
  );

  // ...
}