T
tRPC

❓-help

Canary useUtils and createTRPCQueryUtils type not callable

SSebasPtsch12/22/2023
Trying to access utils object in my application after using useUtils or createTRPCQueryUtils and getting the following type error:
This expression is not callable.
Not all constituents of type '(DecorateRouter & { [x: string]: (DecorateRouter & ...) | DecorateProcedure<_trpc_server_dist_core_procedure.QueryProcedure<{ input: void; output: { isAuthenticated: boolean; isAdmin: boolean; }; }>, _trpc_server_dist_core_procedure.QueryProcedure<{ input: void; output: { ...; }; }>>; }) | DecorateProcedure<...> | (...' are callable.
Type 'DecorateRouter & { [x: string]: (DecorateRouter & ...) | DecorateProcedure<_trpc_server_dist_core_procedure.QueryProcedure<{ input: void; output: { isAuthenticated: boolean; isAdmin: boolean; }; }>, _trpc_server_dist_core_procedure.QueryProcedure<{ input: void; output: { ...; }; }>>; }' has no call signatures.
This expression is not callable.
Not all constituents of type '(DecorateRouter & { [x: string]: (DecorateRouter & ...) | DecorateProcedure<_trpc_server_dist_core_procedure.QueryProcedure<{ input: void; output: { isAuthenticated: boolean; isAdmin: boolean; }; }>, _trpc_server_dist_core_procedure.QueryProcedure<{ input: void; output: { ...; }; }>>; }) | DecorateProcedure<...> | (...' are callable.
Type 'DecorateRouter & { [x: string]: (DecorateRouter & ...) | DecorateProcedure<_trpc_server_dist_core_procedure.QueryProcedure<{ input: void; output: { isAuthenticated: boolean; isAdmin: boolean; }; }>, _trpc_server_dist_core_procedure.QueryProcedure<{ input: void; output: { ...; }; }>>; }' has no call signatures.
Solution:
Figured this out, was to do with me exporting the server types and importing them on the client. Added a path override similar to what is done in the trpc project to just grab the AppRouter type from the typescript files rather than the generated declaration.
Jump to solution
AKAlex / KATT 🐱12/22/2023
are you using next?
SSebasPtsch12/22/2023
I am indeed πŸ™‚
AKAlex / KATT 🐱12/22/2023
npm i --save @trpc/server@next @trpc/client@next @trpc/react-query@next @trpc/next@next @tanstack/react-query@latest @tanstack/react-query-devtools@latest
npm i --save @trpc/server@next @trpc/client@next @trpc/react-query@next @trpc/next@next @tanstack/react-query@latest @tanstack/react-query-devtools@latest
SSebasPtsch12/22/2023
thanks, I'll take a look at my deps
AKAlex / KATT 🐱12/22/2023
look at the top of the readme of https://github.com/trpc/trpc/tree/next
SSebasPtsch12/22/2023
haha
AKAlex / KATT 🐱12/22/2023
feel free to do a PR to https://github.com/trpc/trpc/blob/next/.wip/changes.md noting your changes so we remember to put it in the blog post later πŸ™‚
Solution
SSebasPtsch12/23/2023
Figured this out, was to do with me exporting the server types and importing them on the client. Added a path override similar to what is done in the trpc project to just grab the AppRouter type from the typescript files rather than the generated declaration.

Looking for more? Join the community!

T
tRPC

❓-help

Join Server
Recommended Posts
tRPC run express under the hood?tRPC run `expressjs` under the hood?Modify mutation error messages?We occasionally get timeouts from cloudfront which gives the user an error about how the cloudfront server-side helpers doesnt work with `Hydrate` and `QueryClient`environtment: node v20.9.0, npm Hi i tried to implement server-side helpers but somehow it just doesUnable to mock unstable_batchStreamLink network responseHi there! I have a couple API endpoints that call third party dependencies and would like to mock a Using trpc with fastify server and nextjs clientHello, is it possible to use fastify for server and have a nextjs client and make use of the SSG / SI can't mutate or query in SvelteKitEnvironment: Node 20 with Yarn I'm not getting any specific errors but I don't get the "mutate" or "TRPCError class, public readonly cause?: Error; this line should have override functionhey i am trying to use the TRPCError for throwing errors in my apps, but i am getting this error, chWhy do people use SplitLink? (http + websocket)Why not just use websockets for everything? Just curious.Force user to loginHow can I redirect the user to "/login" if the user are not logged in?TRPC with middly middleware on lambdaHello, has anyone used middly middleware on AWS lambda? Thanks!tRPC on Vercel Serverless without Next?I would love to be able to use tRPC in a vercel serverless context, but not in a Next app – just theUsage with zod-validation-errorHas anyone tried using trpc with https://www.npmjs.com/package/zod-validation-error ?Errors while running mutations when deploying CT3A using SSTI'm currently migrating a NextJS project of mine from Vercel to SST. It's based of CT3A and the trpcKeep suspense on SSRI'm currently trying to perform a trpc query in Nextjs with React suspense, however, I only want theHow to properly type function arguments for procedures?I'm using tRPC 10 with `trpc/react-query` I'm trying to understand how to create a function that reHow Do I Ban Users & Invalidate Their JWT Tokens?When a malicious user gets banned by an admin, I have to ensure he no longer can access protected rouseQuery first refetch returns undefinedHello. So, I'm trying to get an item by ID when the user clicks a button. I've searched around and f❌ Failed to collect page data for api trpc [trpc] ❌I'm getting this error when I deploy to Vercel Framework: NEXTJS Anyone resolved this issue πŸ€”, HELSSR with initialData throws errorI'm using SSR with Astro and have a client that looks like ```tsx export type TfdExampleGreet = RouHow to cache trpc server request next.js app routeris it the right way ctx.headers.set( "Cache-Control", "public, max-age=43200, stale-while