Skip to content
tRPC

Disabling Queries

On this page

To disable queries, you can pass skipToken as the first argument to useQuery, useInfiniteQuery, and useSubscription. This will prevent the query from being executed.

Typesafe conditional queries using skipToken

import React, { function useState<S>(initialState: S | (() => S)): [S, React.Dispatch<React.SetStateAction<S>>] (+1 overload)useState } from 'react';
import { const skipToken: typeof skipTokenskipToken } from '@tanstack/react-query';
import { 
const trpc: CreateTRPCReactBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    getUserByName: QueryProcedure<{
        input: {
            name: string;
        };
        output: {
            name: string;
            email: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>, unknown> & DecorateRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    getUserByName: QueryProcedure<{
        input: {
            name: string;
        };
        output: {
            name: string;
            email: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>
trpc } from './utils/trpc';

export function function MyComponent(): React.JSX.ElementMyComponent() {
  const [const name: string | undefinedname, const setName: React.Dispatch<React.SetStateAction<string | undefined>>setName] = useState<string | undefined>(): [string | undefined, React.Dispatch<React.SetStateAction<string | undefined>>] (+1 overload)useState<string | undefined>();

  const 
const result: UseTRPCQueryResult<{
    name: string;
    email: string;
}, TRPCClientErrorLike<{
    input: {
        name: string;
    };
    output: {
        name: string;
        email: string;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>>
result = 
const trpc: CreateTRPCReactBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    getUserByName: QueryProcedure<{
        input: {
            name: string;
        };
        output: {
            name: string;
            email: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>, unknown> & DecorateRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    getUserByName: QueryProcedure<{
        input: {
            name: string;
        };
        output: {
            name: string;
            email: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>
trpc.
getUserByName: DecoratedQuery<{
    input: {
        name: string;
    };
    output: {
        name: string;
        email: string;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>
getUserByName.
useQuery: ProcedureUseQuery
<{
    name: string;
    email: string;
}, {
    name: string;
    email: string;
}>(input: typeof skipToken | {
    name: string;
}, opts?: UseTRPCQueryOptions<{
    name: string;
    email: string;
}, {
    name: string;
    email: string;
}, TRPCClientErrorLike<{
    input: {
        name: string;
    };
    output: {
        name: string;
        email: string;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>, {
    name: string;
    email: string;
}> | undefined) => UseTRPCQueryResult<{
    name: string;
    email: string;
}, TRPCClientErrorLike<{
    input: {
        name: string;
    };
    output: {
        name: string;
        email: string;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>> (+1 overload)
useQuery(const name: string | undefinedname ? { name: stringname: const name: stringname } : const skipToken: typeof skipTokenskipToken);

  return (
    <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>{
const result: UseTRPCQueryResult<{
    name: string;
    email: string;
}, TRPCClientErrorLike<{
    input: {
        name: string;
    };
    output: {
        name: string;
        email: string;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>>
result.
data: {
    name: string;
    email: string;
} | undefined
data?.name: string | undefinedname}</React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
  );
}