Inferring Types (v11)

In addition to the type inference made available by @trpc/server (see here) this integration also provides some inference helpers for usage purely in React.

Infer React Query options based on your router

When creating custom hooks around tRPC procedures, it's sometimes necessary to have the types of the options inferred from the router. You can do so via the inferReactQueryProcedureOptions helper exported from @trpc/react-query.

trpc.ts

import {
  function createTRPCReact<TRouter extends AnyRouter, TSSRContext = unknown>(opts?: CreateTRPCReactOptions<TRouter>): CreateTRPCReact<TRouter, TSSRContext>createTRPCReact,
  type type inferReactQueryProcedureOptions<TRouter extends AnyRouter> = { [TKey in keyof TRouter["_def"]["record"]]: TRouter["_def"]["record"][TKey] extends infer $Value ? $Value extends AnyQueryProcedure ? InferQueryOptions<TRouter["_def"]["_config"]["$types"], $Value, inferTransformedProcedureOutput<TRouter["_def"]["_config"]["$types"], $Value>> : $Value extends AnyMutationProcedure ? InferMutationOptions<TRouter["_def"]["_config"]["$types"], $Value, unknown> : $Value extends RouterRecord ? inferReactQueryProcedureOptionsInner<...> : never : never; }inferReactQueryProcedureOptions,
} from '@trpc/react-query';
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<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        list: QueryProcedure<{
            input: void;
            output: {
                id: number;
                title: string;
            }[];
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: string;
            output: {
                id: number;
                title: string;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        create: MutationProcedure<{
            input: {
                title: string;
                text: string;
            };
            output: {
                ...;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>> & DecorateCreateRouterOptions<...>AppRouter } from './server';

// infer the types for your router
export type type ReactQueryOptions = {
    post: inferReactQueryProcedureOptionsInner<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        list: QueryProcedure<{
            input: void;
            output: {
                id: number;
                title: string;
            }[];
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: string;
            output: {
                id: number;
                title: string;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        create: MutationProcedure<{
            input: {
                title: string;
                text: string;
            };
            output: {
                ...;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}ReactQueryOptions = type inferReactQueryProcedureOptions<TRouter extends AnyRouter> = { [TKey in keyof TRouter["_def"]["record"]]: TRouter["_def"]["record"][TKey] extends infer $Value ? $Value extends AnyQueryProcedure ? InferQueryOptions<TRouter["_def"]["_config"]["$types"], $Value, inferTransformedProcedureOutput<TRouter["_def"]["_config"]["$types"], $Value>> : $Value extends AnyMutationProcedure ? InferMutationOptions<TRouter["_def"]["_config"]["$types"], $Value, unknown> : $Value extends RouterRecord ? inferReactQueryProcedureOptionsInner<...> : never : never; }inferReactQueryProcedureOptions<type AppRouter = Router<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        list: QueryProcedure<{
            input: void;
            output: {
                id: number;
                title: string;
            }[];
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: string;
            output: {
                id: number;
                title: string;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        create: MutationProcedure<{
            input: {
                title: string;
                text: string;
            };
            output: {
                ...;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>> & DecorateCreateRouterOptions<...>AppRouter>;
export type type RouterInputs = {
    post: GetInferenceHelpers<"input", {
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        list: QueryProcedure<{
            input: void;
            output: {
                id: number;
                title: string;
            }[];
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: string;
            output: {
                id: number;
                title: string;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        create: MutationProcedure<{
            input: {
                title: string;
                text: string;
            };
            output: {
                ...;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}RouterInputs = 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<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        list: QueryProcedure<{
            input: void;
            output: {
                id: number;
                title: string;
            }[];
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: string;
            output: {
                id: number;
                title: string;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        create: MutationProcedure<{
            input: {
                title: string;
                text: string;
            };
            output: {
                ...;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>> & DecorateCreateRouterOptions<...>AppRouter>;
export type type RouterOutputs = {
    post: GetInferenceHelpers<"output", {
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        list: QueryProcedure<{
            input: void;
            output: {
                id: number;
                title: string;
            }[];
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: string;
            output: {
                id: number;
                title: string;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        create: MutationProcedure<{
            input: {
                title: string;
                text: string;
            };
            output: {
                ...;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}RouterOutputs = 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<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        list: QueryProcedure<{
            input: void;
            output: {
                id: number;
                title: string;
            }[];
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: string;
            output: {
                id: number;
                title: string;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        create: MutationProcedure<{
            input: {
                title: string;
                text: string;
            };
            output: {
                ...;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>> & DecorateCreateRouterOptions<...>AppRouter>;

export const const trpc: CreateTRPCReactBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        list: QueryProcedure<{
            input: void;
            output: {
                id: number;
                title: string;
            }[];
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: string;
            output: {
                id: number;
                title: string;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        create: MutationProcedure<{
            input: {
                title: string;
                text: string;
            };
            output: {
                ...;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>, unknown> & DecorateRouterRecord<...>trpc = createTRPCReact<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        list: QueryProcedure<{
            input: void;
            output: {
                id: number;
                title: string;
            }[];
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: string;
            output: {
                id: number;
                title: string;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        create: MutationProcedure<{
            input: {
                title: string;
                text: string;
            };
            output: {
                ...;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>, unknown>(opts?: CreateTRPCReactOptions<...> | undefined): CreateTRPCReactBase<...> & DecorateRouterRecord<...>createTRPCReact<type AppRouter = Router<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        list: QueryProcedure<{
            input: void;
            output: {
                id: number;
                title: string;
            }[];
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: string;
            output: {
                id: number;
                title: string;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        create: MutationProcedure<{
            input: {
                title: string;
                text: string;
            };
            output: {
                ...;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>> & DecorateCreateRouterOptions<...>AppRouter>();

usePostCreate.ts

import {
  const trpc: CreateTRPCReactBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        list: QueryProcedure<{
            input: void;
            output: {
                id: number;
                title: string;
            }[];
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: string;
            output: {
                id: number;
                title: string;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        create: MutationProcedure<{
            input: {
                title: string;
                text: string;
            };
            output: {
                ...;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>, unknown> & DecorateRouterRecord<...>trpc,
  type type ReactQueryOptions = {
    post: inferReactQueryProcedureOptionsInner<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        list: QueryProcedure<{
            input: void;
            output: {
                id: number;
                title: string;
            }[];
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: string;
            output: {
                id: number;
                title: string;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        create: MutationProcedure<{
            input: {
                title: string;
                text: string;
            };
            output: {
                ...;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}ReactQueryOptions,
  type type RouterInputs = {
    post: GetInferenceHelpers<"input", {
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        list: QueryProcedure<{
            input: void;
            output: {
                id: number;
                title: string;
            }[];
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: string;
            output: {
                id: number;
                title: string;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        create: MutationProcedure<{
            input: {
                title: string;
                text: string;
            };
            output: {
                ...;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}RouterInputs,
  type type RouterOutputs = {
    post: GetInferenceHelpers<"output", {
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        list: QueryProcedure<{
            input: void;
            output: {
                id: number;
                title: string;
            }[];
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: string;
            output: {
                id: number;
                title: string;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        create: MutationProcedure<{
            input: {
                title: string;
                text: string;
            };
            output: {
                ...;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}RouterOutputs,
} from './trpc';

type type PostCreateOptions = UseTRPCMutationOptions<{
    title: string;
    text: string;
}, TRPCClientErrorLike<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}>, {
    title: string;
    text: string;
    id: number;
}, unknown>PostCreateOptions = type ReactQueryOptions = {
    post: inferReactQueryProcedureOptionsInner<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        list: QueryProcedure<{
            input: void;
            output: {
                id: number;
                title: string;
            }[];
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: string;
            output: {
                id: number;
                title: string;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        create: MutationProcedure<{
            input: {
                title: string;
                text: string;
            };
            output: {
                ...;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}ReactQueryOptions['post']['create'];

function function usePostCreate(options?: PostCreateOptions): UseTRPCMutationResult<{
    title: string;
    text: string;
    id: number;
}, TRPCClientErrorLike<{
    input: {
        title: string;
        text: string;
    };
    output: {
        title: string;
        text: string;
        id: number;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>, {
    title: string;
    text: string;
}, unknown>usePostCreate(options: InferMutationOptions<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, MutationProcedure<{
    input: {
        title: string;
        text: string;
    };
    output: {
        title: string;
        text: string;
        id: number;
    };
    meta: object;
    errorShape: DefaultErrorShape;
}>, unknown> | undefinedoptions?: type PostCreateOptions = UseTRPCMutationOptions<{
    title: string;
    text: string;
}, TRPCClientErrorLike<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}>, {
    title: string;
    text: string;
    id: number;
}, unknown>PostCreateOptions) {
  const const utils: TRPCContextPropsBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        list: QueryProcedure<{
            input: void;
            output: {
                id: number;
                title: string;
            }[];
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: string;
            output: {
                id: number;
                title: string;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        create: MutationProcedure<{
            input: {
                title: string;
                text: string;
            };
            output: {
                title: string;
                text: string;
                id: number;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>, unknown> & {
    ...;
} & DecorateRouter & {
    ...;
}utils = const trpc: CreateTRPCReactBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        list: QueryProcedure<{
            input: void;
            output: {
                id: number;
                title: string;
            }[];
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: string;
            output: {
                id: number;
                title: string;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        create: MutationProcedure<{
            input: {
                title: string;
                text: string;
            };
            output: {
                title: string;
                text: string;
                id: number;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>, unknown> & DecorateRouterRecord<...>trpc.function useUtils(): TRPCContextPropsBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        list: QueryProcedure<{
            input: void;
            output: {
                id: number;
                title: string;
            }[];
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: string;
            output: {
                id: number;
                title: string;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        create: MutationProcedure<{
            input: {
                title: string;
                text: string;
            };
            output: {
                ...;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>, unknown> & {
    ...;
} & DecorateRouter & {
    ...;
}useUtils();

  return const trpc: CreateTRPCReactBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        list: QueryProcedure<{
            input: void;
            output: {
                id: number;
                title: string;
            }[];
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: string;
            output: {
                id: number;
                title: string;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        create: MutationProcedure<{
            input: {
                title: string;
                text: string;
            };
            output: {
                title: string;
                text: string;
                id: number;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>, unknown> & DecorateRouterRecord<...>trpc.post: DecorateRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: number;
            title: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
    byId: QueryProcedure<{
        input: string;
        output: {
            id: number;
            title: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
    create: MutationProcedure<{
        input: {
            title: string;
            text: string;
        };
        output: {
            title: string;
            text: string;
            id: number;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>post.create: DecoratedMutation<{
    input: {
        title: string;
        text: string;
    };
    output: {
        title: string;
        text: string;
        id: number;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>create.useMutation: <unknown>(opts?: UseTRPCMutationOptions<{
    title: string;
    text: string;
}, TRPCClientErrorLike<{
    input: {
        title: string;
        text: string;
    };
    output: {
        title: string;
        text: string;
        id: number;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>, {
    title: string;
    text: string;
    id: number;
}, unknown> | undefined) => UseTRPCMutationResult<{
    title: string;
    text: string;
    id: number;
}, TRPCClientErrorLike<{
    input: {
        title: string;
        text: string;
    };
    output: {
        title: string;
        text: string;
        id: number;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>, {
    title: string;
    text: string;
}, unknown>useMutation({
    ...options: InferMutationOptions<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, MutationProcedure<{
    input: {
        title: string;
        text: string;
    };
    output: {
        title: string;
        text: string;
        id: number;
    };
    meta: object;
    errorShape: DefaultErrorShape;
}>, unknown> | undefinedoptions,
    onSuccess?: ((data: {
    title: string;
    text: string;
    id: number;
}, variables: {
    title: string;
    text: string;
}, onMutateResult: unknown, context: MutationFunctionContext) => Promise<unknown> | unknown) | undefinedonSuccess(post: {
    title: string;
    text: string;
    id: number;
}post, variables: {
    title: string;
    text: string;
}variables, onMutateResult: unknownonMutateResult, context: MutationFunctionContextcontext) {
      // invalidate all queries on the post router
      // when a new post is created
      const utils: TRPCContextPropsBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        list: QueryProcedure<{
            input: void;
            output: {
                id: number;
                title: string;
            }[];
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: string;
            output: {
                id: number;
                title: string;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        create: MutationProcedure<{
            input: {
                title: string;
                text: string;
            };
            output: {
                ...;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>, unknown> & {
    ...;
} & DecorateRouter & {
    ...;
}utils.post: DecorateRouter & {
    list: DecorateQueryProcedure<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, QueryProcedure<{
        input: void;
        output: {
            id: number;
            title: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>>;
    byId: DecorateQueryProcedure<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, QueryProcedure<{
        input: string;
        output: {
            id: number;
            title: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>>;
    create: DecorateMutationProcedure<...>;
}post.function invalidate(input?: undefined, filters?: InvalidateQueryFilters, options?: InvalidateOptions): Promise<void>invalidate();
      options: InferMutationOptions<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, MutationProcedure<{
    input: {
        title: string;
        text: string;
    };
    output: {
        ...;
    };
    meta: object;
    errorShape: DefaultErrorShape;
}>, unknown> | undefinedoptions?.onSuccess?: ((data: {
    title: string;
    text: string;
    id: number;
}, variables: {
    title: string;
    text: string;
}, onMutateResult: unknown, context: MutationFunctionContext) => Promise<unknown> | unknown) | undefinedonSuccess?.(post: {
    title: string;
    text: string;
    id: number;
}post, variables: {
    title: string;
    text: string;
}variables, onMutateResult: unknownonMutateResult, context: MutationFunctionContextcontext);
    },
  });
}

usePostById.ts

import { type ReactQueryOptions = {
    post: inferReactQueryProcedureOptionsInner<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        list: QueryProcedure<{
            input: void;
            output: {
                id: number;
                title: string;
            }[];
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: string;
            output: {
                id: number;
                title: string;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        create: MutationProcedure<{
            input: {
                title: string;
                text: string;
            };
            output: {
                title: string;
                text: string;
                id: number;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}ReactQueryOptions, type RouterInputs = {
    post: GetInferenceHelpers<"input", {
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        list: QueryProcedure<{
            input: void;
            output: {
                id: number;
                title: string;
            }[];
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: string;
            output: {
                id: number;
                title: string;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        create: MutationProcedure<{
            input: {
                title: string;
                text: string;
            };
            output: {
                title: string;
                text: string;
                id: number;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}RouterInputs, const trpc: CreateTRPCReactBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        list: QueryProcedure<{
            input: void;
            output: {
                id: number;
                title: string;
            }[];
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: string;
            output: {
                id: number;
                title: string;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        create: MutationProcedure<{
            input: {
                title: string;
                text: string;
            };
            output: {
                title: string;
                text: string;
                id: number;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>, unknown> & DecorateRouterRecord<...>trpc } from './trpc';

type type PostByIdOptions = {
    meta?: QueryMeta | undefined;
    subscribed?: boolean | undefined;
    enabled?: QueryBooleanOption<{
        id: number;
        title: string;
    }, TRPCClientErrorLike<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }>, {
        id: number;
        title: string;
    }, any> | undefined;
    staleTime?: StaleTimeFunction<{
        id: number;
        title: string;
    }, TRPCClientErrorLike<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }>, {
        id: number;
        title: string;
    }, any> | undefined;
    ... 25 more ...;
    trpc?: TRPCReactRequestOptions | undefined;
}PostByIdOptions = type ReactQueryOptions = {
    post: inferReactQueryProcedureOptionsInner<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        list: QueryProcedure<{
            input: void;
            output: {
                id: number;
                title: string;
            }[];
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: string;
            output: {
                id: number;
                title: string;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        create: MutationProcedure<{
            input: {
                title: string;
                text: string;
            };
            output: {
                title: string;
                text: string;
                id: number;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}ReactQueryOptions['post']['byId'];
type type PostByIdInput = stringPostByIdInput = type RouterInputs = {
    post: GetInferenceHelpers<"input", {
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        list: QueryProcedure<{
            input: void;
            output: {
                id: number;
                title: string;
            }[];
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: string;
            output: {
                id: number;
                title: string;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        create: MutationProcedure<{
            input: {
                title: string;
                text: string;
            };
            output: {
                title: string;
                text: string;
                id: number;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}RouterInputs['post']['byId'];

function function usePostById(input: PostByIdInput, options?: PostByIdOptions): UseTRPCQueryResult<{
    id: number;
    title: string;
}, TRPCClientErrorLike<{
    input: string;
    output: {
        id: number;
        title: string;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>>usePostById(input: stringinput: type PostByIdInput = stringPostByIdInput, options: InferQueryOptions<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, QueryProcedure<{
    input: string;
    output: {
        id: number;
        title: string;
    };
    meta: object;
    errorShape: DefaultErrorShape;
}>, {
    id: number;
    title: string;
}> | undefinedoptions?: type PostByIdOptions = {
    meta?: QueryMeta | undefined;
    subscribed?: boolean | undefined;
    enabled?: QueryBooleanOption<{
        id: number;
        title: string;
    }, TRPCClientErrorLike<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }>, {
        id: number;
        title: string;
    }, any> | undefined;
    staleTime?: StaleTimeFunction<{
        id: number;
        title: string;
    }, TRPCClientErrorLike<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }>, {
        id: number;
        title: string;
    }, any> | undefined;
    ... 25 more ...;
    trpc?: TRPCReactRequestOptions | undefined;
}PostByIdOptions) {
  return const trpc: CreateTRPCReactBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        list: QueryProcedure<{
            input: void;
            output: {
                id: number;
                title: string;
            }[];
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: string;
            output: {
                id: number;
                title: string;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        create: MutationProcedure<{
            input: {
                title: string;
                text: string;
            };
            output: {
                ...;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>, unknown> & DecorateRouterRecord<...>trpc.post: DecorateRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: number;
            title: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
    byId: QueryProcedure<{
        input: string;
        output: {
            id: number;
            title: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
    create: MutationProcedure<{
        input: {
            title: string;
            text: string;
        };
        output: {
            ...;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>post.byId: DecoratedQuery<{
    input: string;
    output: {
        id: number;
        title: string;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>byId.useQuery: ProcedureUseQuery
<{
    id: number;
    title: string;
}, {
    id: number;
    title: string;
}>(input: string | unique symbol, opts?: UseTRPCQueryOptions<{
    id: number;
    title: string;
}, {
    id: number;
    title: string;
}, TRPCClientErrorLike<{
    input: string;
    output: {
        id: number;
        title: string;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>, {
    id: number;
    title: string;
}> | undefined) => UseTRPCQueryResult<{
    id: number;
    title: string;
}, TRPCClientErrorLike<{
    input: string;
    output: {
        id: number;
        title: string;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>> (+1 overload)useQuery(input: stringinput, options: InferQueryOptions<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, QueryProcedure<{
    input: string;
    output: {
        id: number;
        title: string;
    };
    meta: object;
    errorShape: DefaultErrorShape;
}>, {
    id: number;
    title: string;
}> | undefinedoptions);
}

Infer abstract types from a "Router Factory"

If you write a factory which creates a similar router interface several times in your application, you may wish to share client code between usages of the factory. @trpc/react-query/shared exports several types which can be used to generate abstract types for a router factory, and build common React components which are passed the router as a prop.

api/factory.ts


import { import zz } from 'zod';
import { const t: TRPCRootObject<object, object, RuntimeConfigOptions<object, object>, {
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}>t, const publicProcedure: ProcedureBuilder<object, object, object, UnsetMarker, UnsetMarker, UnsetMarker, UnsetMarker, false, DefaultErrorShape>publicProcedure } from './trpc';

// @trpc/react-query/shared exports several **Like types which can be used to generate abstract types
import { type RouterLike<TRouter extends AnyRouter> = { [TKey in keyof TRouter["_def"]["record"]]: TRouter["_def"]["record"][TKey] extends infer $Value ? $Value extends AnyQueryProcedure ? QueryLike<TRouter["_def"]["_config"]["$types"], $Value> : $Value extends AnyMutationProcedure ? MutationLike<TRouter["_def"]["_config"]["$types"], $Value> : $Value extends RouterRecord ? RouterLikeInner<TRouter["_def"]["_config"]["$types"], $Value> : never : never; }RouterLike, type UtilsLike<TRouter extends AnyRouter> = DecorateRouter & { [TKey in keyof TRouter["_def"]["record"]]: TRouter["_def"]["record"][TKey] extends infer $Value ? $Value extends AnyQueryProcedure ? DecorateQueryProcedure<TRouter["_def"]["_config"]["$types"], $Value> : $Value extends AnyMutationProcedure ? DecorateMutationProcedure<TRouter["_def"]["_config"]["$types"], $Value> : $Value extends RouterRecord ? DecorateRouter & { [TKey in keyof $Value]: $Value[TKey] extends infer $Value ? $Value extends AnyQueryProcedure ? DecorateQueryProcedure<...> : $Value extends AnyMutationProcedure ? DecorateMutationProcedure<...> : $Value extends RouterRecord ? DecorateRouter & ... : never : never; } : never : never; }UtilsLike } from '@trpc/react-query/shared';

const const ThingRequest: z.ZodObject<{
    name: z.ZodString;
}, z.core.$strip>ThingRequest = import zz.function object<{
    name: z.ZodString;
}>(shape?: {
    name: z.ZodString;
} | undefined, params?: string | {
    error?: string | z.core.$ZodErrorMap<NonNullable<z.core.$ZodIssueInvalidType<unknown> | z.core.$ZodIssueUnrecognizedKeys>> | undefined;
    message?: string | undefined | undefined;
} | undefined): z.ZodObject<{
    name: z.ZodString;
}, z.core.$strip>object({ name: z.ZodStringname: import zz.function string(params?: string | z.core.$ZodStringParams): z.ZodString (+1 overload)string() });
const const Thing: z.ZodObject<{
    id: z.ZodString;
    name: z.ZodString;
}, z.core.$strip>Thing = import zz.function object<{
    id: z.ZodString;
    name: z.ZodString;
}>(shape?: {
    id: z.ZodString;
    name: z.ZodString;
} | undefined, params?: string | {
    error?: string | z.core.$ZodErrorMap<NonNullable<z.core.$ZodIssueInvalidType<unknown> | z.core.$ZodIssueUnrecognizedKeys>> | undefined;
    message?: string | undefined | undefined;
} | undefined): z.ZodObject<{
    id: z.ZodString;
    name: z.ZodString;
}, z.core.$strip>object({ id: z.ZodStringid: import zz.function string(params?: string | z.core.$ZodStringParams): z.ZodString (+1 overload)string(), name: z.ZodStringname: import zz.function string(params?: string | z.core.$ZodStringParams): z.ZodString (+1 overload)string() });
const const ThingQuery: z.ZodObject<{
    filter: z.ZodOptional<z.ZodString>;
}, z.core.$strip>ThingQuery = import zz.function object<{
    filter: z.ZodOptional<z.ZodString>;
}>(shape?: {
    filter: z.ZodOptional<z.ZodString>;
} | undefined, params?: string | {
    error?: string | z.core.$ZodErrorMap<NonNullable<z.core.$ZodIssueInvalidType<unknown> | z.core.$ZodIssueUnrecognizedKeys>> | undefined;
    message?: string | undefined | undefined;
} | undefined): z.ZodObject<{
    filter: z.ZodOptional<z.ZodString>;
}, z.core.$strip>object({ filter: z.ZodOptional<z.ZodString>filter: import zz.function string(params?: string | z.core.$ZodStringParams): z.ZodString (+1 overload)string().ZodType<any, any, $ZodStringInternals<string>>.optional(): z.ZodOptional<z.ZodString>optional() });
const const ThingArray: z.ZodArray<z.ZodObject<{
    id: z.ZodString;
    name: z.ZodString;
}, z.core.$strip>>ThingArray = import zz.function array<z.ZodObject<{
    id: z.ZodString;
    name: z.ZodString;
}, z.core.$strip>>(element: z.ZodObject<{
    id: z.ZodString;
    name: z.ZodString;
}, z.core.$strip>, params?: string | z.core.$ZodArrayParams): z.ZodArray<z.ZodObject<{
    id: z.ZodString;
    name: z.ZodString;
}, z.core.$strip>>array(const Thing: z.ZodObject<{
    id: z.ZodString;
    name: z.ZodString;
}, z.core.$strip>Thing);

// Factory function written by you, however you need,
// so long as you can infer the resulting type of t.router() later
export function function createMyRouter(): BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    createThing: MutationProcedure<{
        input: {
            name: string;
        };
        output: {
            id: string;
            name: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
    listThings: QueryProcedure<{
        input: {
            filter?: string | undefined;
        };
        output: {
            id: string;
            name: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>createMyRouter() {
  return const t: TRPCRootObject<object, object, RuntimeConfigOptions<object, object>, {
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}>t.TRPCRootObject<object, object, RuntimeConfigOptions<object, object>, { ctx: object; meta: object; errorShape: DefaultErrorShape; transformer: false; }>.router: RouterBuilder
<{
    createThing: MutationProcedure<{
        input: {
            name: string;
        };
        output: {
            id: string;
            name: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
    listThings: QueryProcedure<{
        input: {
            filter?: string | undefined;
        };
        output: {
            id: string;
            name: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>(_: {
    createThing: MutationProcedure<{
        input: {
            name: string;
        };
        output: {
            id: string;
            name: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
    listThings: QueryProcedure<{
        input: {
            filter?: string | undefined;
        };
        output: {
            id: string;
            name: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}) => BuiltRouter<...>router({
    createThing: MutationProcedure<{
    input: {
        name: string;
    };
    output: {
        id: string;
        name: string;
    };
    meta: object;
    errorShape: DefaultErrorShape;
}>createThing: const publicProcedure: ProcedureBuilder<object, object, object, UnsetMarker, UnsetMarker, UnsetMarker, UnsetMarker, false, DefaultErrorShape>publicProcedure
      .ProcedureBuilder<object, object, object, UnsetMarker, UnsetMarker, UnsetMarker, UnsetMarker, false, DefaultErrorShape>.input<z.ZodObject<{
    name: z.ZodString;
}, z.core.$strip>>(schema: z.ZodObject<{
    name: z.ZodString;
}, z.core.$strip>): ProcedureBuilder<object, object, object, {
    name: string;
}, {
    name: string;
}, UnsetMarker, UnsetMarker, false, DefaultErrorShape>input(const ThingRequest: z.ZodObject<{
    name: z.ZodString;
}, z.core.$strip>ThingRequest)
      .ProcedureBuilder<object, object, object, { name: string; }, { name: string; }, UnsetMarker, UnsetMarker, false, DefaultErrorShape>.output<z.ZodObject<{
    id: z.ZodString;
    name: z.ZodString;
}, z.core.$strip>>(schema: z.ZodObject<{
    id: z.ZodString;
    name: z.ZodString;
}, z.core.$strip>): ProcedureBuilder<object, object, object, {
    name: string;
}, {
    name: string;
}, {
    id: string;
    name: string;
}, {
    id: string;
    name: string;
}, false, DefaultErrorShape>output(const Thing: z.ZodObject<{
    id: z.ZodString;
    name: z.ZodString;
}, z.core.$strip>Thing)
      .ProcedureBuilder<object, object, object, { name: string; }, { name: string; }, { id: string; name: string; }, { id: string; name: string; }, false, DefaultErrorShape>.mutation<unknown>(resolver: ProcedureResolver<object, object, object, {
    name: string;
}, {
    id: string;
    name: string;
}, unknown>): MutationProcedure<{
    input: {
        name: string;
    };
    output: {
        id: string;
        name: string;
    };
    meta: object;
    errorShape: DefaultErrorShape;
}>mutation(({ input: {
    name: string;
}input }) => ({ id: stringid: '1', ...input: {
    name: string;
}input })),
    listThings: QueryProcedure<{
    input: {
        filter?: string | undefined;
    };
    output: {
        id: string;
        name: string;
    }[];
    meta: object;
    errorShape: DefaultErrorShape;
}>listThings: const publicProcedure: ProcedureBuilder<object, object, object, UnsetMarker, UnsetMarker, UnsetMarker, UnsetMarker, false, DefaultErrorShape>publicProcedure
      .ProcedureBuilder<object, object, object, UnsetMarker, UnsetMarker, UnsetMarker, UnsetMarker, false, DefaultErrorShape>.input<z.ZodObject<{
    filter: z.ZodOptional<z.ZodString>;
}, z.core.$strip>>(schema: z.ZodObject<{
    filter: z.ZodOptional<z.ZodString>;
}, z.core.$strip>): ProcedureBuilder<object, object, object, {
    filter?: string | undefined;
}, {
    filter?: string | undefined;
}, UnsetMarker, UnsetMarker, false, DefaultErrorShape>input(const ThingQuery: z.ZodObject<{
    filter: z.ZodOptional<z.ZodString>;
}, z.core.$strip>ThingQuery)
      .ProcedureBuilder<object, object, object, { filter?: string | undefined; }, { filter?: string | undefined; }, UnsetMarker, UnsetMarker, false, DefaultErrorShape>.output<z.ZodArray<z.ZodObject<{
    id: z.ZodString;
    name: z.ZodString;
}, z.core.$strip>>>(schema: z.ZodArray<z.ZodObject<{
    id: z.ZodString;
    name: z.ZodString;
}, z.core.$strip>>): ProcedureBuilder<object, object, object, {
    filter?: string | undefined;
}, {
    filter?: string | undefined;
}, {
    id: string;
    name: string;
}[], {
    id: string;
    name: string;
}[], false, DefaultErrorShape>output(const ThingArray: z.ZodArray<z.ZodObject<{
    id: z.ZodString;
    name: z.ZodString;
}, z.core.$strip>>ThingArray)
      .ProcedureBuilder<object, object, object, { filter?: string | undefined; }, { filter?: string | undefined; }, { id: string; name: string; }[], { id: string; name: string; }[], false, DefaultErrorShape>.query<unknown>(resolver: ProcedureResolver<object, object, object, {
    filter?: string | undefined;
}, {
    id: string;
    name: string;
}[], unknown>): QueryProcedure<{
    input: {
        filter?: string | undefined;
    };
    output: {
        id: string;
        name: string;
    }[];
    meta: object;
    errorShape: DefaultErrorShape;
}>query(() => []),
  })
}

// Infer the type of your router, and then generate the abstract types for use in the client
type type MyRouterType = Router<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    createThing: MutationProcedure<{
        input: {
            name: string;
        };
        output: {
            id: string;
            name: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
    listThings: QueryProcedure<{
        input: {
            filter?: string | undefined;
        };
        output: {
            id: string;
            name: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>> & DecorateCreateRouterOptions<{
    createThing: MutationProcedure<{
        input: {
            name: string;
        };
        output: {
            id: string;
            name: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
    listThings: QueryProcedure<{
        input: {
            filter?: string | undefined;
        };
        output: {
            id: string;
            name: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>MyRouterType = type ReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : anyReturnType<typeof function createMyRouter(): BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    createThing: MutationProcedure<{
        input: {
            name: string;
        };
        output: {
            id: string;
            name: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
    listThings: QueryProcedure<{
        input: {
            filter?: string | undefined;
        };
        output: {
            id: string;
            name: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>createMyRouter>
export type type MyRouterLike = {
    createThing: MutationLike<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, MutationProcedure<{
        input: {
            name: string;
        };
        output: {
            id: string;
            name: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>>;
    listThings: QueryLike<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, QueryProcedure<{
        input: {
            filter?: string | undefined;
        };
        output: {
            id: string;
            name: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>>;
}MyRouterLike = type RouterLike<TRouter extends AnyRouter> = { [TKey in keyof TRouter["_def"]["record"]]: TRouter["_def"]["record"][TKey] extends infer $Value ? $Value extends AnyQueryProcedure ? QueryLike<TRouter["_def"]["_config"]["$types"], $Value> : $Value extends AnyMutationProcedure ? MutationLike<TRouter["_def"]["_config"]["$types"], $Value> : $Value extends RouterRecord ? RouterLikeInner<TRouter["_def"]["_config"]["$types"], $Value> : never : never; }RouterLike<type MyRouterType = Router<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    createThing: MutationProcedure<{
        input: {
            name: string;
        };
        output: {
            id: string;
            name: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
    listThings: QueryProcedure<{
        input: {
            filter?: string | undefined;
        };
        output: {
            id: string;
            name: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>> & DecorateCreateRouterOptions<{
    createThing: MutationProcedure<{
        input: {
            name: string;
        };
        output: {
            id: string;
            name: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
    listThings: QueryProcedure<{
        input: {
            filter?: string | undefined;
        };
        output: {
            id: string;
            name: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>MyRouterType>
export type type MyRouterUtilsLike = DecorateRouter & {
    createThing: DecorateMutationProcedure<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, MutationProcedure<{
        input: {
            name: string;
        };
        output: {
            id: string;
            name: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>>;
    listThings: DecorateQueryProcedure<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, QueryProcedure<{
        input: {
            filter?: string | undefined;
        };
        output: {
            id: string;
            name: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>>;
}MyRouterUtilsLike = type UtilsLike<TRouter extends AnyRouter> = DecorateRouter & { [TKey in keyof TRouter["_def"]["record"]]: TRouter["_def"]["record"][TKey] extends infer $Value ? $Value extends AnyQueryProcedure ? DecorateQueryProcedure<TRouter["_def"]["_config"]["$types"], $Value> : $Value extends AnyMutationProcedure ? DecorateMutationProcedure<TRouter["_def"]["_config"]["$types"], $Value> : $Value extends RouterRecord ? DecorateRouter & { [TKey in keyof $Value]: $Value[TKey] extends infer $Value ? $Value extends AnyQueryProcedure ? DecorateQueryProcedure<...> : $Value extends AnyMutationProcedure ? DecorateMutationProcedure<...> : $Value extends RouterRecord ? DecorateRouter & ... : never : never; } : never : never; }UtilsLike<type MyRouterType = Router<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    createThing: MutationProcedure<{
        input: {
            name: string;
        };
        output: {
            id: string;
            name: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
    listThings: QueryProcedure<{
        input: {
            filter?: string | undefined;
        };
        output: {
            id: string;
            name: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>> & DecorateCreateRouterOptions<{
    createThing: MutationProcedure<{
        input: {
            name: string;
        };
        output: {
            id: string;
            name: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
    listThings: QueryProcedure<{
        input: {
            filter?: string | undefined;
        };
        output: {
            id: string;
            name: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>MyRouterType>

api/server.ts


export type type AppRouter = Router<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    things: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        createThing: MutationProcedure<{
            input: {
                name: string;
            };
            output: {
                id: string;
                name: string;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        listThings: QueryProcedure<{
            input: {
                filter?: string | undefined;
            };
            output: {
                id: string;
                name: string;
            }[];
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>> & DecorateCreateRouterOptions<...>AppRouter = typeof const appRouter: BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    things: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        createThing: MutationProcedure<{
            input: {
                name: string;
            };
            output: {
                id: string;
                name: string;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        listThings: QueryProcedure<{
            input: {
                filter?: string | undefined;
            };
            output: {
                id: string;
                name: string;
            }[];
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>appRouter;

// Export your MyRouter types to the client
export type { type MyRouterLike = {
    createThing: MutationLike<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, MutationProcedure<{
        input: {
            name: string;
        };
        output: {
            id: string;
            name: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>>;
    listThings: QueryLike<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, QueryProcedure<{
        input: {
            filter?: string | undefined;
        };
        output: {
            id: string;
            name: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>>;
}
export MyRouterLikeMyRouterLike, type MyRouterUtilsLike = DecorateRouter & {
    createThing: DecorateMutationProcedure<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, MutationProcedure<{
        input: {
            name: string;
        };
        output: {
            id: string;
            name: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>>;
    listThings: DecorateQueryProcedure<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, QueryProcedure<{
        input: {
            filter?: string | undefined;
        };
        output: {
            id: string;
            name: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>>;
}
export MyRouterUtilsLikeMyRouterUtilsLike } from './factory';

frontend/usePostCreate.ts

import type { type MyRouterLike = {
    createThing: MutationLike<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, MutationProcedure<{
        input: {
            name: string;
        };
        output: {
            id: string;
            name: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>>;
    listThings: QueryLike<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, QueryProcedure<{
        input: {
            filter?: string | undefined;
        };
        output: {
            id: string;
            name: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>>;
    doThing: MutationLike<...>;
}MyRouterLike, type MyRouterUtilsLike = DecorateRouter & {
    createThing: DecorateMutationProcedure<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, MutationProcedure<{
        input: {
            name: string;
        };
        output: {
            id: string;
            name: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>>;
    listThings: DecorateQueryProcedure<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, QueryProcedure<{
        input: {
            filter?: string | undefined;
        };
        output: {
            id: string;
            name: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>>;
    doThing: DecorateMutationProcedure<...>;
}MyRouterUtilsLike } from './factory';

type type MyGenericComponentProps = {
    route: MyRouterLike;
    utils: MyRouterUtilsLike;
}MyGenericComponentProps = {
  route: RouterLikeInner<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    createThing: MutationProcedure<{
        input: {
            name: string;
        };
        output: {
            id: string;
            name: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
    listThings: QueryProcedure<{
        input: {
            filter?: string | undefined;
        };
        output: {
            id: string;
            name: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
    doThing: MutationProcedure<{
        input: {
            name: string;
        };
        output: {
            name: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>route: type MyRouterLike = {
    createThing: MutationLike<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, MutationProcedure<{
        input: {
            name: string;
        };
        output: {
            id: string;
            name: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>>;
    listThings: QueryLike<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, QueryProcedure<{
        input: {
            filter?: string | undefined;
        };
        output: {
            id: string;
            name: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>>;
    doThing: MutationLike<...>;
}MyRouterLike;
  utils: MyRouterUtilsLikeutils: type MyRouterUtilsLike = DecorateRouter & {
    createThing: DecorateMutationProcedure<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, MutationProcedure<{
        input: {
            name: string;
        };
        output: {
            id: string;
            name: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>>;
    listThings: DecorateQueryProcedure<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, QueryProcedure<{
        input: {
            filter?: string | undefined;
        };
        output: {
            id: string;
            name: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>>;
    doThing: DecorateMutationProcedure<...>;
}MyRouterUtilsLike;
};

function function MyGenericComponent(props: MyGenericComponentProps): nullMyGenericComponent(props: MyGenericComponentPropsprops: type MyGenericComponentProps = {
    route: MyRouterLike;
    utils: MyRouterUtilsLike;
}MyGenericComponentProps) {
  const { const route: RouterLikeInner<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    createThing: MutationProcedure<{
        input: {
            name: string;
        };
        output: {
            id: string;
            name: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
    listThings: QueryProcedure<{
        input: {
            filter?: string | undefined;
        };
        output: {
            id: string;
            name: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
    doThing: MutationProcedure<{
        input: {
            name: string;
        };
        output: {
            name: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>route } = props: MyGenericComponentPropsprops;
  const const thing: InferQueryResult<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, QueryProcedure<{
    input: {
        filter?: string | undefined;
    };
    output: {
        id: string;
        name: string;
    }[];
    meta: object;
    errorShape: DefaultErrorShape;
}>>thing = const route: RouterLikeInner<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    createThing: MutationProcedure<{
        input: {
            name: string;
        };
        output: {
            id: string;
            name: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
    listThings: QueryProcedure<{
        input: {
            filter?: string | undefined;
        };
        output: {
            id: string;
            name: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
    doThing: MutationProcedure<{
        input: {
            name: string;
        };
        output: {
            name: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>route.listThings: QueryLike<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, QueryProcedure<{
    input: {
        filter?: string | undefined;
    };
    output: {
        id: string;
        name: string;
    }[];
    meta: object;
    errorShape: DefaultErrorShape;
}>>listThings.useQuery: (variables: {
    filter?: string | undefined;
}, opts?: InferQueryOptions<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, QueryProcedure<{
    input: {
        filter?: string | undefined;
    };
    output: {
        id: string;
        name: string;
    }[];
    meta: object;
    errorShape: DefaultErrorShape;
}>, any> | undefined) => InferQueryResult<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, QueryProcedure<{
    input: {
        filter?: string | undefined;
    };
    output: {
        id: string;
        name: string;
    }[];
    meta: object;
    errorShape: DefaultErrorShape;
}>>useQuery({
    filter?: string | undefinedfilter: 'qwerty',
  });

  const const mutation: InferMutationResult<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, MutationProcedure<{
    input: {
        name: string;
    };
    output: {
        name: string;
    };
    meta: object;
    errorShape: DefaultErrorShape;
}>, unknown>mutation = const route: RouterLikeInner<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    createThing: MutationProcedure<{
        input: {
            name: string;
        };
        output: {
            id: string;
            name: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
    listThings: QueryProcedure<{
        input: {
            filter?: string | undefined;
        };
        output: {
            id: string;
            name: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
    doThing: MutationProcedure<{
        input: {
            name: string;
        };
        output: {
            name: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>route.doThing: MutationLike<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, MutationProcedure<{
    input: {
        name: string;
    };
    output: {
        name: string;
    };
    meta: object;
    errorShape: DefaultErrorShape;
}>>doThing.useMutation: (opts?: InferMutationOptions<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, MutationProcedure<{
    input: {
        name: string;
    };
    output: {
        name: string;
    };
    meta: object;
    errorShape: DefaultErrorShape;
}>, unknown> | undefined) => InferMutationResult<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, MutationProcedure<{
    input: {
        name: string;
    };
    output: {
        name: string;
    };
    meta: object;
    errorShape: DefaultErrorShape;
}>, unknown>useMutation({
    onSuccess?: ((data: {
    name: string;
}, variables: {
    name: string;
}, onMutateResult: unknown, context: MutationFunctionContext) => Promise<unknown> | unknown) | undefinedonSuccess() {
      props: MyGenericComponentPropsprops.utils: MyRouterUtilsLikeutils.listThings: DecorateQueryProcedure<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, QueryProcedure<{
    input: {
        filter?: string | undefined;
    };
    output: {
        id: string;
        name: string;
    }[];
    meta: object;
    errorShape: DefaultErrorShape;
}>>listThings.function invalidate(input?: {
    filter?: string | undefined;
} | undefined, filters?: (Omit<InvalidateQueryFilters<readonly unknown[]>, "predicate"> & {
    predicate?: ((query: Query<{
        id: string;
        name: string;
    }[], TRPCClientError<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }>, {
        id: string;
        name: string;
    }[], QueryKeyKnown<{
        filter?: string | undefined;
    }, "query">>) => boolean) | undefined;
}) | undefined, options?: InvalidateOptions): Promise<void>invalidate();
    },
  });

  function function (local function) handleClick(): voidhandleClick() {
    const mutation: InferMutationResult<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, MutationProcedure<{
    input: {
        name: string;
    };
    output: {
        name: string;
    };
    meta: object;
    errorShape: DefaultErrorShape;
}>, unknown>mutation.mutate: (variables: {
    name: string;
}, options?: MutateOptions<{
    name: string;
}, TRPCClientErrorLike<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}>, {
    name: string;
}, unknown> | undefined) => voidmutate({
      name: stringname: 'Thing 1',
    });
  }

  return null; /* ui */
}

function function MyPageComponent(): React.JSX.ElementMyPageComponent() {
  const const utils: TRPCContextPropsBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    deep: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        route: BuiltRouter<{
            ctx: object;
            meta: object;
            errorShape: DefaultErrorShape;
            transformer: false;
        }, DecorateCreateRouterOptions<{
            things: BuiltRouter<{
                ctx: object;
                meta: object;
                errorShape: DefaultErrorShape;
                transformer: false;
            }, DecorateCreateRouterOptions<{
                createThing: MutationProcedure<{
                    input: {
                        name: string;
                    };
                    output: {
                        id: string;
                        name: string;
                    };
                    meta: object;
                    errorShape: DefaultErrorShape;
                }>;
                listThings: QueryProcedure<...>;
                doThing: MutationProcedure<...>;
            }>>;
        }>>;
    }>>;
    different: BuiltRouter<...>;
}>>, unknown> & {
    ...;
} & DecorateRouter & {
    ...;
}utils = const useUtils: () => TRPCContextPropsBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    deep: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        route: BuiltRouter<{
            ctx: object;
            meta: object;
            errorShape: DefaultErrorShape;
            transformer: false;
        }, DecorateCreateRouterOptions<{
            things: BuiltRouter<{
                ctx: object;
                meta: object;
                errorShape: DefaultErrorShape;
                transformer: false;
            }, DecorateCreateRouterOptions<{
                createThing: MutationProcedure<{
                    input: {
                        name: string;
                    };
                    output: {
                        id: string;
                        name: string;
                    };
                    meta: object;
                    errorShape: DefaultErrorShape;
                }>;
                listThings: QueryProcedure<...>;
                doThing: MutationProcedure<...>;
            }>>;
        }>>;
    }>>;
    different: BuiltRouter<...>;
}>>, unknown> & {
    ...;
} & DecorateRouter & {
    ...;
}useUtils();

  return (
    <function MyGenericComponent(props: MyGenericComponentProps): nullMyGenericComponent
      route: RouterLikeInner<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    createThing: MutationProcedure<{
        input: {
            name: string;
        };
        output: {
            id: string;
            name: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
    listThings: QueryProcedure<{
        input: {
            filter?: string | undefined;
        };
        output: {
            id: string;
            name: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
    doThing: MutationProcedure<{
        input: {
            name: string;
        };
        output: {
            name: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>route={const trpc: CreateTRPCReactBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    deep: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        route: BuiltRouter<{
            ctx: object;
            meta: object;
            errorShape: DefaultErrorShape;
            transformer: false;
        }, DecorateCreateRouterOptions<{
            things: BuiltRouter<{
                ctx: object;
                meta: object;
                errorShape: DefaultErrorShape;
                transformer: false;
            }, DecorateCreateRouterOptions<{
                createThing: MutationProcedure<{
                    input: {
                        name: string;
                    };
                    output: {
                        id: string;
                        name: string;
                    };
                    meta: object;
                    errorShape: DefaultErrorShape;
                }>;
                listThings: QueryProcedure<...>;
                doThing: MutationProcedure<...>;
            }>>;
        }>>;
    }>>;
    different: BuiltRouter<...>;
}>>, unknown> & DecorateRouterRecord<...>trpc.deep: DecorateRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    route: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        things: BuiltRouter<{
            ctx: object;
            meta: object;
            errorShape: DefaultErrorShape;
            transformer: false;
        }, DecorateCreateRouterOptions<{
            createThing: MutationProcedure<{
                input: {
                    name: string;
                };
                output: {
                    id: string;
                    name: string;
                };
                meta: object;
                errorShape: DefaultErrorShape;
            }>;
            listThings: QueryProcedure<...>;
            doThing: MutationProcedure<...>;
        }>>;
    }>>;
}>>deep.route: DecorateRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    things: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        createThing: MutationProcedure<{
            input: {
                name: string;
            };
            output: {
                id: string;
                name: string;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        listThings: QueryProcedure<...>;
        doThing: MutationProcedure<...>;
    }>>;
}>>route.things: DecorateRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    createThing: MutationProcedure<{
        input: {
            name: string;
        };
        output: {
            id: string;
            name: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
    listThings: QueryProcedure<{
        input: {
            filter?: string | undefined;
        };
        output: {
            id: string;
            name: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
    doThing: MutationProcedure<{
        input: {
            name: string;
        };
        output: {
            name: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>things}
      utils: MyRouterUtilsLikeutils={const utils: TRPCContextPropsBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    deep: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        route: BuiltRouter<{
            ctx: object;
            meta: object;
            errorShape: DefaultErrorShape;
            transformer: false;
        }, DecorateCreateRouterOptions<{
            things: BuiltRouter<{
                ctx: object;
                meta: object;
                errorShape: DefaultErrorShape;
                transformer: false;
            }, DecorateCreateRouterOptions<{
                createThing: MutationProcedure<{
                    input: {
                        name: string;
                    };
                    output: {
                        id: string;
                        name: string;
                    };
                    meta: object;
                    errorShape: DefaultErrorShape;
                }>;
                listThings: QueryProcedure<...>;
                doThing: MutationProcedure<...>;
            }>>;
        }>>;
    }>>;
    different: BuiltRouter<...>;
}>>, unknown> & {
    ...;
} & DecorateRouter & {
    ...;
}utils.deep: DecorateRouter & {
    route: DecorateRouter & {
        things: DecorateRouter & {
            createThing: DecorateMutationProcedure<{
                ctx: object;
                meta: object;
                errorShape: DefaultErrorShape;
                transformer: false;
            }, MutationProcedure<{
                input: {
                    name: string;
                };
                output: {
                    id: string;
                    name: string;
                };
                meta: object;
                errorShape: DefaultErrorShape;
            }>>;
            listThings: DecorateQueryProcedure<{
                ctx: object;
                meta: object;
                errorShape: DefaultErrorShape;
                transformer: false;
            }, QueryProcedure<...>>;
            doThing: DecorateMutationProcedure<...>;
        };
    };
}deep.route: DecorateRouter & {
    things: DecorateRouter & {
        createThing: DecorateMutationProcedure<{
            ctx: object;
            meta: object;
            errorShape: DefaultErrorShape;
            transformer: false;
        }, MutationProcedure<{
            input: {
                name: string;
            };
            output: {
                id: string;
                name: string;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>>;
        listThings: DecorateQueryProcedure<{
            ctx: object;
            meta: object;
            errorShape: DefaultErrorShape;
            transformer: false;
        }, QueryProcedure<...>>;
        doThing: DecorateMutationProcedure<...>;
    };
}route.things: DecorateRouter & {
    createThing: DecorateMutationProcedure<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, MutationProcedure<{
        input: {
            name: string;
        };
        output: {
            id: string;
            name: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>>;
    listThings: DecorateQueryProcedure<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, QueryProcedure<{
        input: {
            filter?: string | undefined;
        };
        output: {
            id: string;
            name: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>>;
    doThing: DecorateMutationProcedure<...>;
}things}
    />
  );
}

function function MyOtherPageComponent(): React.JSX.ElementMyOtherPageComponent() {
  const const utils: TRPCContextPropsBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    deep: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        route: BuiltRouter<{
            ctx: object;
            meta: object;
            errorShape: DefaultErrorShape;
            transformer: false;
        }, DecorateCreateRouterOptions<{
            things: BuiltRouter<{
                ctx: object;
                meta: object;
                errorShape: DefaultErrorShape;
                transformer: false;
            }, DecorateCreateRouterOptions<{
                createThing: MutationProcedure<{
                    input: {
                        name: string;
                    };
                    output: {
                        id: string;
                        name: string;
                    };
                    meta: object;
                    errorShape: DefaultErrorShape;
                }>;
                listThings: QueryProcedure<...>;
                doThing: MutationProcedure<...>;
            }>>;
        }>>;
    }>>;
    different: BuiltRouter<...>;
}>>, unknown> & {
    ...;
} & DecorateRouter & {
    ...;
}utils = const useUtils: () => TRPCContextPropsBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    deep: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        route: BuiltRouter<{
            ctx: object;
            meta: object;
            errorShape: DefaultErrorShape;
            transformer: false;
        }, DecorateCreateRouterOptions<{
            things: BuiltRouter<{
                ctx: object;
                meta: object;
                errorShape: DefaultErrorShape;
                transformer: false;
            }, DecorateCreateRouterOptions<{
                createThing: MutationProcedure<{
                    input: {
                        name: string;
                    };
                    output: {
                        id: string;
                        name: string;
                    };
                    meta: object;
                    errorShape: DefaultErrorShape;
                }>;
                listThings: QueryProcedure<...>;
                doThing: MutationProcedure<...>;
            }>>;
        }>>;
    }>>;
    different: BuiltRouter<...>;
}>>, unknown> & {
    ...;
} & DecorateRouter & {
    ...;
}useUtils();

  return (
    <function MyGenericComponent(props: MyGenericComponentProps): nullMyGenericComponent
      route: RouterLikeInner<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    createThing: MutationProcedure<{
        input: {
            name: string;
        };
        output: {
            id: string;
            name: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
    listThings: QueryProcedure<{
        input: {
            filter?: string | undefined;
        };
        output: {
            id: string;
            name: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
    doThing: MutationProcedure<{
        input: {
            name: string;
        };
        output: {
            name: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>route={const trpc: CreateTRPCReactBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    deep: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        route: BuiltRouter<{
            ctx: object;
            meta: object;
            errorShape: DefaultErrorShape;
            transformer: false;
        }, DecorateCreateRouterOptions<{
            things: BuiltRouter<{
                ctx: object;
                meta: object;
                errorShape: DefaultErrorShape;
                transformer: false;
            }, DecorateCreateRouterOptions<{
                createThing: MutationProcedure<{
                    input: {
                        name: string;
                    };
                    output: {
                        id: string;
                        name: string;
                    };
                    meta: object;
                    errorShape: DefaultErrorShape;
                }>;
                listThings: QueryProcedure<...>;
                doThing: MutationProcedure<...>;
            }>>;
        }>>;
    }>>;
    different: BuiltRouter<...>;
}>>, unknown> & DecorateRouterRecord<...>trpc.different: DecorateRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    things: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        createThing: MutationProcedure<{
            input: {
                name: string;
            };
            output: {
                id: string;
                name: string;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        listThings: QueryProcedure<...>;
        doThing: MutationProcedure<...>;
    }>>;
}>>different.things: DecorateRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    createThing: MutationProcedure<{
        input: {
            name: string;
        };
        output: {
            id: string;
            name: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
    listThings: QueryProcedure<{
        input: {
            filter?: string | undefined;
        };
        output: {
            id: string;
            name: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
    doThing: MutationProcedure<{
        input: {
            name: string;
        };
        output: {
            name: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>things}
      utils: MyRouterUtilsLikeutils={const utils: TRPCContextPropsBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    deep: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        route: BuiltRouter<{
            ctx: object;
            meta: object;
            errorShape: DefaultErrorShape;
            transformer: false;
        }, DecorateCreateRouterOptions<{
            things: BuiltRouter<{
                ctx: object;
                meta: object;
                errorShape: DefaultErrorShape;
                transformer: false;
            }, DecorateCreateRouterOptions<{
                createThing: MutationProcedure<{
                    input: {
                        name: string;
                    };
                    output: {
                        id: string;
                        name: string;
                    };
                    meta: object;
                    errorShape: DefaultErrorShape;
                }>;
                listThings: QueryProcedure<...>;
                doThing: MutationProcedure<...>;
            }>>;
        }>>;
    }>>;
    different: BuiltRouter<...>;
}>>, unknown> & {
    ...;
} & DecorateRouter & {
    ...;
}utils.different: DecorateRouter & {
    things: DecorateRouter & {
        createThing: DecorateMutationProcedure<{
            ctx: object;
            meta: object;
            errorShape: DefaultErrorShape;
            transformer: false;
        }, MutationProcedure<{
            input: {
                name: string;
            };
            output: {
                id: string;
                name: string;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>>;
        listThings: DecorateQueryProcedure<{
            ctx: object;
            meta: object;
            errorShape: DefaultErrorShape;
            transformer: false;
        }, QueryProcedure<{
            input: {
                filter?: string | undefined;
            };
            output: {
                id: string;
                name: string;
            }[];
            meta: object;
            errorShape: DefaultErrorShape;
        }>>;
        doThing: DecorateMutationProcedure<...>;
    };
}different.things: DecorateRouter & {
    createThing: DecorateMutationProcedure<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, MutationProcedure<{
        input: {
            name: string;
        };
        output: {
            id: string;
            name: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>>;
    listThings: DecorateQueryProcedure<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, QueryProcedure<{
        input: {
            filter?: string | undefined;
        };
        output: {
            id: string;
            name: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>>;
    doThing: DecorateMutationProcedure<...>;
}things}
    />
  );
}

A more complete working example can be found here