LunaCrafts
LunaCrafts4w ago

Using tRPC (createCallerFactory) with react-query.

Hey guys. Do you know any recipe that would make that approach possible? I'm receiving following error: Property 'runtime' is missing in type 'DecoratedProcedureRecord<{ subscribe: Router<{ _config: RootConfig<{ ctx: RevPopClientContext; meta: object; errorShape: DefaultErrorShape; transformer: DefaultDataTransformer; }>; ... 5 more ...; subscriptions: {}; }> & { ...; }; }> & { ...; }' but required in type 'TRPCClient<Router<{ _config: RootConfig<{ ctx: RevPopClientContext; meta: object; errorShape: DefaultErrorShape; transformer: DefaultDataTransformer; }>; ... 5 more ...; subscriptions: {}; }> & { ...; }>'.ts(2741) createTRPCClient.d.ts(11, 14): 'runtime' is declared here. context.d.ts(17, 5): The expected type comes from property 'client' which is declared here on type 'IntrinsicAttributes & TRPCProviderProps<Router<{ _config: RootConfig<{ ctx: RevPopClientContext; meta: object; errorShape: DefaultErrorShape; transformer: DefaultDataTransformer; }>; ... 5 more ...; subscriptions: {}; }> & { ...; }, unknown>'
No description
5 Replies
infodusha
infodusha4w ago
Hello. What do you expect from this approach? The error comes from a thing, createCallerFactory is a server method, not a client method. It totally makes no sese to provide server code in the client provider.
LunaCrafts
LunaCrafts4w ago
Hey @infodusha! I initialize tRPC 'server-side' code on browser-side, and to be fair I do it quiet often. As you can see, I initialized tRPC with two flags (isServer set to false, and allowOutsideOfServer set as true). It's very useful approach and totally makes sense in some cases but I can agree It's not very common use-case. It works very well, and you can initialize 'server-side' code in a browser this way. However, I'm not able to use any third-party packages this way, because they require "trpc client", not caller. I would like to make that happen, because otherwise I need to repeat myself and write all of the hooks manually
LunaCrafts
LunaCrafts4w ago
GitHub
Using tRPC browser-side only (and combining createCaller with react...
Hello everyone, First of all, I'd like to mention that I use tRPC in an unconventional way. Sometimes I write tRPC packages that are primarily initialized on the browser side, using flags isSer...
infodusha
infodusha4w ago
Ahh I see now. So you kinda want to use trpc as a data layer but on the client... And you still want to use react-query integration because under the hood this "data layer" still make requests, am I right?
LunaCrafts
LunaCrafts4w ago
yeah and it work quite well. But without react-query I have to write all of the hooks manually.