DogPawHat
CCConvex Community
•Created by DogPawHat on 11/29/2024 in #show-and-tell
Tanstack Start/Convex 1app6stacks - Now with Turbo and video!
Video demo: https://youtu.be/Vxu11-HsuZQ
Previous Post: https://discord.com/channels/1019350475847499849/1310646901259108456
As requested by @Wayne
This now has a turbo route with optimistic route preloading alongside the vote mutation. It's been resonably fast; I've noticed some slowdowns while trying to demo it but when it's fast it's fast.
Code here: https://github.com/DogPawHat/1app6stacks/tree/with-tanstack-start
Site here: https://roundest-tss-convex.vercel.app/
7 replies
CCConvex Community
•Created by DogPawHat on 11/25/2024 in #show-and-tell
Tanstack Start/Convex 1app6stacks version
https://github.com/DogPawHat/1app6stacks/tree/with-tanstack-start
https://1app6stacks.vercel.app/
See https://www.youtube.com/watch?v=O-EWIlZW0mM and https://www.youtube.com/watch?v=hW2IiPFFd_0 for the og projects.
Tanstack Start + Convex version of voting for the Roundest pokemon
Convex backend I was initially developing on my own, but hit into a lot of issues with the random element and convexs caching. Initally was trying to do the random selction client side, but I've sense just copied Jamies backend code for now. I have some ideas to change it for the "turbo" version I want to make.
For the main vote page, I've actually not used a lot of the router integration with Tanstack Query. I found it easier to decouple the state of the random seed from the router, so the battles are loaded as not critical data inside it's own Suspense boundary. Still very fast.
I had some issues with client server hydration mismatches with the random numbers as well, so I created a server function to just return
Math.random and have a queryOptions object with staleTime: Infinity. So when the query client rehydrates on the client-side it doesn't fetch again. As an aside, the Tanstack Query integration seems to be invalidating everything including my own queries when you call a mutation, so no need to invalidate manually.
Next TODO for this app
- [ ] loc
- [ ] turbo route
- [ ] use framer to provide clean transtions between different pokemon battles (over the coarse of voting and fetching next pokemon)
loc TBD13 replies