Use cases for using Tanstack Query and Convex together?
I am very new to Convex so please excuse me if this is a totally obvious question as I'm trying to wrap my head around how to structure my app as I move it over to using Convex.
I used Tanstack heavily for a while and the primary reason why I switched over to Convex is because I was a bit tired of managing the cache and making sure everything is real time in my highly reactive app. I've been loving Convex so far because it reduces that processes to just two steps (query -> mutation) and adding new features has become faster.
I do love Tanstack query but I felt that convex could really replace most of my use cases for it. I hope this gives you a bit of a background of where I'm coming from.
So, I saw that there is a Convex with Tanstack Query adapter in the docs and I wanted to ask what are the use cases of using the two together? The way I see it is that the features that are missing from Convex that are in Tanstack are the onSuccess, onError, callbacks, but I can see how I can create those as needed in my mutations.
Thanks so much for helping me understand!
9 Replies
you have it about right!
also: tanstack query will eventually integrate with router + start for seamless prefetching support
but you don't need to worry about any cache management stuff when you're using convex with tanstack
so it's kind of the best of both worlds-that's the goal anyway
we also get more stuff for free likes subscription caching, which tanstack query does for us
Thanks Jamie! this is helpful. Would you mind elaborating a bit more about subscription caching? What does tanstack offer on top of convex in that regard?
The TanStack Query integration hangs on to subscriptions for a bit (60 seconds is the default) after a route/component that uses them unmounts. People have been doing this without TanStack with https://github.com/get-convex/convex-helpers/blob/main/packages/convex-helpers/README.md#query-caching.
@룬룬이 there's not much offered by TanStack Query that isn't how Convex already works; the main reason to use it are
1) you're already familiar with React Query (aka TanStack Query), or
2) you're using TanStack Start and want seamless SSR with it
3) You want to use TanStack Query-style cache management for fetch endpoints that aren't in Convex, i.e. for the same site you want to use both a Convex backend and another backend.
Convex does replace most uses of TanStack Query, the adapter is for the cases where you want or need to use TanStack Query anyway.
thank you so much! This is makes things crystal clear
Hi @ballingt , I really enjoy using Convex, but I use it alongside TanStack Query for features like isLoading and isPending. I believe if Convex offered similar functionalities, it would greatly enhance the experience!
the actual journey here was one of discovery and contrition... from my perspective
1. People wanted react-query type ergonomics, so we made an adapter: https://github.com/get-convex/convex-helpers/tree/main/packages/convex-helpers#richer-usequery
GitHub
convex-helpers/packages/convex-helpers at main · get-convex/convex-...
A collection of useful code to complement the official packages. - get-convex/convex-helpers
2. I created a tool to automatically cache subscriptions for awhile: so this is the second
useQuery variant: https://www.youtube.com/watch?v=ZgxDlSUGpfEConvex
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
...
3. Ian and I started to say "well, what if they want both? The cached version of react-query style apis on convex..." and then we started to think about how to generalize
useQuery variants to compose them together...
and at this point we had written a lot of code
4. suddenly, someone (can't remember who) sort of pointed out if we just integrated with actual react-query, we'd get both the API people wanted and the subscription caching for free
and then it was like "oh yeah. we should just do that." happy to delete your own code when you get the chance, in my book
so yeah. I still like the adapters we have in convex-helpers, but I also think if there's a mature library people love that already solves all these problems, I'm very happy to have people use that instead of the convex-specific code
I can just feel us slowly recreating all the lessons/solutions that tanstack-query (react-query) has already solved.
(but without the awesome integration into things like a high-quality router and SSR framework!)