Convex TanStack Query Integration
That looks reasonable! Check out the one we wrote a while ago: https://docs.convex.dev/client/tanstack-query https://github.com/get-convex/convex-react-query
6 Replies
Can you say more about your goals here, why async interables?
omg, how did I miss this 🤦🏽♂️
So the only goal here was to leverage Tanstack's caching so I can store query results in storage and provide results while a device is offline.
I originally stumbled across an article mentioning useLocalQuery but that doesn't seem to be available so I went down the rabbit whole and thought local cache wasn't currently available.
I took a look at oRPC's approach and saw they were using async iterables to keep the query alive while updating the cache so the initial thought was to just replicate their approach, but this is much more straightforward and elegant 💯
Well, at least I learned something 🙂
I'm new to Convex and the development speed I'm getting out of this is pretty mind-blowing 🤯 thanks for pointing me to this!!!
I'd love to see this used with query results in storage! We may be missing useful primitives for this that could be added. See #local-sync for the current status of a more cohesive local feature but I think combining convex with tanstack query (and I'd like to see TanStack DB collections!) is a pragmatic way to do things now.
Oh man, thank you for recommending TanStack DB!! I looked into this when it was first announced but didn't realize this may be EXACTLY what I'm looking for. I have collections working... it appears the
convexQuery returns options that don't include queryFn so I'm just adding an noop and it seems to work fine, just a callout. I need to circle back to this after work but this looks like a great solution to working offline (w/ a persistence adapter) and optimistic mutations. I'll share some feedback on the local-sync channel once I have the collection fully implemented!convexQuery returns options that don't include queryFnIs this unexpected? You're supposed to set a default queryFn in the setup instructions in https://github.com/get-convex/convex-react-query
Ah! I have that wrapping the query clinet but didn't think to just reuse that default queryFn which indeed takes care of the issue 👍🏽 The collection queries w/ tanstack db are really nice and works pretty well with the same options from tanstack query so integration has been pretty straightforward. Still need to work on optimistic mutations this afternoon but I think this make cover 100% of my use case 🔥