TanStack React Query (v11)

Quick example query

import { function useQuery<TQueryFnData = unknown, TError = Error, TData = TQueryFnData, TQueryKey extends QueryKey = readonly unknown[]>(options: DefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>, queryClient?: QueryClient): DefinedUseQueryResult<TData, TError> (+2 overloads)useQuery } from '@tanstack/react-query';
import { const useTRPC: () => TRPCOptionsProxy<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    greeting: QueryProcedure<{
        input: {
            name: string;
        };
        output: `Hello ${string}`;
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>, {
    keyPrefix: false;
}>useTRPC } from './trpc';

function function Users(): voidUsers() {
  const const trpc: TRPCOptionsProxy<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    greeting: QueryProcedure<{
        input: {
            name: string;
        };
        output: `Hello ${string}`;
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>, {
    keyPrefix: false;
}>trpc = function useTRPC(): TRPCOptionsProxy<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    greeting: QueryProcedure<{
        input: {
            name: string;
        };
        output: `Hello ${string}`;
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>, {
    keyPrefix: false;
}>useTRPC();

  const const greetingQuery: UseQueryResult<`Hello ${string}`, TRPCClientErrorLike<{
    transformer: false;
    errorShape: DefaultErrorShape;
}>>greetingQuery = useQuery<`Hello ${string}`, TRPCClientErrorLike<{
    transformer: false;
    errorShape: DefaultErrorShape;
}>, `Hello ${string}`, TRPCQueryKeyWithoutPrefix>(options: UndefinedInitialDataOptions<`Hello ${string}`, TRPCClientErrorLike<{
    transformer: false;
    errorShape: DefaultErrorShape;
}>, `Hello ${string}`, TRPCQueryKeyWithoutPrefix>, queryClient?: QueryClient): UseQueryResult<`Hello ${string}`, TRPCClientErrorLike<{
    transformer: false;
    errorShape: DefaultErrorShape;
}>> (+2 overloads)useQuery(const trpc: TRPCOptionsProxy<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    greeting: QueryProcedure<{
        input: {
            name: string;
        };
        output: `Hello ${string}`;
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>, {
    keyPrefix: false;
}>trpc.greeting: DecorateQueryProcedure<{
    input: {
        name: string;
    };
    output: `Hello ${string}`;
    transformer: false;
    errorShape: DefaultErrorShape;
    featureFlags: {
        keyPrefix: false;
    };
}> & Record<string, never>greeting.DecorateQueryProcedure<{ input: { name: string; }; output: `Hello ${string}`; transformer: false; errorShape: DefaultErrorShape; featureFlags: { keyPrefix: false; }; }>.queryOptions: TRPCQueryOptions
<`Hello ${string}`, `Hello ${string}`>(input: {
    name: string;
}, opts?: UnusedSkipTokenTRPCQueryOptionsIn<`Hello ${string}`, `Hello ${string}`, TRPCClientErrorLike<{
    transformer: false;
    errorShape: DefaultErrorShape;
}>, {
    keyPrefix: false;
}> | undefined) => UnusedSkipTokenTRPCQueryOptionsOut<`Hello ${string}`, `Hello ${string}`, TRPCClientErrorLike<{
    transformer: false;
    errorShape: DefaultErrorShape;
}>, {
    keyPrefix: false;
}> (+2 overloads)queryOptions({ name: stringname: 'Jerry' }));

  // greetingQuery.data === 'Hello Jerry'
}

The philosophy of this client is to provide thin and type-safe factories which work natively and type-safely with Tanstack React Query. This means just by following the autocompletes the client gives you, you can focus on building just with the knowledge the TanStack React Query docs provide.

export default function function Basics(): nullBasics() {
  const const trpc: TRPCOptionsProxy<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    path: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        to: BuiltRouter<{
            ctx: object;
            meta: object;
            errorShape: DefaultErrorShape;
            transformer: false;
        }, DecorateCreateRouterOptions<{
            query: QueryProcedure<{
                input: {
                    id?: string | undefined;
                } | undefined;
                output: string;
                meta: object;
                errorShape: DefaultErrorShape;
            }>;
            mutation: MutationProcedure<{
                input: void;
                output: string;
                meta: object;
                errorShape: DefaultErrorShape;
            }>;
        }>>;
    }>>;
}>>, {
    ...;
}>trpc = function useTRPC(): TRPCOptionsProxy<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    path: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        to: BuiltRouter<{
            ctx: object;
            meta: object;
            errorShape: DefaultErrorShape;
            transformer: false;
        }, DecorateCreateRouterOptions<{
            query: QueryProcedure<{
                input: {
                    id?: string | undefined;
                } | undefined;
                output: string;
                meta: object;
                errorShape: DefaultErrorShape;
            }>;
            mutation: MutationProcedure<{
                input: void;
                output: string;
                meta: object;
                errorShape: DefaultErrorShape;
            }>;
        }>>;
    }>>;
}>>, {
    ...;
}>useTRPC();
  const const queryClient: QueryClientqueryClient = function useQueryClient(queryClient?: QueryClient): QueryClientuseQueryClient();

  // Create QueryOptions which can be passed to query hooks
  const const myQueryOptions: UnusedSkipTokenTRPCQueryOptionsOut<string, string, TRPCClientErrorLike<{
    transformer: false;
    errorShape: DefaultErrorShape;
}>, {
    ...;
}>myQueryOptions = const trpc: TRPCOptionsProxy<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    path: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        to: BuiltRouter<{
            ctx: object;
            meta: object;
            errorShape: DefaultErrorShape;
            transformer: false;
        }, DecorateCreateRouterOptions<{
            query: QueryProcedure<{
                input: {
                    id?: string | undefined;
                } | undefined;
                output: string;
                meta: object;
                errorShape: DefaultErrorShape;
            }>;
            mutation: MutationProcedure<{
                input: void;
                output: string;
                meta: object;
                errorShape: DefaultErrorShape;
            }>;
        }>>;
    }>>;
}>>, {
    ...;
}>trpc.path: DecoratedRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    to: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        query: QueryProcedure<{
            input: {
                id?: string | undefined;
            } | undefined;
            output: string;
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        mutation: MutationProcedure<{
            input: void;
            output: string;
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>, {
    ...;
}> & DecorateRouterKeyable<...>path.to: DecoratedRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    query: QueryProcedure<{
        input: {
            id?: string | undefined;
        } | undefined;
        output: string;
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
    mutation: MutationProcedure<{
        input: void;
        output: string;
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>, {
    ...;
}> & DecorateRouterKeyable<...>to.query: DecorateQueryProcedure<{
    input: void | {
        id?: string | undefined;
    } | undefined;
    output: string;
    transformer: false;
    errorShape: DefaultErrorShape;
    featureFlags: {
        keyPrefix: false;
    };
}> & Record<string, never>query.DecorateQueryProcedure<{ input: void | { id?: string | undefined; } | undefined; output: string; transformer: false; errorShape: DefaultErrorShape; featureFlags: { keyPrefix: false; }; }>.queryOptions: TRPCQueryOptions
<string, string>(input: void | {
    id?: string | undefined;
} | undefined, opts?: UnusedSkipTokenTRPCQueryOptionsIn<string, string, TRPCClientErrorLike<{
    transformer: false;
    errorShape: DefaultErrorShape;
}>, {
    keyPrefix: false;
}> | undefined) => UnusedSkipTokenTRPCQueryOptionsOut<string, string, TRPCClientErrorLike<{
    transformer: false;
    errorShape: DefaultErrorShape;
}>, {
    keyPrefix: false;
}> (+2 overloads)queryOptions({ /** inputs */ })
  const const myQuery: UseQueryResult<string, TRPCClientErrorLike<{
    transformer: false;
    errorShape: DefaultErrorShape;
}>>myQuery = useQuery<string, TRPCClientErrorLike<{
    transformer: false;
    errorShape: DefaultErrorShape;
}>, string, TRPCQueryKeyWithoutPrefix>(options: UndefinedInitialDataOptions<string, TRPCClientErrorLike<{
    transformer: false;
    errorShape: DefaultErrorShape;
}>, string, TRPCQueryKeyWithoutPrefix>, queryClient?: QueryClient): UseQueryResult<string, TRPCClientErrorLike<{
    transformer: false;
    errorShape: DefaultErrorShape;
}>> (+2 overloads)useQuery(const myQueryOptions: UnusedSkipTokenTRPCQueryOptionsOut<string, string, TRPCClientErrorLike<{
    transformer: false;
    errorShape: DefaultErrorShape;
}>, {
    ...;
}>myQueryOptions)
  // or:
  // useSuspenseQuery(myQueryOptions)
  // useInfiniteQuery(myQueryOptions)

  // Create MutationOptions which can be passed to useMutation
  const const myMutationOptions: TRPCMutationOptionsOut<void, TRPCClientErrorLike<{
    input: void;
    output: string;
    transformer: false;
    errorShape: DefaultErrorShape;
    featureFlags: {
        keyPrefix: false;
    };
}>, string, unknown, {
    ...;
}>myMutationOptions = const trpc: TRPCOptionsProxy<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    path: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        to: BuiltRouter<{
            ctx: object;
            meta: object;
            errorShape: DefaultErrorShape;
            transformer: false;
        }, DecorateCreateRouterOptions<{
            query: QueryProcedure<{
                input: {
                    id?: string | undefined;
                } | undefined;
                output: string;
                meta: object;
                errorShape: DefaultErrorShape;
            }>;
            mutation: MutationProcedure<{
                input: void;
                output: string;
                meta: object;
                errorShape: DefaultErrorShape;
            }>;
        }>>;
    }>>;
}>>, {
    ...;
}>trpc.path: DecoratedRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    to: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        query: QueryProcedure<{
            input: {
                id?: string | undefined;
            } | undefined;
            output: string;
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        mutation: MutationProcedure<{
            input: void;
            output: string;
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>, {
    ...;
}> & DecorateRouterKeyable<...>path.to: DecoratedRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    query: QueryProcedure<{
        input: {
            id?: string | undefined;
        } | undefined;
        output: string;
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
    mutation: MutationProcedure<{
        input: void;
        output: string;
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>, {
    ...;
}> & DecorateRouterKeyable<...>to.mutation: DecorateMutationProcedure<{
    input: void;
    output: string;
    transformer: false;
    errorShape: DefaultErrorShape;
    featureFlags: {
        keyPrefix: false;
    };
}>mutation.DecorateMutationProcedure<{ input: void; output: string; transformer: false; errorShape: DefaultErrorShape; featureFlags: { keyPrefix: false; }; }>.mutationOptions: TRPCMutationOptions
<unknown>(opts?: TRPCMutationOptionsIn<void, TRPCClientErrorLike<{
    input: void;
    output: string;
    transformer: false;
    errorShape: DefaultErrorShape;
    featureFlags: {
        keyPrefix: false;
    };
}>, string, unknown, {
    keyPrefix: false;
}> | undefined) => TRPCMutationOptionsOut<void, TRPCClientErrorLike<{
    input: void;
    output: string;
    transformer: false;
    errorShape: DefaultErrorShape;
    featureFlags: {
        keyPrefix: false;
    };
}>, string, unknown, {
    keyPrefix: false;
}>mutationOptions()
  const const myMutation: UseMutationResult<string, TRPCClientErrorLike<{
    input: void;
    output: string;
    transformer: false;
    errorShape: DefaultErrorShape;
    featureFlags: {
        keyPrefix: false;
    };
}>, void, unknown>myMutation = useMutation<string, TRPCClientErrorLike<{
    input: void;
    output: string;
    transformer: false;
    errorShape: DefaultErrorShape;
    featureFlags: {
        keyPrefix: false;
    };
}>, void, unknown>(options: UseMutationOptions<string, TRPCClientErrorLike<{
    input: void;
    output: string;
    transformer: false;
    errorShape: DefaultErrorShape;
    featureFlags: {
        keyPrefix: false;
    };
}>, void, unknown>, queryClient?: QueryClient): UseMutationResult<string, TRPCClientErrorLike<{
    input: void;
    output: string;
    transformer: false;
    errorShape: DefaultErrorShape;
    featureFlags: {
        keyPrefix: false;
    };
}>, void, unknown>useMutation(const myMutationOptions: TRPCMutationOptionsOut<void, TRPCClientErrorLike<{
    input: void;
    output: string;
    transformer: false;
    errorShape: DefaultErrorShape;
    featureFlags: {
        keyPrefix: false;
    };
}>, string, unknown, {
    ...;
}>myMutationOptions)

  // Create a QueryKey which can be used to manipulate many methods
  // on TanStack's QueryClient in a type-safe manner
  const const myQueryKey: TRPCQueryKeyWithoutPrefix & {
    [dataTagSymbol]: string;
    [dataTagErrorSymbol]: TRPCClientErrorLike<{
        transformer: false;
        errorShape: DefaultErrorShape;
    }>;
}myQueryKey = const trpc: TRPCOptionsProxy<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    path: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        to: BuiltRouter<{
            ctx: object;
            meta: object;
            errorShape: DefaultErrorShape;
            transformer: false;
        }, DecorateCreateRouterOptions<{
            query: QueryProcedure<{
                input: {
                    id?: string | undefined;
                } | undefined;
                output: string;
                meta: object;
                errorShape: DefaultErrorShape;
            }>;
            mutation: MutationProcedure<{
                input: void;
                output: string;
                meta: object;
                errorShape: DefaultErrorShape;
            }>;
        }>>;
    }>>;
}>>, {
    ...;
}>trpc.path: DecoratedRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    to: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        query: QueryProcedure<{
            input: {
                id?: string | undefined;
            } | undefined;
            output: string;
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        mutation: MutationProcedure<{
            input: void;
            output: string;
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>, {
    ...;
}> & DecorateRouterKeyable<...>path.to: DecoratedRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    query: QueryProcedure<{
        input: {
            id?: string | undefined;
        } | undefined;
        output: string;
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
    mutation: MutationProcedure<{
        input: void;
        output: string;
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>, {
    ...;
}> & DecorateRouterKeyable<...>to.query: DecorateQueryProcedure<{
    input: void | {
        id?: string | undefined;
    } | undefined;
    output: string;
    transformer: false;
    errorShape: DefaultErrorShape;
    featureFlags: {
        keyPrefix: false;
    };
}> & Record<string, never>query.DecorateQueryProcedure<{ input: void | { id?: string | undefined; } | undefined; output: string; transformer: false; errorShape: DefaultErrorShape; featureFlags: { keyPrefix: false; }; }>.queryKey: (input?: Partial<void | {
    id?: string | undefined;
} | undefined>) => TRPCQueryKeyWithoutPrefix & {
    [dataTagSymbol]: string;
    [dataTagErrorSymbol]: TRPCClientErrorLike<{
        transformer: false;
        errorShape: DefaultErrorShape;
    }>;
}queryKey()

  const const invalidateMyQueryKey: () => voidinvalidateMyQueryKey = () => {
    const queryClient: QueryClientqueryClient.QueryClient.invalidateQueries<TRPCQueryKeyWithoutPrefix & {
    [dataTagSymbol]: string;
    [dataTagErrorSymbol]: TRPCClientErrorLike<{
        transformer: false;
        errorShape: DefaultErrorShape;
    }>;
}>(filters?: InvalidateQueryFilters<TRPCQueryKeyWithoutPrefix & {
    [dataTagSymbol]: string;
    [dataTagErrorSymbol]: TRPCClientErrorLike<{
        transformer: false;
        errorShape: DefaultErrorShape;
    }>;
}> | undefined, options?: InvalidateOptions): Promise<void>invalidateQueries({ QueryFilters<TRPCQueryKeyWithoutPrefix & { [dataTagSymbol]: string; [dataTagErrorSymbol]: TRPCClientErrorLike<{ ...; }>; }>.queryKey?: (TRPCQueryKeyWithoutPrefix & {
    [dataTagSymbol]: string;
    [dataTagErrorSymbol]: TRPCClientErrorLike<{
        transformer: false;
        errorShape: DefaultErrorShape;
    }>;
}) | undefinedqueryKey: const myQueryKey: TRPCQueryKeyWithoutPrefix & {
    [dataTagSymbol]: string;
    [dataTagErrorSymbol]: TRPCClientErrorLike<{
        transformer: false;
        errorShape: DefaultErrorShape;
    }>;
}myQueryKey })
  }

  return (
    // Your app here
    null
  )
}

The trpc object is fully type-safe and will provide autocompletes for all the procedures in your AppRouter. At the end of the proxy, the following methods are available:

`queryOptions` - querying data

Available for all query procedures. Provides a type-safe wrapper around Tanstack's queryOptions function. The first argument is the input for the procedure, and the second argument accepts any native Tanstack React Query options.

const const queryOptions: UnusedSkipTokenTRPCQueryOptionsOut<string, string, TRPCClientErrorLike<{
    transformer: false;
    errorShape: DefaultErrorShape;
}>, {
    keyPrefix: false;
}>queryOptions = const trpc: TRPCOptionsProxy<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    path: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        to: BuiltRouter<{
            ctx: object;
            meta: object;
            errorShape: DefaultErrorShape;
            transformer: false;
        }, DecorateCreateRouterOptions<{
            query: QueryProcedure<{
                input: {
                    id: string;
                };
                output: string;
                meta: object;
                errorShape: DefaultErrorShape;
            }>;
        }>>;
    }>>;
}>>, {
    keyPrefix: false;
}>trpc.path: DecoratedRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    to: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        query: QueryProcedure<{
            input: {
                id: string;
            };
            output: string;
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>, {
    keyPrefix: false;
}> & DecorateRouterKeyable<...>path.to: DecoratedRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    query: QueryProcedure<{
        input: {
            id: string;
        };
        output: string;
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>, {
    keyPrefix: false;
}> & DecorateRouterKeyable<{
    keyPrefix: false;
}>to.query: DecorateQueryProcedure<{
    input: {
        id: string;
    };
    output: string;
    transformer: false;
    errorShape: DefaultErrorShape;
    featureFlags: {
        keyPrefix: false;
    };
}> & Record<string, never>query.DecorateQueryProcedure<{ input: { id: string; }; output: string; transformer: false; errorShape: DefaultErrorShape; featureFlags: { keyPrefix: false; }; }>.queryOptions: TRPCQueryOptions
<string, string>(input: {
    id: string;
}, opts?: UnusedSkipTokenTRPCQueryOptionsIn<string, string, TRPCClientErrorLike<{
    transformer: false;
    errorShape: DefaultErrorShape;
}>, {
    keyPrefix: false;
}> | undefined) => UnusedSkipTokenTRPCQueryOptionsOut<string, string, TRPCClientErrorLike<{
    transformer: false;
    errorShape: DefaultErrorShape;
}>, {
    keyPrefix: false;
}> (+2 overloads)queryOptions(
  {
    /** input */
    id: stringid: 'foo',
  },
  {
    // Any Tanstack React Query options
    staleTime?: StaleTimeFunction<string, TRPCClientErrorLike<{
    transformer: false;
    errorShape: DefaultErrorShape;
}>, string, TRPCQueryKeyWithoutPrefix> | undefinedstaleTime: 1000,
  },
);

You can additionally provide a trpc object to the queryOptions function to provide tRPC request options to the client.

const const queryOptions: UnusedSkipTokenTRPCQueryOptionsOut<string, string, TRPCClientErrorLike<{
    transformer: false;
    errorShape: DefaultErrorShape;
}>, {
    keyPrefix: false;
}>queryOptions = const trpc: TRPCOptionsProxy<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    path: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        to: BuiltRouter<{
            ctx: object;
            meta: object;
            errorShape: DefaultErrorShape;
            transformer: false;
        }, DecorateCreateRouterOptions<{
            query: QueryProcedure<{
                input: {
                    id: string;
                };
                output: string;
                meta: object;
                errorShape: DefaultErrorShape;
            }>;
        }>>;
    }>>;
}>>, {
    keyPrefix: false;
}>trpc.path: DecoratedRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    to: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        query: QueryProcedure<{
            input: {
                id: string;
            };
            output: string;
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>, {
    keyPrefix: false;
}> & DecorateRouterKeyable<...>path.to: DecoratedRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    query: QueryProcedure<{
        input: {
            id: string;
        };
        output: string;
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>, {
    keyPrefix: false;
}> & DecorateRouterKeyable<{
    keyPrefix: false;
}>to.query: DecorateQueryProcedure<{
    input: {
        id: string;
    };
    output: string;
    transformer: false;
    errorShape: DefaultErrorShape;
    featureFlags: {
        keyPrefix: false;
    };
}> & Record<string, never>query.DecorateQueryProcedure<{ input: { id: string; }; output: string; transformer: false; errorShape: DefaultErrorShape; featureFlags: { keyPrefix: false; }; }>.queryOptions: TRPCQueryOptions
<string, string>(input: {
    id: string;
}, opts?: UnusedSkipTokenTRPCQueryOptionsIn<string, string, TRPCClientErrorLike<{
    transformer: false;
    errorShape: DefaultErrorShape;
}>, {
    keyPrefix: false;
}> | undefined) => UnusedSkipTokenTRPCQueryOptionsOut<string, string, TRPCClientErrorLike<{
    transformer: false;
    errorShape: DefaultErrorShape;
}>, {
    keyPrefix: false;
}> (+2 overloads)queryOptions(
  {
    /** input */
    id: stringid: 'foo',
  },
  {
    TRPCQueryBaseOptions.trpc?: TRPCReactRequestOptions | undefinedtrpc: {
      // Provide tRPC request options to the client
      context?: OperationContext | undefinedcontext: {
        // see https://trpc.io/docs/client/links#managing-context
      },
    },
  },
);

If you want to disable a query in a type safe way, you can use skipToken:

const const query: UseQueryResult<() => never, TRPCClientErrorLike<{
    transformer: false;
    errorShape: DefaultErrorShape;
}>>query = useQuery<() => never, TRPCClientErrorLike<{
    transformer: false;
    errorShape: DefaultErrorShape;
}>, () => never, TRPCQueryKeyWithoutPrefix>(options: UndefinedInitialDataOptions<() => never, TRPCClientErrorLike<{
    transformer: false;
    errorShape: DefaultErrorShape;
}>, () => never, TRPCQueryKeyWithoutPrefix>, queryClient?: QueryClient): UseQueryResult<() => never, TRPCClientErrorLike<{
    transformer: false;
    errorShape: DefaultErrorShape;
}>> (+2 overloads)useQuery(
  const trpc: TRPCOptionsProxy<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    user: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        details: QueryProcedure<{
            input: {
                userId: string;
                projectId: string;
            };
            output: {
                name: string;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>, {
    ...;
}>trpc.user: DecoratedRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    details: QueryProcedure<{
        input: {
            userId: string;
            projectId: string;
        };
        output: {
            name: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>, {
    ...;
}> & DecorateRouterKeyable<...>user.details: DecorateQueryProcedure<{
    input: {
        userId: string;
        projectId: string;
    };
    output: {
        name: string;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
    featureFlags: {
        keyPrefix: false;
    };
}> & Record<string, never>details.DecorateQueryProcedure<{ input: { userId: string; projectId: string; }; output: { name: string; }; transformer: false; errorShape: DefaultErrorShape; featureFlags: { keyPrefix: false; }; }>.queryOptions: TRPCQueryOptions
<() => never, () => never>(input: {
    userId: string;
    projectId: string;
} | typeof skipToken, opts?: UndefinedTRPCQueryOptionsIn<() => never, () => never, TRPCClientErrorLike<{
    transformer: false;
    errorShape: DefaultErrorShape;
}>, {
    keyPrefix: false;
}> | undefined) => UndefinedTRPCQueryOptionsOut<() => never, () => never, TRPCClientErrorLike<{
    transformer: false;
    errorShape: DefaultErrorShape;
}>, {
    keyPrefix: false;
}> (+2 overloads)queryOptions(
    const user: {
    id: string;
} | undefineduser?.id: string | undefinedid && const project: {
    id: string;
} | undefinedproject?.id: string | undefinedid
      ? {
          userId: stringuserId: const user: {
    id: string;
}user.id: stringid,
          projectId: stringprojectId: const project: {
    id: string;
}project.id: stringid,
        }
      : const skipToken: typeof skipTokenskipToken,
    {
      staleTime?: StaleTimeFunction<() => never, TRPCClientErrorLike<{
    transformer: false;
    errorShape: DefaultErrorShape;
}>, () => never, TRPCQueryKeyWithoutPrefix> | undefinedstaleTime: 1000,
    },
  ),
);

The result can be passed to useQuery or useSuspenseQuery hooks or query client methods like fetchQuery, prefetchQuery, prefetchInfiniteQuery, invalidateQueries, etc.

`infiniteQueryOptions` - querying infinite data

Available for all query procedures that take a cursor input. Provides a type-safe wrapper around Tanstack's infiniteQueryOptions function. The first argument is the input for the procedure, and the second argument accepts any native Tanstack React Query options.

const const infiniteQueryOptions: UnusedSkipTokenTRPCInfiniteQueryOptionsOut<{
    cursor?: number | undefined;
}, {
    items: string[];
    nextCursor?: number | undefined;
}, {
    items: string[];
    nextCursor?: number | undefined;
}, TRPCClientErrorLike<{
    transformer: false;
    errorShape: DefaultErrorShape;
}>, {
    keyPrefix: false;
}>infiniteQueryOptions = const trpc: TRPCOptionsProxy<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    path: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        to: BuiltRouter<{
            ctx: object;
            meta: object;
            errorShape: DefaultErrorShape;
            transformer: false;
        }, DecorateCreateRouterOptions<{
            query: QueryProcedure<{
                input: {
                    cursor?: number | undefined;
                };
                output: {
                    items: string[];
                    nextCursor: number | undefined;
                };
                meta: object;
                errorShape: DefaultErrorShape;
            }>;
        }>>;
    }>>;
}>>, {
    keyPrefix: false;
}>trpc.path: DecoratedRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    to: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        query: QueryProcedure<{
            input: {
                cursor?: number | undefined;
            };
            output: {
                items: string[];
                nextCursor: number | undefined;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>, {
    keyPrefix: false;
}> & DecorateRouterKeyable<...>path.to: DecoratedRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    query: QueryProcedure<{
        input: {
            cursor?: number | undefined;
        };
        output: {
            items: string[];
            nextCursor: number | undefined;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>, {
    keyPrefix: false;
}> & DecorateRouterKeyable<{
    keyPrefix: false;
}>to.query: DecorateQueryProcedure<{
    input: {
        cursor?: number | undefined;
    };
    output: {
        items: string[];
        nextCursor?: number | undefined;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
    featureFlags: {
        keyPrefix: false;
    };
}> & DecorateInfiniteQueryProcedure<{
    input: {
        cursor?: number | undefined;
    };
    output: {
        items: string[];
        nextCursor?: number | undefined;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
    featureFlags: {
        keyPrefix: false;
    };
}>query.DecorateInfiniteQueryProcedure<{ input: { cursor?: number | undefined; }; output: { items: string[]; nextCursor?: number | undefined; }; transformer: false; errorShape: DefaultErrorShape; featureFlags: { ...; }; }>.infiniteQueryOptions: TRPCInfiniteQueryOptions
<{
    items: string[];
    nextCursor?: number | undefined;
}, {
    items: string[];
    nextCursor?: number | undefined;
}>(input: {
    cursor?: number | undefined;
}, opts: UnusedSkipTokenTRPCInfiniteQueryOptionsIn<{
    cursor?: number | undefined;
}, {
    items: string[];
    nextCursor?: number | undefined;
}, {
    items: string[];
    nextCursor?: number | undefined;
}, TRPCClientErrorLike<{
    transformer: false;
    errorShape: DefaultErrorShape;
}>, {
    keyPrefix: false;
}>) => UnusedSkipTokenTRPCInfiniteQueryOptionsOut<{
    cursor?: number | undefined;
}, {
    items: string[];
    nextCursor?: number | undefined;
}, {
    items: string[];
    nextCursor?: number | undefined;
}, TRPCClientErrorLike<...>, {
    keyPrefix: false;
}> (+2 overloads)infiniteQueryOptions(
  {
    /** input */
  },
  {
    // Any Tanstack React Query options
    getNextPageParam: GetNextPageParamFunction<number | null, {
    items: string[];
    nextCursor?: number | undefined;
}>getNextPageParam: (lastPage: {
    items: string[];
    nextCursor?: number | undefined;
}lastPage, pages: {
    items: string[];
    nextCursor?: number | undefined;
}[]pages) => lastPage: {
    items: string[];
    nextCursor?: number | undefined;
}lastPage.nextCursor?: number | undefinednextCursor,
  },
);

`queryKey` - getting the query key and performing operations on the query client

Available for all query procedures. Allows you to access the query key in a type-safe manner.

const const queryKey: TRPCQueryKeyWithoutPrefix & {
    [dataTagSymbol]: string;
    [dataTagErrorSymbol]: TRPCClientErrorLike<{
        transformer: false;
        errorShape: DefaultErrorShape;
    }>;
}queryKey = const trpc: TRPCOptionsProxy<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    path: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        to: BuiltRouter<{
            ctx: object;
            meta: object;
            errorShape: DefaultErrorShape;
            transformer: false;
        }, DecorateCreateRouterOptions<{
            query: QueryProcedure<{
                input: {
                    id: string;
                };
                output: string;
                meta: object;
                errorShape: DefaultErrorShape;
            }>;
        }>>;
    }>>;
}>>, {
    ...;
}>trpc.path: DecoratedRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    to: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        query: QueryProcedure<{
            input: {
                id: string;
            };
            output: string;
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>, {
    ...;
}> & DecorateRouterKeyable<...>path.to: DecoratedRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    query: QueryProcedure<{
        input: {
            id: string;
        };
        output: string;
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>, {
    ...;
}> & DecorateRouterKeyable<...>to.query: DecorateQueryProcedure<{
    input: {
        id: string;
    };
    output: string;
    transformer: false;
    errorShape: DefaultErrorShape;
    featureFlags: {
        keyPrefix: false;
    };
}> & Record<string, never>query.DecorateQueryProcedure<{ input: { id: string; }; output: string; transformer: false; errorShape: DefaultErrorShape; featureFlags: { keyPrefix: false; }; }>.queryKey: (input?: Partial<{
    id: string;
}> | undefined) => TRPCQueryKeyWithoutPrefix & {
    [dataTagSymbol]: string;
    [dataTagErrorSymbol]: TRPCClientErrorLike<{
        transformer: false;
        errorShape: DefaultErrorShape;
    }>;
}queryKey();

Since Tanstack React Query uses fuzzy matching for query keys, you can also create a partial query key for any sub-path to match all queries belonging to a router:

const const queryKey: TRPCQueryKeyWithoutPrefixqueryKey = const trpc: TRPCOptionsProxy<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    router: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        someQuery: QueryProcedure<{
            input: void;
            output: string;
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>, {
    keyPrefix: false;
}>trpc.router: DecoratedRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    someQuery: QueryProcedure<{
        input: void;
        output: string;
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>, {
    keyPrefix: false;
}> & DecorateRouterKeyable<{
    keyPrefix: false;
}>router.DecorateRouterKeyable<{ keyPrefix: false; }>.pathKey: () => TRPCQueryKeyWithoutPrefixpathKey();

Or even the root path to match all tRPC queries:

const const queryKey: TRPCQueryKeyWithoutPrefixqueryKey = const trpc: TRPCOptionsProxy<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    someQuery: QueryProcedure<{
        input: void;
        output: string;
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>, {
    keyPrefix: false;
}>trpc.DecorateRouterKeyable<{ keyPrefix: false; }>.pathKey: () => TRPCQueryKeyWithoutPrefixpathKey();

`infiniteQueryKey` - getting the infinite query key

Available for all query procedures that take a cursor input. Allows you to access the query key for an infinite query in a type-safe manner.

const const infiniteQueryKey: TRPCQueryKeyWithoutPrefix & {
    [dataTagSymbol]: TRPCInfiniteData<{
        cursor?: number | undefined;
    }, {
        items: string[];
        nextCursor?: number | undefined;
    }>;
    [dataTagErrorSymbol]: TRPCClientErrorLike<{
        transformer: false;
        errorShape: DefaultErrorShape;
    }>;
}infiniteQueryKey = const trpc: TRPCOptionsProxy<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    path: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        to: BuiltRouter<{
            ctx: object;
            meta: object;
            errorShape: DefaultErrorShape;
            transformer: false;
        }, DecorateCreateRouterOptions<{
            query: QueryProcedure<{
                input: {
                    cursor?: number | undefined;
                };
                output: {
                    items: string[];
                    nextCursor: number | undefined;
                };
                meta: object;
                errorShape: DefaultErrorShape;
            }>;
        }>>;
    }>>;
}>>, {
    ...;
}>trpc.path: DecoratedRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    to: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        query: QueryProcedure<{
            input: {
                cursor?: number | undefined;
            };
            output: {
                items: string[];
                nextCursor: number | undefined;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>, {
    ...;
}> & DecorateRouterKeyable<...>path.to: DecoratedRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    query: QueryProcedure<{
        input: {
            cursor?: number | undefined;
        };
        output: {
            items: string[];
            nextCursor: number | undefined;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>, {
    ...;
}> & DecorateRouterKeyable<...>to.query: DecorateQueryProcedure<{
    input: {
        cursor?: number | undefined;
    };
    output: {
        items: string[];
        nextCursor?: number | undefined;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
    featureFlags: {
        keyPrefix: false;
    };
}> & DecorateInfiniteQueryProcedure<{
    input: {
        cursor?: number | undefined;
    };
    output: {
        items: string[];
        nextCursor?: number | undefined;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
    featureFlags: {
        keyPrefix: false;
    };
}>query.DecorateInfiniteQueryProcedure<{ input: { cursor?: number | undefined; }; output: { items: string[]; nextCursor?: number | undefined; }; transformer: false; errorShape: DefaultErrorShape; featureFlags: { ...; }; }>.infiniteQueryKey: (input?: Partial<{
    cursor?: number | undefined;
}> | undefined) => TRPCQueryKeyWithoutPrefix & {
    [dataTagSymbol]: TRPCInfiniteData<{
        cursor?: number | undefined;
    }, {
        items: string[];
        nextCursor?: number | undefined;
    }>;
    [dataTagErrorSymbol]: TRPCClientErrorLike<{
        transformer: false;
        errorShape: DefaultErrorShape;
    }>;
}infiniteQueryKey({
  /** input */
});

The result can be used with query client methods like getQueryData, setQueryData, invalidateQueries, etc.

// Get cached data for an infinite query
const const cachedData: TRPCInfiniteData<{
    cursor?: number | undefined;
}, {
    items: string[];
    nextCursor?: number | undefined;
}> | undefinedcachedData = const queryClient: QueryClientqueryClient.QueryClient.getQueryData<unknown, TRPCQueryKeyWithoutPrefix & {
    [dataTagSymbol]: TRPCInfiniteData<{
        cursor?: number | undefined;
    }, {
        items: string[];
        nextCursor?: number | undefined;
    }>;
    [dataTagErrorSymbol]: TRPCClientErrorLike<{
        transformer: false;
        errorShape: DefaultErrorShape;
    }>;
}, TRPCInfiniteData<{
    cursor?: number | undefined;
}, {
    items: string[];
    nextCursor?: number | undefined;
}>>(queryKey: TRPCQueryKeyWithoutPrefix & {
    [dataTagSymbol]: TRPCInfiniteData<{
        cursor?: number | undefined;
    }, {
        items: string[];
        nextCursor?: number | undefined;
    }>;
    [dataTagErrorSymbol]: TRPCClientErrorLike<{
        transformer: false;
        errorShape: DefaultErrorShape;
    }>;
}): TRPCInfiniteData<...> | undefinedgetQueryData(
  const trpc: TRPCOptionsProxy<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    path: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        to: BuiltRouter<{
            ctx: object;
            meta: object;
            errorShape: DefaultErrorShape;
            transformer: false;
        }, DecorateCreateRouterOptions<{
            query: QueryProcedure<{
                input: {
                    cursor?: number | undefined;
                };
                output: {
                    items: string[];
                    nextCursor: number | undefined;
                };
                meta: object;
                errorShape: DefaultErrorShape;
            }>;
        }>>;
    }>>;
}>>, {
    ...;
}>trpc.path: DecoratedRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    to: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        query: QueryProcedure<{
            input: {
                cursor?: number | undefined;
            };
            output: {
                items: string[];
                nextCursor: number | undefined;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>, {
    ...;
}> & DecorateRouterKeyable<...>path.to: DecoratedRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    query: QueryProcedure<{
        input: {
            cursor?: number | undefined;
        };
        output: {
            items: string[];
            nextCursor: number | undefined;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>, {
    ...;
}> & DecorateRouterKeyable<...>to.query: DecorateQueryProcedure<{
    input: {
        cursor?: number | undefined;
    };
    output: {
        items: string[];
        nextCursor?: number | undefined;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
    featureFlags: {
        keyPrefix: false;
    };
}> & DecorateInfiniteQueryProcedure<{
    input: {
        cursor?: number | undefined;
    };
    output: {
        items: string[];
        nextCursor?: number | undefined;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
    featureFlags: {
        keyPrefix: false;
    };
}>query.DecorateInfiniteQueryProcedure<{ input: { cursor?: number | undefined; }; output: { items: string[]; nextCursor?: number | undefined; }; transformer: false; errorShape: DefaultErrorShape; featureFlags: { ...; }; }>.infiniteQueryKey: (input?: Partial<{
    cursor?: number | undefined;
}> | undefined) => TRPCQueryKeyWithoutPrefix & {
    [dataTagSymbol]: TRPCInfiniteData<{
        cursor?: number | undefined;
    }, {
        items: string[];
        nextCursor?: number | undefined;
    }>;
    [dataTagErrorSymbol]: TRPCClientErrorLike<{
        transformer: false;
        errorShape: DefaultErrorShape;
    }>;
}infiniteQueryKey({ cursor?: number | undefinedcursor: 0 }),
);

// Set cached data for an infinite query
const queryClient: QueryClientqueryClient.QueryClient.setQueryData<unknown, TRPCQueryKeyWithoutPrefix & {
    [dataTagSymbol]: TRPCInfiniteData<{
        cursor?: number | undefined;
    }, {
        items: string[];
        nextCursor?: number | undefined;
    }>;
    [dataTagErrorSymbol]: TRPCClientErrorLike<{
        transformer: false;
        errorShape: DefaultErrorShape;
    }>;
}, TRPCInfiniteData<{
    cursor?: number | undefined;
}, {
    items: string[];
    nextCursor?: number | undefined;
}>>(queryKey: TRPCQueryKeyWithoutPrefix & {
    [dataTagSymbol]: TRPCInfiniteData<{
        cursor?: number | undefined;
    }, {
        items: string[];
        nextCursor?: number | undefined;
    }>;
    [dataTagErrorSymbol]: TRPCClientErrorLike<{
        transformer: false;
        errorShape: DefaultErrorShape;
    }>;
}, updater: Updater<...>, options?: SetDataOptions): NoInfer<TRPCInfiniteData<...>> | undefinedsetQueryData(
  const trpc: TRPCOptionsProxy<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    path: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        to: BuiltRouter<{
            ctx: object;
            meta: object;
            errorShape: DefaultErrorShape;
            transformer: false;
        }, DecorateCreateRouterOptions<{
            query: QueryProcedure<{
                input: {
                    cursor?: number | undefined;
                };
                output: {
                    items: string[];
                    nextCursor: number | undefined;
                };
                meta: object;
                errorShape: DefaultErrorShape;
            }>;
        }>>;
    }>>;
}>>, {
    ...;
}>trpc.path: DecoratedRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    to: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        query: QueryProcedure<{
            input: {
                cursor?: number | undefined;
            };
            output: {
                items: string[];
                nextCursor: number | undefined;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>, {
    ...;
}> & DecorateRouterKeyable<...>path.to: DecoratedRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    query: QueryProcedure<{
        input: {
            cursor?: number | undefined;
        };
        output: {
            items: string[];
            nextCursor: number | undefined;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>, {
    ...;
}> & DecorateRouterKeyable<...>to.query: DecorateQueryProcedure<{
    input: {
        cursor?: number | undefined;
    };
    output: {
        items: string[];
        nextCursor?: number | undefined;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
    featureFlags: {
        keyPrefix: false;
    };
}> & DecorateInfiniteQueryProcedure<{
    input: {
        cursor?: number | undefined;
    };
    output: {
        items: string[];
        nextCursor?: number | undefined;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
    featureFlags: {
        keyPrefix: false;
    };
}>query.DecorateInfiniteQueryProcedure<{ input: { cursor?: number | undefined; }; output: { items: string[]; nextCursor?: number | undefined; }; transformer: false; errorShape: DefaultErrorShape; featureFlags: { ...; }; }>.infiniteQueryKey: (input?: Partial<{
    cursor?: number | undefined;
}> | undefined) => TRPCQueryKeyWithoutPrefix & {
    [dataTagSymbol]: TRPCInfiniteData<{
        cursor?: number | undefined;
    }, {
        items: string[];
        nextCursor?: number | undefined;
    }>;
    [dataTagErrorSymbol]: TRPCClientErrorLike<{
        transformer: false;
        errorShape: DefaultErrorShape;
    }>;
}infiniteQueryKey({ cursor?: number | undefinedcursor: 0 }),
  (data: NoInfer<TRPCInfiniteData<{
    cursor?: number | undefined;
}, {
    items: string[];
    nextCursor?: number | undefined;
}>> | undefineddata) => {
    // Modify the data
    return data: NoInfer<TRPCInfiniteData<{
    cursor?: number | undefined;
}, {
    items: string[];
    nextCursor?: number | undefined;
}>> | undefineddata;
  },
);

`queryFilter` - creating query filters

Available for all query procedures. Allows creating query filters in a type-safe manner.

const const queryFilter: WithRequired<QueryFilters<TRPCQueryKeyWithoutPrefix & {
    [dataTagSymbol]: string;
    [dataTagErrorSymbol]: TRPCClientErrorLike<{
        transformer: false;
        errorShape: DefaultErrorShape;
    }>;
}>, "queryKey">queryFilter = const trpc: TRPCOptionsProxy<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    path: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        to: BuiltRouter<{
            ctx: object;
            meta: object;
            errorShape: DefaultErrorShape;
            transformer: false;
        }, DecorateCreateRouterOptions<{
            query: QueryProcedure<{
                input: {
                    id: string;
                };
                output: string;
                meta: object;
                errorShape: DefaultErrorShape;
            }>;
        }>>;
    }>>;
}>>, {
    ...;
}>trpc.path: DecoratedRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    to: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        query: QueryProcedure<{
            input: {
                id: string;
            };
            output: string;
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>, {
    ...;
}> & DecorateRouterKeyable<...>path.to: DecoratedRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    query: QueryProcedure<{
        input: {
            id: string;
        };
        output: string;
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>, {
    ...;
}> & DecorateRouterKeyable<...>to.query: DecorateQueryProcedure<{
    input: {
        id: string;
    };
    output: string;
    transformer: false;
    errorShape: DefaultErrorShape;
    featureFlags: {
        keyPrefix: false;
    };
}> & Record<string, never>query.DecorateQueryProcedure<{ input: { id: string; }; output: string; transformer: false; errorShape: DefaultErrorShape; featureFlags: { keyPrefix: false; }; }>.queryFilter: (input?: Partial<{
    id: string;
}> | undefined, filters?: QueryFilters<TRPCQueryKeyWithoutPrefix & {
    [dataTagSymbol]: string;
    [dataTagErrorSymbol]: TRPCClientErrorLike<{
        transformer: false;
        errorShape: DefaultErrorShape;
    }>;
}> | undefined) => WithRequired<QueryFilters<TRPCQueryKeyWithoutPrefix & {
    [dataTagSymbol]: string;
    [dataTagErrorSymbol]: TRPCClientErrorLike<...>;
}>, "queryKey">queryFilter(
  {
    /** input */
  },
  {
    // Any Tanstack React Query filter
    QueryFilters<TRPCQueryKeyWithoutPrefix & { [dataTagSymbol]: string; [dataTagErrorSymbol]: TRPCClientErrorLike<{ ...; }>; }>.predicate?: ((query: Query) => boolean) | undefinedpredicate: (query: Query<unknown, Error, unknown, readonly unknown[]>query) => {
      return !!query: Query<unknown, Error, unknown, readonly unknown[]>query.Query<unknown, Error, unknown, readonly unknown[]>.state: QueryState<unknown, Error>state.QueryState<unknown, Error>.data: unknowndata;
    },
  },
);

Like with query keys, if you want to run a filter across a whole router you can use pathFilter to target any sub-path.

const const queryFilter: WithRequired<QueryFilters<TRPCQueryKeyWithoutPrefix>, "queryKey">queryFilter = const trpc: TRPCOptionsProxy<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    path: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        someQuery: QueryProcedure<{
            input: void;
            output: string;
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>, {
    keyPrefix: false;
}>trpc.path: DecoratedRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    someQuery: QueryProcedure<{
        input: void;
        output: string;
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>, {
    keyPrefix: false;
}> & DecorateRouterKeyable<{
    keyPrefix: false;
}>path.DecorateRouterKeyable<{ keyPrefix: false; }>.pathFilter: (filters?: QueryFilters<TRPCQueryKeyWithoutPrefix> | undefined) => WithRequired<QueryFilters<TRPCQueryKeyWithoutPrefix>, "queryKey">pathFilter({
  // Any Tanstack React Query filter
  QueryFilters<TRPCQueryKeyWithoutPrefix>.predicate?: ((query: Query) => boolean) | undefinedpredicate: (query: Query<unknown, Error, unknown, readonly unknown[]>query) => {
    return !!query: Query<unknown, Error, unknown, readonly unknown[]>query.Query<unknown, Error, unknown, readonly unknown[]>.state: QueryState<unknown, Error>state.QueryState<unknown, Error>.data: unknowndata;
  },
});

Useful for creating filters that can be passed to client methods like queryClient.invalidateQueries etc.

`infiniteQueryFilter` - creating infinite query filters

Available for all query procedures that take a cursor input. Allows creating query filters for infinite queries in a type-safe manner.

const const infiniteQueryFilter: WithRequired<QueryFilters<TRPCQueryKeyWithoutPrefix & {
    [dataTagSymbol]: TRPCInfiniteData<{
        cursor?: number | undefined;
    }, {
        items: string[];
        nextCursor?: number | undefined;
    }>;
    [dataTagErrorSymbol]: TRPCClientErrorLike<{
        transformer: false;
        errorShape: DefaultErrorShape;
    }>;
}>, "queryKey">infiniteQueryFilter = const trpc: TRPCOptionsProxy<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    path: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        to: BuiltRouter<{
            ctx: object;
            meta: object;
            errorShape: DefaultErrorShape;
            transformer: false;
        }, DecorateCreateRouterOptions<{
            query: QueryProcedure<{
                input: {
                    cursor?: number | undefined;
                };
                output: {
                    items: string[];
                    nextCursor: number | undefined;
                };
                meta: object;
                errorShape: DefaultErrorShape;
            }>;
        }>>;
    }>>;
}>>, {
    ...;
}>trpc.path: DecoratedRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    to: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        query: QueryProcedure<{
            input: {
                cursor?: number | undefined;
            };
            output: {
                items: string[];
                nextCursor: number | undefined;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>, {
    ...;
}> & DecorateRouterKeyable<...>path.to: DecoratedRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    query: QueryProcedure<{
        input: {
            cursor?: number | undefined;
        };
        output: {
            items: string[];
            nextCursor: number | undefined;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>, {
    ...;
}> & DecorateRouterKeyable<...>to.query: DecorateQueryProcedure<{
    input: {
        cursor?: number | undefined;
    };
    output: {
        items: string[];
        nextCursor?: number | undefined;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
    featureFlags: {
        keyPrefix: false;
    };
}> & DecorateInfiniteQueryProcedure<{
    input: {
        cursor?: number | undefined;
    };
    output: {
        items: string[];
        nextCursor?: number | undefined;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
    featureFlags: {
        keyPrefix: false;
    };
}>query.DecorateInfiniteQueryProcedure<{ input: { cursor?: number | undefined; }; output: { items: string[]; nextCursor?: number | undefined; }; transformer: false; errorShape: DefaultErrorShape; featureFlags: { ...; }; }>.infiniteQueryFilter: (input?: Partial<{
    cursor?: number | undefined;
}> | undefined, filters?: QueryFilters<TRPCQueryKeyWithoutPrefix & {
    [dataTagSymbol]: TRPCInfiniteData<{
        cursor?: number | undefined;
    }, {
        items: string[];
        nextCursor?: number | undefined;
    }>;
    [dataTagErrorSymbol]: TRPCClientErrorLike<{
        transformer: false;
        errorShape: DefaultErrorShape;
    }>;
}> | undefined) => WithRequired<QueryFilters<TRPCQueryKeyWithoutPrefix & {
    ...;
}>, "queryKey">infiniteQueryFilter(
  {
    /** input */
  },
  {
    // Any Tanstack React Query filter
    QueryFilters<TRPCQueryKeyWithoutPrefix & { [dataTagSymbol]: TRPCInfiniteData<{ cursor?: number | undefined; }, { items: string[]; nextCursor?: number | undefined; }>; [dataTagErrorSymbol]: TRPCClientErrorLike<...>; }>.predicate?: ((query: Query) => boolean) | undefinedpredicate: (query: Query<unknown, Error, unknown, readonly unknown[]>query) => {
      return !!query: Query<unknown, Error, unknown, readonly unknown[]>query.Query<unknown, Error, unknown, readonly unknown[]>.state: QueryState<unknown, Error>state.QueryState<unknown, Error>.data: unknowndata;
    },
  },
);

Useful for creating filters that can be passed to client methods like queryClient.invalidateQueries etc.

await const queryClient: QueryClientqueryClient.QueryClient.invalidateQueries<TRPCQueryKeyWithoutPrefix & {
    [dataTagSymbol]: TRPCInfiniteData<{
        cursor?: number | undefined;
    }, {
        items: string[];
        nextCursor?: number | undefined;
    }>;
    [dataTagErrorSymbol]: TRPCClientErrorLike<{
        transformer: false;
        errorShape: DefaultErrorShape;
    }>;
}>(filters?: InvalidateQueryFilters<TRPCQueryKeyWithoutPrefix & {
    [dataTagSymbol]: TRPCInfiniteData<{
        cursor?: number | undefined;
    }, {
        items: string[];
        nextCursor?: number | undefined;
    }>;
    [dataTagErrorSymbol]: TRPCClientErrorLike<{
        transformer: false;
        errorShape: DefaultErrorShape;
    }>;
}> | undefined, options?: InvalidateOptions): Promise<void>invalidateQueries(
  const trpc: TRPCOptionsProxy<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    path: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        to: BuiltRouter<{
            ctx: object;
            meta: object;
            errorShape: DefaultErrorShape;
            transformer: false;
        }, DecorateCreateRouterOptions<{
            query: QueryProcedure<{
                input: {
                    cursor?: number | undefined;
                };
                output: {
                    items: string[];
                    nextCursor: number | undefined;
                };
                meta: object;
                errorShape: DefaultErrorShape;
            }>;
        }>>;
    }>>;
}>>, {
    ...;
}>trpc.path: DecoratedRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    to: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        query: QueryProcedure<{
            input: {
                cursor?: number | undefined;
            };
            output: {
                items: string[];
                nextCursor: number | undefined;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>, {
    ...;
}> & DecorateRouterKeyable<...>path.to: DecoratedRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    query: QueryProcedure<{
        input: {
            cursor?: number | undefined;
        };
        output: {
            items: string[];
            nextCursor: number | undefined;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>, {
    ...;
}> & DecorateRouterKeyable<...>to.query: DecorateQueryProcedure<{
    input: {
        cursor?: number | undefined;
    };
    output: {
        items: string[];
        nextCursor?: number | undefined;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
    featureFlags: {
        keyPrefix: false;
    };
}> & DecorateInfiniteQueryProcedure<{
    input: {
        cursor?: number | undefined;
    };
    output: {
        items: string[];
        nextCursor?: number | undefined;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
    featureFlags: {
        keyPrefix: false;
    };
}>query.DecorateInfiniteQueryProcedure<{ input: { cursor?: number | undefined; }; output: { items: string[]; nextCursor?: number | undefined; }; transformer: false; errorShape: DefaultErrorShape; featureFlags: { ...; }; }>.infiniteQueryFilter: (input?: Partial<{
    cursor?: number | undefined;
}> | undefined, filters?: QueryFilters<TRPCQueryKeyWithoutPrefix & {
    [dataTagSymbol]: TRPCInfiniteData<{
        cursor?: number | undefined;
    }, {
        items: string[];
        nextCursor?: number | undefined;
    }>;
    [dataTagErrorSymbol]: TRPCClientErrorLike<{
        transformer: false;
        errorShape: DefaultErrorShape;
    }>;
}> | undefined) => WithRequired<QueryFilters<TRPCQueryKeyWithoutPrefix & {
    ...;
}>, "queryKey">infiniteQueryFilter(
    {},
    {
      QueryFilters<TRPCQueryKeyWithoutPrefix & { [dataTagSymbol]: TRPCInfiniteData<{ cursor?: number | undefined; }, { items: string[]; nextCursor?: number | undefined; }>; [dataTagErrorSymbol]: TRPCClientErrorLike<...>; }>.predicate?: ((query: Query) => boolean) | undefinedpredicate: (query: Query<unknown, Error, unknown, readonly unknown[]>query) => {
        // Filter logic based on query state
        return query: Query<unknown, Error, unknown, readonly unknown[]>query.Query<unknown, Error, unknown, readonly unknown[]>.state: QueryState<unknown, Error>state.QueryState<unknown, Error>.status: QueryStatusstatus === 'success';
      },
    },
  ),
);

`mutationOptions` - creating mutation options

Available for all mutation procedures. Provides a type-safe identity function for constructing options that can be passed to useMutation.

const const mutationOptions: TRPCMutationOptionsOut<{
    id: string;
}, TRPCClientErrorLike<{
    input: {
        id: string;
    };
    output: "ok";
    transformer: false;
    errorShape: DefaultErrorShape;
    featureFlags: {
        keyPrefix: false;
    };
}>, "ok", unknown, {
    keyPrefix: false;
}>mutationOptions = const trpc: TRPCOptionsProxy<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    path: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        to: BuiltRouter<{
            ctx: object;
            meta: object;
            errorShape: DefaultErrorShape;
            transformer: false;
        }, DecorateCreateRouterOptions<{
            mutation: MutationProcedure<{
                input: {
                    id: string;
                };
                output: "ok";
                meta: object;
                errorShape: DefaultErrorShape;
            }>;
        }>>;
    }>>;
}>>, {
    keyPrefix: false;
}>trpc.path: DecoratedRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    to: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        mutation: MutationProcedure<{
            input: {
                id: string;
            };
            output: "ok";
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>, {
    keyPrefix: false;
}> & DecorateRouterKeyable<...>path.to: DecoratedRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    mutation: MutationProcedure<{
        input: {
            id: string;
        };
        output: "ok";
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>, {
    keyPrefix: false;
}> & DecorateRouterKeyable<{
    keyPrefix: false;
}>to.mutation: DecorateMutationProcedure<{
    input: {
        id: string;
    };
    output: "ok";
    transformer: false;
    errorShape: DefaultErrorShape;
    featureFlags: {
        keyPrefix: false;
    };
}>mutation.DecorateMutationProcedure<{ input: { id: string; }; output: "ok"; transformer: false; errorShape: DefaultErrorShape; featureFlags: { keyPrefix: false; }; }>.mutationOptions: TRPCMutationOptions
<unknown>(opts?: TRPCMutationOptionsIn<{
    id: string;
}, TRPCClientErrorLike<{
    input: {
        id: string;
    };
    output: "ok";
    transformer: false;
    errorShape: DefaultErrorShape;
    featureFlags: {
        keyPrefix: false;
    };
}>, "ok", unknown, {
    keyPrefix: false;
}> | undefined) => TRPCMutationOptionsOut<{
    id: string;
}, TRPCClientErrorLike<{
    input: {
        id: string;
    };
    output: "ok";
    transformer: false;
    errorShape: DefaultErrorShape;
    featureFlags: {
        keyPrefix: false;
    };
}>, "ok", unknown, {
    keyPrefix: false;
}>mutationOptions({
  // Any Tanstack React Query options
  onSuccess?: ((data: "ok", variables: {
    id: string;
}, onMutateResult: unknown, context: MutationFunctionContext) => Promise<unknown> | unknown) | undefinedonSuccess: (data: "ok"data) => {
    // do something with the data
  },
});

`mutationKey` - getting the mutation key

Available for all mutation procedures. Allows you to get the mutation key in a type-safe manner.

const const mutationKey: TRPCMutationKeyWithoutPrefixmutationKey = const trpc: TRPCOptionsProxy<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    path: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        to: BuiltRouter<{
            ctx: object;
            meta: object;
            errorShape: DefaultErrorShape;
            transformer: false;
        }, DecorateCreateRouterOptions<{
            mutation: MutationProcedure<{
                input: {
                    id: string;
                };
                output: "ok";
                meta: object;
                errorShape: DefaultErrorShape;
            }>;
        }>>;
    }>>;
}>>, {
    ...;
}>trpc.path: DecoratedRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    to: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        mutation: MutationProcedure<{
            input: {
                id: string;
            };
            output: "ok";
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>, {
    ...;
}> & DecorateRouterKeyable<...>path.to: DecoratedRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    mutation: MutationProcedure<{
        input: {
            id: string;
        };
        output: "ok";
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>, {
    ...;
}> & DecorateRouterKeyable<...>to.mutation: DecorateMutationProcedure<{
    input: {
        id: string;
    };
    output: "ok";
    transformer: false;
    errorShape: DefaultErrorShape;
    featureFlags: {
        keyPrefix: false;
    };
}>mutation.DecorateMutationProcedure<{ input: { id: string; }; output: "ok"; transformer: false; errorShape: DefaultErrorShape; featureFlags: { keyPrefix: false; }; }>.mutationKey: () => TRPCMutationKeyWithoutPrefixmutationKey();

`subscriptionOptions` - creating subscription options

TanStack does not provide a subscription hook, so we continue to expose our own abstraction here which works with a standard tRPC subscription setup. Available for all subscription procedures. Provides a type-safe identity function for constructing options that can be passed to useSubscription. Note that you need to have either the httpSubscriptionLink or wsLink configured in your tRPC client to use subscriptions.

function function SubscriptionExample(): React.JSX.ElementSubscriptionExample() {
  const const trpc: TRPCOptionsProxy<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    path: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        to: BuiltRouter<{
            ctx: object;
            meta: object;
            errorShape: DefaultErrorShape;
            transformer: false;
        }, DecorateCreateRouterOptions<{
            subscription: SubscriptionProcedure<{
                input: {
                    channel?: string | undefined;
                } | undefined;
                output: AsyncIterable<string, void, any>;
                meta: object;
                errorShape: DefaultErrorShape;
            }>;
        }>>;
    }>>;
}>>, {
    ...;
}>trpc = function useTRPC(): TRPCOptionsProxy<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    path: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        to: BuiltRouter<{
            ctx: object;
            meta: object;
            errorShape: DefaultErrorShape;
            transformer: false;
        }, DecorateCreateRouterOptions<{
            subscription: SubscriptionProcedure<{
                input: {
                    channel?: string | undefined;
                } | undefined;
                output: AsyncIterable<string, void, any>;
                meta: object;
                errorShape: DefaultErrorShape;
            }>;
        }>>;
    }>>;
}>>, {
    ...;
}>useTRPC();
  const const subscription: TRPCSubscriptionResult<string, TRPCClientErrorLike<{
    input: void | {
        channel?: string | undefined;
    } | undefined;
    output: AsyncIterable<string, never, any>;
    transformer: false;
    errorShape: DefaultErrorShape;
    featureFlags: {
        keyPrefix: false;
    };
}>>subscription = useSubscription<string, TRPCClientErrorLike<{
    input: void | {
        channel?: string | undefined;
    } | undefined;
    output: AsyncIterable<string, never, any>;
    transformer: false;
    errorShape: DefaultErrorShape;
    featureFlags: {
        keyPrefix: false;
    };
}>>(opts: TRPCSubscriptionOptionsOut<string, TRPCClientErrorLike<{
    input: void | {
        channel?: string | undefined;
    } | undefined;
    output: AsyncIterable<string, never, any>;
    transformer: false;
    errorShape: DefaultErrorShape;
    featureFlags: {
        keyPrefix: false;
    };
}>, any>): TRPCSubscriptionResult<...>useSubscription(
    const trpc: TRPCOptionsProxy<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    path: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        to: BuiltRouter<{
            ctx: object;
            meta: object;
            errorShape: DefaultErrorShape;
            transformer: false;
        }, DecorateCreateRouterOptions<{
            subscription: SubscriptionProcedure<{
                input: {
                    channel?: string | undefined;
                } | undefined;
                output: AsyncIterable<string, void, any>;
                meta: object;
                errorShape: DefaultErrorShape;
            }>;
        }>>;
    }>>;
}>>, {
    ...;
}>trpc.path: DecoratedRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    to: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        subscription: SubscriptionProcedure<{
            input: {
                channel?: string | undefined;
            } | undefined;
            output: AsyncIterable<string, void, any>;
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>, {
    ...;
}> & DecorateRouterKeyable<...>path.to: DecoratedRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    subscription: SubscriptionProcedure<{
        input: {
            channel?: string | undefined;
        } | undefined;
        output: AsyncIterable<string, void, any>;
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>, {
    ...;
}> & DecorateRouterKeyable<...>to.subscription: DecorateSubscriptionProcedure<{
    input: void | {
        channel?: string | undefined;
    } | undefined;
    output: AsyncIterable<string, never, any>;
    transformer: false;
    errorShape: DefaultErrorShape;
    featureFlags: {
        keyPrefix: false;
    };
}>subscription.DecorateSubscriptionProcedure<{ input: void | { channel?: string | undefined; } | undefined; output: AsyncIterable<string, never, any>; transformer: false; errorShape: DefaultErrorShape; featureFlags: { ...; }; }>.subscriptionOptions: TRPCSubscriptionOptions
(input: void | {
    channel?: string | undefined;
} | unique symbol | undefined, opts?: BaseTRPCSubscriptionOptionsIn<string, TRPCClientErrorLike<{
    input: void | {
        channel?: string | undefined;
    } | undefined;
    output: AsyncIterable<string, never, any>;
    transformer: false;
    errorShape: DefaultErrorShape;
    featureFlags: {
        keyPrefix: false;
    };
}>> | undefined) => TRPCSubscriptionOptionsOut<string, TRPCClientErrorLike<{
    input: void | {
        channel?: string | undefined;
    } | undefined;
    output: AsyncIterable<string, never, any>;
    transformer: false;
    errorShape: DefaultErrorShape;
    featureFlags: {
        keyPrefix: false;
    };
}>, {
    ...;
}> (+1 overload)subscriptionOptions(
      {
        /** input */
      },
      {
        BaseTRPCSubscriptionOptionsIn<string, TRPCClientErrorLike<{ input: void | { channel?: string | undefined; } | undefined; output: AsyncIterable<string, never, any>; transformer: false; errorShape: DefaultErrorShape; featureFlags: { ...; }; }>>.enabled?: boolean | undefinedenabled: true,
        BaseTRPCSubscriptionOptionsIn<string, TRPCClientErrorLike<{ input: void | { channel?: string | undefined; } | undefined; output: AsyncIterable<string, never, any>; transformer: false; errorShape: DefaultErrorShape; featureFlags: { ...; }; }>>.onStarted?: (() => void) | undefinedonStarted: () => {
          // do something when the subscription is started
        },
        BaseTRPCSubscriptionOptionsIn<string, TRPCClientErrorLike<{ input: void | { channel?: string | undefined; } | undefined; output: AsyncIterable<string, never, any>; transformer: false; errorShape: DefaultErrorShape; featureFlags: { ...; }; }>>.onData?: ((data: string) => void) | undefinedonData: (data: stringdata) => {
          // you can handle the data here
        },
        BaseTRPCSubscriptionOptionsIn<string, TRPCClientErrorLike<{ input: void | { channel?: string | undefined; } | undefined; output: AsyncIterable<string, never, any>; transformer: false; errorShape: DefaultErrorShape; featureFlags: { ...; }; }>>.onError?: ((err: TRPCClientErrorLike<{
    input: void | {
        channel?: string | undefined;
    } | undefined;
    output: AsyncIterable<string, never, any>;
    transformer: false;
    errorShape: DefaultErrorShape;
    featureFlags: {
        keyPrefix: false;
    };
}>) => void) | undefinedonError: (error: TRPCClientErrorLike<{
    input: void | {
        channel?: string | undefined;
    } | undefined;
    output: AsyncIterable<string, never, any>;
    transformer: false;
    errorShape: DefaultErrorShape;
    featureFlags: {
        keyPrefix: false;
    };
}>error) => {
          // you can handle the error here
        },
        BaseTRPCSubscriptionOptionsIn<string, TRPCClientErrorLike<{ input: void | { channel?: string | undefined; } | undefined; output: AsyncIterable<string, never, any>; transformer: false; errorShape: DefaultErrorShape; featureFlags: { ...; }; }>>.onConnectionStateChange?: ((state: TRPCConnectionState<TRPCClientErrorLike<{
    input: void | {
        channel?: string | undefined;
    } | undefined;
    output: AsyncIterable<string, never, any>;
    transformer: false;
    errorShape: DefaultErrorShape;
    featureFlags: {
        keyPrefix: false;
    };
}>>) => void) | undefinedonConnectionStateChange: (state: TRPCConnectionState<TRPCClientErrorLike<{
    input: void | {
        channel?: string | undefined;
    } | undefined;
    output: AsyncIterable<string, never, any>;
    transformer: false;
    errorShape: DefaultErrorShape;
    featureFlags: {
        keyPrefix: false;
    };
}>>state) => {
          // you can handle the connection state here
        },
      },
    ),
  );

  // Or you can handle the state here
  const subscription: TRPCSubscriptionResult<string, TRPCClientErrorLike<{
    input: void | {
        channel?: string | undefined;
    } | undefined;
    output: AsyncIterable<string, never, any>;
    transformer: false;
    errorShape: DefaultErrorShape;
    featureFlags: {
        keyPrefix: false;
    };
}>>subscription.data: string | undefineddata; // The lastly received data
  const subscription: TRPCSubscriptionResult<string, TRPCClientErrorLike<{
    input: void | {
        channel?: string | undefined;
    } | undefined;
    output: AsyncIterable<string, never, any>;
    transformer: false;
    errorShape: DefaultErrorShape;
    featureFlags: {
        keyPrefix: false;
    };
}>>subscription.error: TRPCClientErrorLike<{
    input: void | {
        channel?: string | undefined;
    } | undefined;
    output: AsyncIterable<string, never, any>;
    transformer: false;
    errorShape: DefaultErrorShape;
    featureFlags: {
        keyPrefix: false;
    };
}> | nullerror; // The lastly received error

  /**
   * The current status of the subscription.
   * Will be one of: `'idle'`, `'connecting'`, `'pending'`, or `'error'`.
   *
   * - `idle`: subscription is disabled or ended
   * - `connecting`: trying to establish a connection
   * - `pending`: connected to the server, receiving data
   * - `error`: an error occurred and the subscription is stopped
   */
  const subscription: TRPCSubscriptionResult<string, TRPCClientErrorLike<{
    input: void | {
        channel?: string | undefined;
    } | undefined;
    output: AsyncIterable<string, never, any>;
    transformer: false;
    errorShape: DefaultErrorShape;
    featureFlags: {
        keyPrefix: false;
    };
}>>subscription.status: "connecting" | "idle" | "error" | "pending"status;

  // Reset the subscription (if you have an error etc)
  const subscription: TRPCSubscriptionResult<string, TRPCClientErrorLike<{
    input: void | {
        channel?: string | undefined;
    } | undefined;
    output: AsyncIterable<string, never, any>;
    transformer: false;
    errorShape: DefaultErrorShape;
    featureFlags: {
        keyPrefix: false;
    };
}>>subscription.TRPCSubscriptionBaseResult<TOutput, TError>.reset: () => voidreset();

  return <>{/* ... */}</>;
}

Query Key Prefixing

When using multiple tRPC providers in a single application (e.g., connecting to different backend services), queries with the same path will collide in the cache. You can prevent this by enabling query key prefixing.

// Without prefixes - these would collide!
const const authQuery: UseQueryResult<{
    id: string;
}[], TRPCClientErrorLike<{
    transformer: false;
    errorShape: DefaultErrorShape;
}>>authQuery = useQuery<{
    id: string;
}[], TRPCClientErrorLike<{
    transformer: false;
    errorShape: DefaultErrorShape;
}>, {
    id: string;
}[], TRPCQueryKeyWithoutPrefix>(options: UndefinedInitialDataOptions<{
    id: string;
}[], TRPCClientErrorLike<{
    transformer: false;
    errorShape: DefaultErrorShape;
}>, {
    id: string;
}[], TRPCQueryKeyWithoutPrefix>, queryClient?: QueryClient): UseQueryResult<{
    id: string;
}[], TRPCClientErrorLike<...>> (+2 overloads)useQuery(const trpcAuth: TRPCOptionsProxy<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>, {
    keyPrefix: false;
}>trpcAuth.list: DecorateQueryProcedure<{
    input: void;
    output: {
        id: string;
    }[];
    transformer: false;
    errorShape: DefaultErrorShape;
    featureFlags: {
        keyPrefix: false;
    };
}> & DecorateInfiniteQueryProcedure<{
    input: void;
    output: {
        id: string;
    }[];
    transformer: false;
    errorShape: DefaultErrorShape;
    featureFlags: {
        keyPrefix: false;
    };
}>list.DecorateQueryProcedure<{ input: void; output: { id: string; }[]; transformer: false; errorShape: DefaultErrorShape; featureFlags: { keyPrefix: false; }; }>.queryOptions: TRPCQueryOptions
<{
    id: string;
}[], {
    id: string;
}[]>(input: void, opts?: UnusedSkipTokenTRPCQueryOptionsIn<{
    id: string;
}[], {
    id: string;
}[], TRPCClientErrorLike<{
    transformer: false;
    errorShape: DefaultErrorShape;
}>, {
    keyPrefix: false;
}> | undefined) => UnusedSkipTokenTRPCQueryOptionsOut<{
    id: string;
}[], {
    id: string;
}[], TRPCClientErrorLike<{
    transformer: false;
    errorShape: DefaultErrorShape;
}>, {
    keyPrefix: false;
}> (+2 overloads)queryOptions()); // auth service
const const billingQuery: UseQueryResult<{
    id: string;
}[], TRPCClientErrorLike<{
    transformer: false;
    errorShape: DefaultErrorShape;
}>>billingQuery = useQuery<{
    id: string;
}[], TRPCClientErrorLike<{
    transformer: false;
    errorShape: DefaultErrorShape;
}>, {
    id: string;
}[], TRPCQueryKeyWithoutPrefix>(options: UndefinedInitialDataOptions<{
    id: string;
}[], TRPCClientErrorLike<{
    transformer: false;
    errorShape: DefaultErrorShape;
}>, {
    id: string;
}[], TRPCQueryKeyWithoutPrefix>, queryClient?: QueryClient): UseQueryResult<{
    id: string;
}[], TRPCClientErrorLike<...>> (+2 overloads)useQuery(const trpcBilling: TRPCOptionsProxy<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>, {
    keyPrefix: false;
}>trpcBilling.list: DecorateQueryProcedure<{
    input: void;
    output: {
        id: string;
    }[];
    transformer: false;
    errorShape: DefaultErrorShape;
    featureFlags: {
        keyPrefix: false;
    };
}> & DecorateInfiniteQueryProcedure<{
    input: void;
    output: {
        id: string;
    }[];
    transformer: false;
    errorShape: DefaultErrorShape;
    featureFlags: {
        keyPrefix: false;
    };
}>list.DecorateQueryProcedure<{ input: void; output: { id: string; }[]; transformer: false; errorShape: DefaultErrorShape; featureFlags: { keyPrefix: false; }; }>.queryOptions: TRPCQueryOptions
<{
    id: string;
}[], {
    id: string;
}[]>(input: void, opts?: UnusedSkipTokenTRPCQueryOptionsIn<{
    id: string;
}[], {
    id: string;
}[], TRPCClientErrorLike<{
    transformer: false;
    errorShape: DefaultErrorShape;
}>, {
    keyPrefix: false;
}> | undefined) => UnusedSkipTokenTRPCQueryOptionsOut<{
    id: string;
}[], {
    id: string;
}[], TRPCClientErrorLike<{
    transformer: false;
    errorShape: DefaultErrorShape;
}>, {
    keyPrefix: false;
}> (+2 overloads)queryOptions()); // billing service

Enable the feature flag when creating your context:

utils/trpc.ts

// [...]

const const billing: CreateTRPCContextResult<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>, {
    keyPrefix: true;
}>billing = createTRPCContext<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>, {
    keyPrefix: true;
}>(): CreateTRPCContextResult<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>, {
    keyPrefix: true;
}>createTRPCContext<type BillingRouter = Router<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>> & DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>BillingRouter, { keyPrefix: truekeyPrefix: true }>();
export const const BillingProvider: TRPCProviderType<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>, {
    keyPrefix: true;
}>BillingProvider = const billing: CreateTRPCContextResult<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>, {
    keyPrefix: true;
}>billing.CreateTRPCContextResult<BuiltRouter<{ ctx: object; meta: object; errorShape: DefaultErrorShape; transformer: false; }, DecorateCreateRouterOptions<{ list: QueryProcedure<{ input: void; output: { id: string; }[]; meta: object; errorShape: DefaultErrorShape; }>; }>>, { ...; }>.TRPCProvider: TRPCProviderType<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>, {
    keyPrefix: true;
}>TRPCProvider;
export const const useBilling: () => TRPCOptionsProxy<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>, {
    keyPrefix: true;
}>useBilling = const billing: CreateTRPCContextResult<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>, {
    keyPrefix: true;
}>billing.CreateTRPCContextResult<BuiltRouter<{ ctx: object; meta: object; errorShape: DefaultErrorShape; transformer: false; }, DecorateCreateRouterOptions<{ list: QueryProcedure<{ input: void; output: { id: string; }[]; meta: object; errorShape: DefaultErrorShape; }>; }>>, { ...; }>.useTRPC: () => TRPCOptionsProxy<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>, {
    keyPrefix: true;
}>useTRPC;
export const const createBillingClient: () => TRPCClient<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>>createBillingClient = () =>
  createTRPCClient<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>>(opts: CreateTRPCClientOptions<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>>): TRPCClient<...>createTRPCClient<type BillingRouter = Router<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>> & DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>BillingRouter>({
    links: TRPCLink<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>>[]links: [
      /* ... */
    ],
  });

const const account: CreateTRPCContextResult<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>, {
    keyPrefix: true;
}>account = createTRPCContext<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>, {
    keyPrefix: true;
}>(): CreateTRPCContextResult<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>, {
    keyPrefix: true;
}>createTRPCContext<type AccountRouter = Router<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>> & DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>AccountRouter, { keyPrefix: truekeyPrefix: true }>();
export const const AccountProvider: TRPCProviderType<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>, {
    keyPrefix: true;
}>AccountProvider = const account: CreateTRPCContextResult<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>, {
    keyPrefix: true;
}>account.CreateTRPCContextResult<BuiltRouter<{ ctx: object; meta: object; errorShape: DefaultErrorShape; transformer: false; }, DecorateCreateRouterOptions<{ list: QueryProcedure<{ input: void; output: { id: string; }[]; meta: object; errorShape: DefaultErrorShape; }>; }>>, { ...; }>.TRPCProvider: TRPCProviderType<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>, {
    keyPrefix: true;
}>TRPCProvider;
export const const useAccount: () => TRPCOptionsProxy<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>, {
    keyPrefix: true;
}>useAccount = const account: CreateTRPCContextResult<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>, {
    keyPrefix: true;
}>account.CreateTRPCContextResult<BuiltRouter<{ ctx: object; meta: object; errorShape: DefaultErrorShape; transformer: false; }, DecorateCreateRouterOptions<{ list: QueryProcedure<{ input: void; output: { id: string; }[]; meta: object; errorShape: DefaultErrorShape; }>; }>>, { ...; }>.useTRPC: () => TRPCOptionsProxy<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>, {
    keyPrefix: true;
}>useTRPC;
export const const createAccountClient: () => TRPCClient<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>>createAccountClient = () =>
  createTRPCClient<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>>(opts: CreateTRPCClientOptions<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>>): TRPCClient<...>createTRPCClient<type AccountRouter = Router<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>> & DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>AccountRouter>({
    links: TRPCLink<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>>[]links: [
      /* ... */
    ],
  });

App.tsx

import { function useState<S>(initialState: S | (() => S)): [S, React.Dispatch<React.SetStateAction<S>>] (+1 overload)useState } from 'react';
import { class QueryClientQueryClient, const QueryClientProvider: ({ client, children }: QueryClientProviderProps) => React.JSX.ElementQueryClientProvider } from '@tanstack/react-query';
import {
  const BillingProvider: TRPCProviderType<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>, {
    keyPrefix: true;
}>BillingProvider,
  const AccountProvider: TRPCProviderType<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>, {
    keyPrefix: true;
}>AccountProvider,
  const createBillingClient: () => TRPCClient<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>>createBillingClient,
  const createAccountClient: () => TRPCClient<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>>createAccountClient,
} from './utils/trpc';

// [...]

export function function App(): React.JSX.ElementApp() {
  const [const queryClient: QueryClientqueryClient] = useState<QueryClient>(initialState: QueryClient | (() => QueryClient)): [QueryClient, React.Dispatch<React.SetStateAction<QueryClient>>] (+1 overload)useState(() => new new QueryClient(config?: QueryClientConfig): QueryClientQueryClient());
  const [const billingClient: TRPCClient<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>>billingClient] = useState<TRPCClient<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>>>(initialState: TRPCClient<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>> | (() => TRPCClient<...>)): [...] (+1 overload)useState(() => function createBillingClient(): TRPCClient<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>>createBillingClient());
  const [const accountClient: TRPCClient<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>>accountClient] = useState<TRPCClient<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>>>(initialState: TRPCClient<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>> | (() => TRPCClient<...>)): [...] (+1 overload)useState(() => function createAccountClient(): TRPCClient<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>>createAccountClient());

  return (
    <const QueryClientProvider: ({ client, children }: QueryClientProviderProps) => React.JSX.ElementQueryClientProvider client: QueryClientclient={const queryClient: QueryClientqueryClient}>
      <const BillingProvider: TRPCProviderType<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>, {
    keyPrefix: true;
}>BillingProvider
        trpcClient: TRPCClient<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>>trpcClient={const billingClient: TRPCClient<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>>billingClient}
        queryClient: QueryClientqueryClient={const queryClient: QueryClientqueryClient}
        keyPrefix: stringkeyPrefix="billing"
      >
        <const AccountProvider: TRPCProviderType<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>, {
    keyPrefix: true;
}>AccountProvider
          trpcClient: TRPCClient<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>>trpcClient={const accountClient: TRPCClient<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>>accountClient}
          queryClient: QueryClientqueryClient={const queryClient: QueryClientqueryClient}
          keyPrefix: stringkeyPrefix="account"
        >
          <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>{/* ... */}</React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
        </const AccountProvider: TRPCProviderType<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>, {
    keyPrefix: true;
}>AccountProvider>
      </const BillingProvider: TRPCProviderType<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>, {
    keyPrefix: true;
}>BillingProvider>
    </const QueryClientProvider: ({ client, children }: QueryClientProviderProps) => React.JSX.ElementQueryClientProvider>
  );
}

components/MyComponent.tsx

import { function useQuery<TQueryFnData = unknown, TError = Error, TData = TQueryFnData, TQueryKey extends QueryKey = readonly unknown[]>(options: DefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>, queryClient?: QueryClient): DefinedUseQueryResult<TData, TError> (+2 overloads)useQuery } from '@tanstack/react-query';
import { const useBilling: () => TRPCOptionsProxy<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>, {
    keyPrefix: true;
}>useBilling, const useAccount: () => TRPCOptionsProxy<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>, {
    keyPrefix: true;
}>useAccount } from '../utils/trpc';

// [...]

export function function MyComponent(): React.JSX.ElementMyComponent() {
  const const billing: TRPCOptionsProxy<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>, {
    keyPrefix: true;
}>billing = function useBilling(): TRPCOptionsProxy<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>, {
    keyPrefix: true;
}>useBilling();
  const const account: TRPCOptionsProxy<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>, {
    keyPrefix: true;
}>account = function useAccount(): TRPCOptionsProxy<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>, {
    keyPrefix: true;
}>useAccount();

  const const billingList: UseQueryResult<{
    id: string;
}[], TRPCClientErrorLike<{
    transformer: false;
    errorShape: DefaultErrorShape;
}>>billingList = useQuery<{
    id: string;
}[], TRPCClientErrorLike<{
    transformer: false;
    errorShape: DefaultErrorShape;
}>, {
    id: string;
}[], TRPCQueryKeyWithoutPrefix>(options: UndefinedInitialDataOptions<{
    id: string;
}[], TRPCClientErrorLike<{
    transformer: false;
    errorShape: DefaultErrorShape;
}>, {
    id: string;
}[], TRPCQueryKeyWithoutPrefix>, queryClient?: QueryClient): UseQueryResult<{
    id: string;
}[], TRPCClientErrorLike<...>> (+2 overloads)useQuery(const billing: TRPCOptionsProxy<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>, {
    keyPrefix: true;
}>billing.list: DecorateQueryProcedure<{
    input: void;
    output: {
        id: string;
    }[];
    transformer: false;
    errorShape: DefaultErrorShape;
    featureFlags: {
        keyPrefix: true;
    };
}> & DecorateInfiniteQueryProcedure<{
    input: void;
    output: {
        id: string;
    }[];
    transformer: false;
    errorShape: DefaultErrorShape;
    featureFlags: {
        keyPrefix: true;
    };
}>list.DecorateQueryProcedure<{ input: void; output: { id: string; }[]; transformer: false; errorShape: DefaultErrorShape; featureFlags: { keyPrefix: true; }; }>.queryOptions: TRPCQueryOptions
<{
    id: string;
}[], {
    id: string;
}[]>(input: void, opts?: UnusedSkipTokenTRPCQueryOptionsIn<{
    id: string;
}[], {
    id: string;
}[], TRPCClientErrorLike<{
    transformer: false;
    errorShape: DefaultErrorShape;
}>, {
    keyPrefix: false;
}> | undefined) => UnusedSkipTokenTRPCQueryOptionsOut<{
    id: string;
}[], {
    id: string;
}[], TRPCClientErrorLike<{
    transformer: false;
    errorShape: DefaultErrorShape;
}>, {
    keyPrefix: false;
}> (+2 overloads)queryOptions());
  const const accountList: UseQueryResult<{
    id: string;
}[], TRPCClientErrorLike<{
    transformer: false;
    errorShape: DefaultErrorShape;
}>>accountList = useQuery<{
    id: string;
}[], TRPCClientErrorLike<{
    transformer: false;
    errorShape: DefaultErrorShape;
}>, {
    id: string;
}[], TRPCQueryKeyWithoutPrefix>(options: UndefinedInitialDataOptions<{
    id: string;
}[], TRPCClientErrorLike<{
    transformer: false;
    errorShape: DefaultErrorShape;
}>, {
    id: string;
}[], TRPCQueryKeyWithoutPrefix>, queryClient?: QueryClient): UseQueryResult<{
    id: string;
}[], TRPCClientErrorLike<...>> (+2 overloads)useQuery(const account: TRPCOptionsProxy<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>, {
    keyPrefix: true;
}>account.list: DecorateQueryProcedure<{
    input: void;
    output: {
        id: string;
    }[];
    transformer: false;
    errorShape: DefaultErrorShape;
    featureFlags: {
        keyPrefix: true;
    };
}> & DecorateInfiniteQueryProcedure<{
    input: void;
    output: {
        id: string;
    }[];
    transformer: false;
    errorShape: DefaultErrorShape;
    featureFlags: {
        keyPrefix: true;
    };
}>list.DecorateQueryProcedure<{ input: void; output: { id: string; }[]; transformer: false; errorShape: DefaultErrorShape; featureFlags: { keyPrefix: true; }; }>.queryOptions: TRPCQueryOptions
<{
    id: string;
}[], {
    id: string;
}[]>(input: void, opts?: UnusedSkipTokenTRPCQueryOptionsIn<{
    id: string;
}[], {
    id: string;
}[], TRPCClientErrorLike<{
    transformer: false;
    errorShape: DefaultErrorShape;
}>, {
    keyPrefix: false;
}> | undefined) => UnusedSkipTokenTRPCQueryOptionsOut<{
    id: string;
}[], {
    id: string;
}[], TRPCClientErrorLike<{
    transformer: false;
    errorShape: DefaultErrorShape;
}>, {
    keyPrefix: false;
}> (+2 overloads)queryOptions());

  return (
    <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
      <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>Billing: {var JSON: JSONJSON.JSON.stringify(value: any, replacer?: (this: any, key: string, value: any) => any, space?: string | number): string (+1 overload)stringify(const billingList: UseQueryResult<{
    id: string;
}[], TRPCClientErrorLike<{
    transformer: false;
    errorShape: DefaultErrorShape;
}>>billingList.data: {
    id: string;
}[] | undefineddata ?? null)}</React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
      <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>Account: {var JSON: JSONJSON.JSON.stringify(value: any, replacer?: (this: any, key: string, value: any) => any, space?: string | number): string (+1 overload)stringify(const accountList: UseQueryResult<{
    id: string;
}[], TRPCClientErrorLike<{
    transformer: false;
    errorShape: DefaultErrorShape;
}>>accountList.data: {
    id: string;
}[] | undefineddata ?? null)}</React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
    </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
  );
}

The query keys will be properly prefixed to avoid collisions:

// Example of how the query keys look with prefixes
const const queryKeys: (string[] | {
    type: string;
})[][]queryKeys = [
  [['billing'], ['list'], { type: stringtype: 'query' }],
  [['account'], ['list'], { type: stringtype: 'query' }],
];

Inferring Input and Output types

When you need to infer the input and output types for a procedure or router, there are 2 options available depending on the situation.

Infer the input and output types of a full router

import type { type inferRouterInputs<TRouter extends AnyRouter> = { [TKey in keyof TRouter["_def"]["record"]]: TRouter["_def"]["record"][TKey] extends infer $Value ? $Value extends AnyProcedure ? inferProcedureInput<$Value> : $Value extends RouterRecord ? GetInferenceHelpers<"input", TRouter["_def"]["_config"]["$types"], $Value> : never : never; }inferRouterInputs, type inferRouterOutputs<TRouter extends AnyRouter> = { [TKey in keyof TRouter["_def"]["record"]]: TRouter["_def"]["record"][TKey] extends infer $Value ? $Value extends AnyProcedure ? inferTransformedProcedureOutput<TRouter["_def"]["_config"]["$types"], $Value> : $Value extends RouterRecord ? GetInferenceHelpers<"output", TRouter["_def"]["_config"]["$types"], $Value> : never : never; }inferRouterOutputs } from '@trpc/server';
import type { type AppRouter = Router<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    getUser: QueryProcedure<{
        input: {
            id: string;
        };
        output: {
            name: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>> & DecorateCreateRouterOptions<{
    getUser: QueryProcedure<{
        input: {
            id: string;
        };
        output: {
            name: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>AppRouter } from './server/router';

export type type Inputs = {
    getUser: {
        id: string;
    };
}Inputs = type inferRouterInputs<TRouter extends AnyRouter> = { [TKey in keyof TRouter["_def"]["record"]]: TRouter["_def"]["record"][TKey] extends infer $Value ? $Value extends AnyProcedure ? inferProcedureInput<$Value> : $Value extends RouterRecord ? GetInferenceHelpers<"input", TRouter["_def"]["_config"]["$types"], $Value> : never : never; }inferRouterInputs<type AppRouter = Router<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    getUser: QueryProcedure<{
        input: {
            id: string;
        };
        output: {
            name: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>> & DecorateCreateRouterOptions<{
    getUser: QueryProcedure<{
        input: {
            id: string;
        };
        output: {
            name: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>AppRouter>;
export type type Outputs = {
    getUser: {
        name: string;
    };
}Outputs = type inferRouterOutputs<TRouter extends AnyRouter> = { [TKey in keyof TRouter["_def"]["record"]]: TRouter["_def"]["record"][TKey] extends infer $Value ? $Value extends AnyProcedure ? inferTransformedProcedureOutput<TRouter["_def"]["_config"]["$types"], $Value> : $Value extends RouterRecord ? GetInferenceHelpers<"output", TRouter["_def"]["_config"]["$types"], $Value> : never : never; }inferRouterOutputs<type AppRouter = Router<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    getUser: QueryProcedure<{
        input: {
            id: string;
        };
        output: {
            name: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>> & DecorateCreateRouterOptions<{
    getUser: QueryProcedure<{
        input: {
            id: string;
        };
        output: {
            name: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>AppRouter>;

Infer types for a single procedure

import type { type inferInput<TProcedure extends DecorateInfiniteQueryProcedure<any> | DecorateQueryProcedure<any> | DecorateMutationProcedure<any>> = TProcedure["~types"]["input"]inferInput, type inferOutput<TProcedure extends DecorateInfiniteQueryProcedure<any> | DecorateQueryProcedure<any> | DecorateMutationProcedure<any>> = TProcedure["~types"]["output"]inferOutput } from '@trpc/tanstack-react-query';

function function Component(): voidComponent() {
  const const trpc: TRPCOptionsProxy<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    path: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        to: BuiltRouter<{
            ctx: object;
            meta: object;
            errorShape: DefaultErrorShape;
            transformer: false;
        }, DecorateCreateRouterOptions<{
            procedure: QueryProcedure<{
                input: {
                    id: string;
                };
                output: {
                    name: string;
                };
                meta: object;
                errorShape: DefaultErrorShape;
            }>;
        }>>;
    }>>;
}>>, {
    ...;
}>trpc = function useTRPC(): TRPCOptionsProxy<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    path: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        to: BuiltRouter<{
            ctx: object;
            meta: object;
            errorShape: DefaultErrorShape;
            transformer: false;
        }, DecorateCreateRouterOptions<{
            procedure: QueryProcedure<{
                input: {
                    id: string;
                };
                output: {
                    name: string;
                };
                meta: object;
                errorShape: DefaultErrorShape;
            }>;
        }>>;
    }>>;
}>>, {
    ...;
}>useTRPC();

  type type Input = {
    id: string;
}Input = type inferInput<TProcedure extends DecorateInfiniteQueryProcedure<any> | DecorateQueryProcedure<any> | DecorateMutationProcedure<any>> = TProcedure["~types"]["input"]inferInput<typeof const trpc: TRPCOptionsProxy<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    path: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        to: BuiltRouter<{
            ctx: object;
            meta: object;
            errorShape: DefaultErrorShape;
            transformer: false;
        }, DecorateCreateRouterOptions<{
            procedure: QueryProcedure<{
                input: {
                    id: string;
                };
                output: {
                    name: string;
                };
                meta: object;
                errorShape: DefaultErrorShape;
            }>;
        }>>;
    }>>;
}>>, {
    ...;
}>trpc.path: DecoratedRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    to: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        procedure: QueryProcedure<{
            input: {
                id: string;
            };
            output: {
                name: string;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>, {
    ...;
}> & DecorateRouterKeyable<...>path.to: DecoratedRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    procedure: QueryProcedure<{
        input: {
            id: string;
        };
        output: {
            name: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>, {
    ...;
}> & DecorateRouterKeyable<...>to.procedure: DecorateQueryProcedure<{
    input: {
        id: string;
    };
    output: {
        name: string;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
    featureFlags: {
        keyPrefix: false;
    };
}> & Record<string, never>procedure>;
  type type Output = {
    name: string;
}Output = type inferOutput<TProcedure extends DecorateInfiniteQueryProcedure<any> | DecorateQueryProcedure<any> | DecorateMutationProcedure<any>> = TProcedure["~types"]["output"]inferOutput<typeof const trpc: TRPCOptionsProxy<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    path: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        to: BuiltRouter<{
            ctx: object;
            meta: object;
            errorShape: DefaultErrorShape;
            transformer: false;
        }, DecorateCreateRouterOptions<{
            procedure: QueryProcedure<{
                input: {
                    id: string;
                };
                output: {
                    name: string;
                };
                meta: object;
                errorShape: DefaultErrorShape;
            }>;
        }>>;
    }>>;
}>>, {
    ...;
}>trpc.path: DecoratedRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    to: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        procedure: QueryProcedure<{
            input: {
                id: string;
            };
            output: {
                name: string;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>, {
    ...;
}> & DecorateRouterKeyable<...>path.to: DecoratedRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    procedure: QueryProcedure<{
        input: {
            id: string;
        };
        output: {
            name: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>, {
    ...;
}> & DecorateRouterKeyable<...>to.procedure: DecorateQueryProcedure<{
    input: {
        id: string;
    };
    output: {
        name: string;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
    featureFlags: {
        keyPrefix: false;
    };
}> & Record<string, never>procedure>;
}

Accessing the tRPC client

If you used the setup with React Context, you can access the tRPC client using the useTRPCClient hook.

import { const useTRPCClient: () => TRPCClient<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    getUser: QueryProcedure<{
        input: {
            id: string;
        };
        output: {
            name: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>>useTRPCClient } from './trpc';

async function function Component(): Promise<void>Component() {
  const const trpcClient: TRPCClient<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    getUser: QueryProcedure<{
        input: {
            id: string;
        };
        output: {
            name: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>>trpcClient = function useTRPCClient(): TRPCClient<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    getUser: QueryProcedure<{
        input: {
            id: string;
        };
        output: {
            name: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>>useTRPCClient();

  const const result: {
    name: string;
}result = await const trpcClient: TRPCClient<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    getUser: QueryProcedure<{
        input: {
            id: string;
        };
        output: {
            name: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>>trpcClient.getUser: {
    query: Resolver<{
        input: {
            id: string;
        };
        output: {
            name: string;
        };
        errorShape: DefaultErrorShape;
        transformer: false;
    }>;
}getUser.query: (input: {
    id: string;
}, opts?: TRPCProcedureOptions) => TRPCTaggedPromise<{
    name: string;
}, DefaultErrorShape>query({
    id: stringid: '1',
  });
}

If you setup without React Context, you can import the global client instance directly instead.

import { const client: TRPCClient<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    path: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        to: BuiltRouter<{
            ctx: object;
            meta: object;
            errorShape: DefaultErrorShape;
            transformer: false;
        }, DecorateCreateRouterOptions<{
            procedure: QueryProcedure<{
                input: {
                    id: string;
                };
                output: {
                    name: string;
                };
                meta: object;
                errorShape: DefaultErrorShape;
            }>;
        }>>;
    }>>;
}>>>client } from './trpc';

const const result: {
    name: string;
}result = await const client: TRPCClient<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    path: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        to: BuiltRouter<{
            ctx: object;
            meta: object;
            errorShape: DefaultErrorShape;
            transformer: false;
        }, DecorateCreateRouterOptions<{
            procedure: QueryProcedure<{
                input: {
                    id: string;
                };
                output: {
                    name: string;
                };
                meta: object;
                errorShape: DefaultErrorShape;
            }>;
        }>>;
    }>>;
}>>>client.path: DecoratedProcedureRecord<{
    transformer: false;
    errorShape: DefaultErrorShape;
}, DecorateCreateRouterOptions<{
    to: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        procedure: QueryProcedure<{
            input: {
                id: string;
            };
            output: {
                name: string;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>path.to: DecoratedProcedureRecord<{
    transformer: false;
    errorShape: DefaultErrorShape;
}, DecorateCreateRouterOptions<{
    procedure: QueryProcedure<{
        input: {
            id: string;
        };
        output: {
            name: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>to.procedure: {
    query: Resolver<{
        input: {
            id: string;
        };
        output: {
            name: string;
        };
        errorShape: DefaultErrorShape;
        transformer: false;
    }>;
}procedure.query: (input: {
    id: string;
}, opts?: TRPCProcedureOptions) => TRPCTaggedPromise<{
    name: string;
}, DefaultErrorShape>query({
  /** input */
  id: stringid: 'foo',
});