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?
B
BeBoRE53d ago
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
L
LunaCrafts53d ago
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)
B
BeBoRE53d ago
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.
L
LunaCrafts53d ago
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
L
LunaCrafts53d ago
No description
L
LunaCrafts53d ago
A bit messy. I'd like to avoid it
More Posts
Beginner: form field error handling ?hey guys, I have a question regarding error handling with trpc. How could I specify a form field iZod.enum makes my tRPC explodeI'm having an issue with what appears to be circular dependencies. My problem is that I'm not sure wReact type errors because of backendHello, I'm using tRPC in React and it's working fine generally. However, WebPack always finds somethValue attached to all queriesIs it possible to add a value the all queries so its preset within every procedure call on the clienInvalidating query cache irrespective of query paramsHey is it possible to invalidate a query cache without providing parameters? I have a query for exaSentry integrationHello. I'm using trpc + fastify approach. I need a proper error loggin so I added fastify sentry, whIn my NEXTJS app can read value next-auth session in localhost ,but not when deployed to VercelI have several procedures in my TRPC router (https://github.com/Teodorant1/nighthawk_repair/blob/masWebSocket Authentication: Cookie missingHi community 👋 I'm currently trying to integrate the wsLink, and I've noticed that cookies are noClient request headers with createTRPCProxyClientSimple proxy client, following the documentation ```ts import { createTRPCProxyClient, httpBatchLinkGet auth token from context when defining httpBatchLinkIm setting up an ApiProvider for react query and I want to get the authorization token for the AuthoInfinite query get direction infoHello everyone, I'm implementing a bidirectional infinite query and i would need to access the direSubscription for a specific userHow can I create a TRPC subscription that takes a userId? When updates occur elsewhere in my app, IProcedure specific custom headersI'm using recaptcha to protect some of the procedures, and I'm used to sending challenge tokens as hUnable to use caller, in frontend bcz i dont have access to req and res objectsi was trying to use trpc callers, for ssr the queries, but i was not able to create one since i haveReduce `isPending` time for prefetched Queries?I'm looking for ideas on how to reduce the `isPending` time for prefetched `getStaticProps` queries.Beginner Client ProblemsNode 21, npm 10.2.4, tRPC 10, from a create-t3-app run yesterday. I've got a zod validator create bHow to deal with breaking backend version releases during active session?What is the best practice to deal with errors that occur if the backend changes but the frontend bunuseMutation() runs 3 timesHello, I have this weird problem that all my mutations across the app runs 3 times I don't know whyHow to protect against Cross Site Request Forgery (CSRF)How can I protect against CSRF attacks when using tRPC on the client? Usually frameworks would inclutRPC doesn't explicitly check Content-TypeOWASP recommends explicitly checking the Content-Type header to be the expected one, but when I pass