Create a typescript type that refers to a useQuery hook dynamically

I'm trying to create a typescript type that generically refers to a useQuery hook (e.g. I am trying to do

type CommonHookFn = (name:string)=>MyCustomType

type CommonHookFn = (name:string)=>MyCustomType

, except I need the equivalent of a useQuery hook where I can templatize the inputs/outputs).

From exploring the types under the hood of trpc, I think I need to use

ProcedureUseQuery<TProcedure, TPath>

ProcedureUseQuery<TProcedure, TPath>

to do this, but I can't figure out what I would put in to TProcesure/TPath to tell it that I'm looking for a Query with specific input/output types.. (e.g need a hook that takes a

string

string

as n input, and returns

MyCustomType

MyCustomType

for its data)

Does anyone know how to create a type like this?

environment:
Node 19,
typescript 5.3.3,
@trpc/client, @trpc/server, @trpc/next: 10.45.1
@tanstack/react-query: 4.36.1

Solution

I also have a post on this https://dev.to/nicklucas/trpc-patterns-router-factories-and-polymorphism-30b0

DEV Community

tRPC & React Patterns: Router Factories

This post comes in 2 halves: tRPC Router Factories Consuming Router Factories in a React...

Jump to solution

tRPC•2y ago•

6 replies

Gh∅st

Create a typescript type that refers to a useQuery hook dynamically

I'm trying to create a typescript type that generically refers to a useQuery hook (e.g. I am trying to do

type CommonHookFn = (name:string)=>MyCustomType

type CommonHookFn = (name:string)=>MyCustomType

, except I need the equivalent of a useQuery hook where I can templatize the inputs/outputs).

From exploring the types under the hood of trpc, I think I need to use

ProcedureUseQuery<TProcedure, TPath>

ProcedureUseQuery<TProcedure, TPath>

to do this, but I can't figure out what I would put in to TProcesure/TPath to tell it that I'm looking for a Query with specific input/output types.. (e.g need a hook that takes a

string

string

as n input, and returns

MyCustomType

MyCustomType

for its data)

Does anyone know how to create a type like this?

environment:
Node 19,
typescript 5.3.3,
@trpc/client, @trpc/server, @trpc/next: 10.45.1
@tanstack/react-query: 4.36.1

Solution

I also have a post on this https://dev.to/nicklucas/trpc-patterns-router-factories-and-polymorphism-30b0

DEV Community

tRPC & React Patterns: Router Factories

This post comes in 2 halves: tRPC Router Factories Consuming Router Factories in a React...

Jump to solution

Create a typescript type that refers to a useQuery hook dynamically

Create a typescript type that refers to a useQuery hook dynamically

Similar Threads

Similar Threads

Similar Threads