📹So I got nerd-sniped into making a Trellix clone with TANSTACK React Query over the weekend. I think it works really well, but feel free to disagree. No framework, no backend - just the great msw, vite + RQ SPA. Nice side-effect: it works if you lose network connection 😱

Shout out to @ryanflorence for making a really polished demo. I struggled making the optimistic updates in the UI - lots of concurrent mutations are not easy to get right. So I defaulted to writing to the QueryCache. Bit more code, but works great.

I tried to take as much code as possible from the original implementation, so a lot of code should look familiar. One thing I couldn't get to work is the flush-sync-then-scroll approach Ryan did. It might have something to do with how useSyncExternalStore works, not sure.

Instead, I converted this to a more declarative callback-ref approach, where items scroll themselves into view when they mount. This works really well apart from needing forwardRef (can't wait for React 19 😂)

I also found some edge cases that don't work super well (maybe you do, too?) that we'd have to fix in Query internally, so that alone is totally worth the effort. I like how remix groups mutations together with a key and that could be something for us, too in the future.

Overall, I'm quite happy with the result. You can: - play with the demo: - look at the source: Let me know what you think.

@tan_stack Where's the code and deployment?

@tan_stack 3 tweets down

@tan_stack How many teasing “dude this thing sucks” retweets do you think you’ll get?

@tan_stack I'm happy with it and I learned a thing or two and I don't really care about the rest

@tan_stack the UX of SPAs is hard to beat, that feels smooth as butter