discord-questions.trpc.io/m/1313991984175911006

Preview meta tags from the discord-questions.trpc.io website.

Linked Hostnames

4

Thumbnail

Search Engine Appearance

Google

https://discord-questions.trpc.io/m/1313991984175911006

Infer TRoot and TProcedure for specific procedures (polymorphism) - tRPC

Hello! I'm trying to build a custom hook that returns specific procedures of a router: ```tsx "use client" import { MutationLike, QueryLike } from "@trpc/react-query/shared" import { AnyProcedure, AnyRootTypes } from "@trpc/server/unstable-core-do-not-import" import { trpc } from "@/trpc/client" type RequiredProcedures<TRoot extends AnyRootTypes, TProcedure extends AnyProcedure> = { create: MutationLike<TRoot, TProcedure> edit: MutationLike<TRoot, TProcedure> list: QueryLike<TRoot, TProcedure> details: QueryLike<TRoot, TProcedure> } export function useApi<T extends RequiredProcedures<any, any>>( getRouter: ( router: typeof trpc ) => T extends RequiredProcedures<infer TRoot, infer TProcedure> ? RequiredProcedures<TRoot, TProcedure> : never ) { const router = getRouter(trpc) return { create: router.create, edit: router.edit, list: router.list, details: router.details, } } function Component() { const { create, edit } = useApi((router) => router.admin.product) const mut = create.useMutation() async function handleCreate() { await mut.mutateAsync({}) } } ``` **How can I infer TRoot and TProcedure?** Currently it is typed as `any` in `T extends RequiredProcedures<any, any>`. But of course now my input and output types are also `any`, which I don't want. Any help is appreciated! :) Thanks!



Bing

Infer TRoot and TProcedure for specific procedures (polymorphism) - tRPC

https://discord-questions.trpc.io/m/1313991984175911006

Hello! I'm trying to build a custom hook that returns specific procedures of a router: ```tsx "use client" import { MutationLike, QueryLike } from "@trpc/react-query/shared" import { AnyProcedure, AnyRootTypes } from "@trpc/server/unstable-core-do-not-import" import { trpc } from "@/trpc/client" type RequiredProcedures<TRoot extends AnyRootTypes, TProcedure extends AnyProcedure> = { create: MutationLike<TRoot, TProcedure> edit: MutationLike<TRoot, TProcedure> list: QueryLike<TRoot, TProcedure> details: QueryLike<TRoot, TProcedure> } export function useApi<T extends RequiredProcedures<any, any>>( getRouter: ( router: typeof trpc ) => T extends RequiredProcedures<infer TRoot, infer TProcedure> ? RequiredProcedures<TRoot, TProcedure> : never ) { const router = getRouter(trpc) return { create: router.create, edit: router.edit, list: router.list, details: router.details, } } function Component() { const { create, edit } = useApi((router) => router.admin.product) const mut = create.useMutation() async function handleCreate() { await mut.mutateAsync({}) } } ``` **How can I infer TRoot and TProcedure?** Currently it is typed as `any` in `T extends RequiredProcedures<any, any>`. But of course now my input and output types are also `any`, which I don't want. Any help is appreciated! :) Thanks!



DuckDuckGo

https://discord-questions.trpc.io/m/1313991984175911006

Infer TRoot and TProcedure for specific procedures (polymorphism) - tRPC

