CreateCaller with React-query
Hey guys. Is it possible to combine createCaller approach with React-query? I figured out that react-query needs HTTP/WS link to work at all. Do you have any idea how to combine them?
6 Replies
You can pass data from createCaller to a query as initialData, if you want to SSR data from tRPC. You cannot create something like a createCaller link, because createCaller is used for server components and React Query is used in client components.
If you do want to enable SSR for client components you may want to take a look at this article from TanStack Query https://tanstack.com/query/v5/docs/framework/react/guides/advanced-ssr.
Overview | TanStack Query Docs
TanStack Query (FKA React Query) is often described as the missing data-fetching library for web applications, but in more technical terms, it makes fetching, caching, synchronizing and updating server state in your web applications a breeze.
Motivation
Thanks for answer. I am using @trpc/server only client-side. No server-side at all
So I have trpc router on the client-side (browser). And then I create instance of this router (using createCaller) also client-side (browser)
Then you should be able create a custom link that uses createCaller, I wouldn't know how to do this however.
May I ask why are you using tRPC within the browser? The main benefits of tRPC is that you maintain Typsafety across client and server.
If you need a way to manage async state, wouldn't it be better to exclusively use React Query, since you already have the type information.
Haha yeah that was my initial thought, but I kinda failed once with implementing it and ufortunately don't have enough time to give another try
I wrote a very simple SDK to the blockchain. I create a websocket connection and I pass it to tRPC router context. Then I expose some methods to communicate with this websocket via tRPC.
It's very clean, I really like it
However, I have to create hooks manually
A bit messy. I'd like to avoid it