SebasPtsch•8mo ago

Canary useUtils and createTRPCQueryUtils type not callable

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

8 Replies

Alex / KATT 🐱•8mo ago

are you using next?

SebasPtsch•8mo ago

I am indeed 🙂

Alex / KATT 🐱•8mo ago

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

SebasPtsch•8mo ago

thanks, I'll take a look at my deps

Alex / KATT 🐱•8mo ago

look at the top of the readme of https://github.com/trpc/trpc/tree/next

SebasPtsch•8mo ago

haha

Alex / KATT 🐱•8mo ago

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

SebasPtsch•8mo ago