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 TBDGitHub
GitHub - DogPawHat/1app6stacks at with-tanstack-start
Theo built the same app 5 times because he's dumb. Contribute to DogPawHat/1app6stacks development by creating an account on GitHub.
Theo - t3․gg
YouTube
I built the same app with 5 different stacks
I've wanted to do this video for SO long. I've used a ton of stacks, from Rails to Elixir/Phoenix to Go to T3 to Next. So I built the same app in all of them.
THANK YOU FLY FOR SPONSORING. Check them out at https://fly.io
Thank you @bmdavis419 for all of the help as well 🫡 check out his follow up https://youtu.be/ucFTUH78CmM
GITHUB LINK: http...
Convex
YouTube
Porting Theo's T3 Stack Roundest to Convex
In a recent video (https://www.youtube.com/watch?v=O-EWIlZW0mM), Theo Browne built a "rate the roundest Pokemon" app using five different stacks. In a shocking turn of events, Convex was not one of the five.
In this video, Convex co-founder Jamie Turner walks through what it took to port the tRPC version to Convex. Spoiler: not much. And we end...
9 Replies
This is great!
Yeah thanks for your work on the query integration. I'll be using it as a playground for silly optimization for a bit I think
Yeah the query invalidation stuff is slick, you still need to invalidate other non-Convex fetches but Convex queries all update together so never need to be invalidated
@jamwt was thinking about doing some perf stuff too, imagine prefetching the next pair
@DogPawHat +1 this is great. Any chance you have a video demo loading too? lol
Maybe once I've turbo it up.
@DogPawHat my latest video is based on a tanstack version too! https://www.youtube.com/watch?v=vTHRmAoHCug
Convex
YouTube
Optimizing TanStack/Convex with prefetched queries
Original code: https://github.com/jamwt/fastest-roundest-pokemon/tree/v1-slow
Code after this video's optimization: https://github.com/jamwt/fastest-roundest-pokemon/tree/v2-next-pair-preload
Check out Convex: convex.dev
Check out TanStack Start: tanstack.com
Nice. I've been trying to go deep on the loaders in router and start (I've a rough video demo of my own here https://discord.com/channels/1019350475847499849/1312052455055298610) but it's definitely a bit more complex. I might still be tweak in and then figure out a way to use Motion to animate the transition between routes
It might be more idiomatic to use prefetchQuery rather then useQuery without capturing the result
https://tanstack.com/query/v5/docs/reference/QueryClient/#queryclientprefetchquery
great video
There's a comment here on
fetchQuery vs prefetchQuery https://discord.com/channels/719702312431386674/1003327027849474198/1313780863430819871
prefetchQuery both returns no data (it's return type is Promise<void>) and it catches errors.
fetchQuerywill throw, so will ensureQueryData if there's no cached data and it called fetchQuery