Hello hello. Shout out to the convex
Hello hello. Shout out to the convex team - absolutely loving the product!! I'm noticing my biggest pain point is that even though the data retreived caches, my data always refreshes. For this I want to implement React (Tanstack Query) in my Vite App. Anyone have experience with convex x tanstack? Are the docs accurate for this?
4 Replies
most of the docs i've seen use the tanstack, however i think the key difference is that tanstack leverages SWR (stale while refreshing) and react-query to poll data where convex data is "push" so maybe you just don't need react-query
although i'm pretty sure i've seen code examples with
react-query fwiw
for me personally, i don't use it, here's my architecture (using next14 but it shouldn't matter what router you're using)
- i have a hook that loads the convex data for the route, there's a useContext to get my login credentials fwiw but I'm using the native suppported integration between clerk and convex
- the hook emits the state (loading, data, error) from the convex api that's passed to my main view component as a prop (prop-drilling) that trickles down into other view components such as forms
- for forms, the callback to update the convex data, i'm passing the event handlers from the hook into the component (easier to test)
hooks are isolated from the props of the view components and only the hooks have convex dependencies, this just makes the whole thing easier to test
what i've seen is that if rows change the data from the hook will be updated (pushed) to the client so there's no need to poll endpoints which is what react-query gives you
i'm using shadcn components and tanstack (react-table) for grids and react-hook-form (what tanstack uses) for forms. i test my grids and forms with static data, the hooks should give me the same shape. the tricky thing to this point with TS has been explicitly typing my DTOs (Data Transfer Objects - things from Convex that need a type in the React components)
in Convex you don't get named types, you just get "anonymous types" (records or interfaces with lists of fields)
that gets messy real fastThanks so much for sharing this. I'm also using clerk and shadCn so similar stack, yea tanstack may be overkill to try and implement everywhere...
React hook form is separate from tanstack, unless you’re talking about the new tanstack form lib?
that's what i'm talking about
pretty much anything react that uses forms probably wants to use react-hook-form for validation etc