convex + tanstack -- why etc.
Hey folks! For some reason I cant really define im really stoked on Tanstack. However, I am a diehard Convex user. I know they both play nice together. My question is: if Convex handles state changes in realtime, why would I want to use another layer of management (query) on top of my Convex functions? ❤️
5 Replies
react-query does a lot more jobs than convex's useQuery. (1) it supports more backends than just convex; (2) it provides pretty cool caching support out of the gate; (3) it interoperates with tanstack-router for route preloading and things like that
so I think our
useQuery is great at a relatively simple job. when you're building a whole app, however, if you go all-in on tanstack, then you're getting solutions to a lot of broader things than we take on (by design). and you still get the good things about convex tooThank you so much for the response Jamie! Im sparring with the challenges of using Convex for everything, vs, querying api.getIndividualData.everySingleRender.thing and not blowing up my DB bill. Im a front end dev with delusions of grandeur 😅
Since we have a thread going - some questions ( sorry if they are trivially dumb ) ->
Your thoughts on putting all my convex calls in hooks? Like { characters, worlds, villians } = useStory. useStory = useQuery(.....
Should i hoist things like 'user' to a wrapper component? I dont want to do a user query on every page, or do i?
Seems like most of us put user stuff in some sort of context that wraps everything. But in theory you could just use something like the caching in convex helpers and just do the call every page change and the db wouldn't know the difference.
The Convex client provider is already effectively hoisting and deduping, plus calls are cached on the backend, so you can just use Convex functions directly without worrying about scalability early on. You can also add the magic cache helper to get even closer to the hoisting concept you mentioned: https://www.youtube.com/watch?v=ZgxDlSUGpfE
Convex
YouTube
Can your database do this? Ep. 1: Magic caching
A Next.js app with no query cache? Jank. One with a cache? No more jank, but now we need to deal with cache invalidation and application consistency. Ugh.
But with Convex's magic query cache, Convex's powerful subscriptions are cached, not merely values. So you get the best of both words.
Repository here:
https://github.com/jamwt/cached-dmv
...
amazing, thanks again!