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>'
5 Replies
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.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
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...
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?
yeah
and it work quite well. But without react-query I have to write all of the hooks manually.