Gh∅st
Gh∅st•6mo ago

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, 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> 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 as n input, and returns 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
4 Replies
Nick
Nick•6mo ago
Take a look at the polymorphism helpers
Solution
Nick
Nick•6mo ago
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...
Nick
Nick•6mo ago
Alternatively if you just want to pass a single function around you can easily take the typeof or reconstruct it from the inputs and outputs
Gh∅st
Gh∅st•6mo ago
thanks! this is exactly what I'm trying to do!
More Posts
tRPC Options Method not Allow in Vercel Next.jsI've been getting this error and I have already added CORS in my projects, in initializing the routeBest way to update a TRPC useQuery response without refetchingHey, I currently have a trpc useQuery endpoint which retrieves a series of form submissions for a uWhat is a useSuspenseQuery?Hi, I'm wondering what a useSuspenseQuery is, im looking at the docs but it doesn't explain it anywhNo "mutation"-procedure on pathHello all, I am using the latest version of TRPC on my client and server. I am using React Query onis there a better way to do this?```js let query; let params; switch (getWhat) { case "posts": query = api.user.userPHow to access the query cache data?I want to be able to use a data from already queried data as an initial data of another query. Is thThoughts on how to integrate t3 app, connectkit web3 auth, nextjs middleware, and trpcI am prototyping an application using t3 app with trpc, connectkit web3 auth. I am wanting to use nonError callback typeI want to have a callback onError passed from parent component to the child which has mutation call.Can I perform react query queries without using a trpc procedure, using useQuery standaloneHey, I need to perform a client site request, and I can't implement it with TRPC, so can I use regulTest React component using trpc client and `useSuspenseQuery`Hello ! I'm trying to test my React component that's querying through a tRPC client and `useSuspens