Is there a way to use the trpc client inside a useEffect? Or a separate "service".
I've been using trpc for quite a while now. I have a pretty simple data flow that seems overly complicated to implement in trpc.
In my website, when you go to
"mywebsite.com/local" I want to fetch from local storage,
but when you got to mywebsite.com/<anythingelse> I want to fetch from a trpc API.
I don't feel too comfortable just using tanstack react query on everything inside a monolithic react component. Or is it something I should be more comfortable about. I'm also thinking of using the vanilla trpc client.12 Replies
Why don't you feel comfortable. And what do you mean by monolithic
I mean, if it's going to happen in the first load, you could write it on the server byt using
getServerSideProps
but this question really confuses me in many ways, could you elaborate more on why you don't want to use RQ?
And why you want it to be in useEffect?Sounds like you should put this logic into a custom hook tbh - a monolithic component does not sound nice for such loading logic. I would prefer to see a „useLoadXYZ“ in a page component
Sorry if it's not clear. I kind of want a specific page to work both online and offline. Offline, it loads data from local storage. Online, it calls the api. (It's a PWA so it works offline)
Putting this in useEffect with a simple if and else statement seems simple. Not sure how to do this with RQ though because I'm forced to use 'useQuery' outside 'useEffect'. And 'useQuery' seems to get called onMount just like useEffect does, but I kinda wanna defer it to when I want it actually called like useMutation's mutateAsync.
Also worth mentioning that I don't really need SSR here so getServerSideProps won't be necessary. But on that topic, will the page not load offline (considering this is a PWA) if getServerSideProps is present in the .tsx file?
Ide use rq and make the query functions yourself
It's the perfect usecase
Can you elaborate on this?
tRPC Client | tRPC
The "Vanilla" tRPC client can be used to call your API procedures as if they are local functions, enabling a seamless development experience.
Are you looking for a framework agnostic way to use trpc?
Yeah I kind of want to do a query on the api just like I would with axios, just typesafe like trpc.
I saw this solution. I also wanna ask if does having two trpc clients (createTRPCNext and createTRPCProxyClient) pointing to the same baseUrl cause any conflicts?
But react query is perfect for your usecase. You can write your own query functions that determine if your offline and fall back to local storage
Offline React Query
A glimpse at what v4 will bring for offline queries
Thanks for this @Finn ( CLO ) !!