Hello! I'm trying to build a custom hook that returns specific procedures of a router: ```tsx "use client" import { MutationLike, QueryLike } from "@trpc/react-query/shared" import { AnyProcedure, AnyRootTypes } from "@trpc/server/unstable-core-do-not-import" import { trpc } from "@/trpc/client" type RequiredProcedures<TRoot extends AnyRootTypes, TProcedure extends AnyProcedure> = { create: MutationLike<TRoot, TProcedure> edit: MutationLike<TRoot, TProcedure> list: QueryLike<TRoot, TProcedure> details: QueryLike<TRoot, TProcedure> } export function useApi<T extends RequiredProcedures<any, any>>( getRouter: ( router: typeof trpc ) => T extends RequiredProcedures<infer TRoot, infer TProcedure> ? RequiredProcedures<TRoot, TProcedure> : never ) { const router = getRouter(trpc) return { create: router.create, edit: router.edit, list: router.list, details: router.details, } } function Component() { const { create, edit } = useApi((router) => router.admin.product) const mut = create.useMutation() async function handleCreate() { await mut.mutateAsync({}) } } ``` **How can I infer TRoot and TProcedure?** Currently it is typed as `any` in `T extends RequiredProcedures<any, any>`. But of course now my input and output types are also `any`, which I don't want. Any help is appreciated! :) Thanks!

  • General Meta Tags

    6
    • title
      Infer TRoot and TProcedure for specific procedures (polymorphism) - tRPC
    • charset
      utf-8
    • viewport
      width=device-width, initial-scale=1
    • next-size-adjust
    • description
      Hello! I'm trying to build a custom hook that returns specific procedures of a router: ```tsx "use client" import { MutationLike, QueryLike } from "@trpc/react-query/shared" import { AnyProcedure, AnyRootTypes } from "@trpc/server/unstable-core-do-not-import" import { trpc } from "@/trpc/client" type RequiredProcedures<TRoot extends AnyRootTypes, TProcedure extends AnyProcedure> = { create: MutationLike<TRoot, TProcedure> edit: MutationLike<TRoot, TProcedure> list: QueryLike<TRoot, TProcedure> details: QueryLike<TRoot, TProcedure> } export function useApi<T extends RequiredProcedures<any, any>>( getRouter: ( router: typeof trpc ) => T extends RequiredProcedures<infer TRoot, infer TProcedure> ? RequiredProcedures<TRoot, TProcedure> : never ) { const router = getRouter(trpc) return { create: router.create, edit: router.edit, list: router.list, details: router.details, } } function Component() { const { create, edit } = useApi((router) => router.admin.product) const mut = create.useMutation() async function handleCreate() { await mut.mutateAsync({}) } } ``` **How can I infer TRoot and TProcedure?** Currently it is typed as `any` in `T extends RequiredProcedures<any, any>`. But of course now my input and output types are also `any`, which I don't want. Any help is appreciated! :) Thanks!
  • Open Graph Meta Tags

    3
    • og:title
      Infer TRoot and TProcedure for specific procedures (polymorphism) - tRPC
    • og:description
      Hello! I'm trying to build a custom hook that returns specific procedures of a router: ```tsx "use client" import { MutationLike, QueryLike } from "@trpc/react-query/shared" import { AnyProcedure, AnyRootTypes } from "@trpc/server/unstable-core-do-not-import" import { trpc } from "@/trpc/client" type RequiredProcedures<TRoot extends AnyRootTypes, TProcedure extends AnyProcedure> = { create: MutationLike<TRoot, TProcedure> edit: MutationLike<TRoot, TProcedure> list: QueryLike<TRoot, TProcedure> details: QueryLike<TRoot, TProcedure> } export function useApi<T extends RequiredProcedures<any, any>>( getRouter: ( router: typeof trpc ) => T extends RequiredProcedures<infer TRoot, infer TProcedure> ? RequiredProcedures<TRoot, TProcedure> : never ) { const router = getRouter(trpc) return { create: router.create, edit: router.edit, list: router.list, details: router.details, } } function Component() { const { create, edit } = useApi((router) => router.admin.product) const mut = create.useMutation() async function handleCreate() { await mut.mutateAsync({}) } } ``` **How can I infer TRoot and TProcedure?** Currently it is typed as `any` in `T extends RequiredProcedures<any, any>`. But of course now my input and output types are also `any`, which I don't want. Any help is appreciated! :) Thanks!
    • og:image
      https://discord-questions.trpc.io/og/post?id=1313991984175911006
  • Twitter Meta Tags

    4
    • twitter:card
      summary_large_image
    • twitter:title
      Infer TRoot and TProcedure for specific procedures (polymorphism) - tRPC
    • twitter:description
      Hello! I'm trying to build a custom hook that returns specific procedures of a router: ```tsx "use client" import { MutationLike, QueryLike } from "@trpc/react-query/shared" import { AnyProcedure, AnyRootTypes } from "@trpc/server/unstable-core-do-not-import" import { trpc } from "@/trpc/client" type RequiredProcedures<TRoot extends AnyRootTypes, TProcedure extends AnyProcedure> = { create: MutationLike<TRoot, TProcedure> edit: MutationLike<TRoot, TProcedure> list: QueryLike<TRoot, TProcedure> details: QueryLike<TRoot, TProcedure> } export function useApi<T extends RequiredProcedures<any, any>>( getRouter: ( router: typeof trpc ) => T extends RequiredProcedures<infer TRoot, infer TProcedure> ? RequiredProcedures<TRoot, TProcedure> : never ) { const router = getRouter(trpc) return { create: router.create, edit: router.edit, list: router.list, details: router.details, } } function Component() { const { create, edit } = useApi((router) => router.admin.product) const mut = create.useMutation() async function handleCreate() { await mut.mutateAsync({}) } } ``` **How can I infer TRoot and TProcedure?** Currently it is typed as `any` in `T extends RequiredProcedures<any, any>`. But of course now my input and output types are also `any`, which I don't want. Any help is appreciated! :) Thanks!
    • twitter:image
      https://discord-questions.trpc.io/og/post?id=1313991984175911006
  • Link Tags

    8
    • canonical
      https://discord-questions.trpc.io/m/1313991984175911006
    • icon
      https://cdn.answeroverflow.com/867764511159091230/6af104c7f0f39a12fcd55bd7bd28928f/icon.png
    • preload
      https://www.answeroverflow.com/_next/static/media/4f05ba3a6752a328-s.p.woff2
    • preload
      https://www.answeroverflow.com/_next/static/media/9cf9c6e84ed13b5e-s.p.woff2
    • preload
      /discord/2.png

Links

6