Description
Opening this more for documentation purposes. I'm planning to start on this in the next sprint.
Following our migration from using XState to React Query for data fetching, the overall ergonomics are better, but we still aren't leveraging all of React Query's capabilities. For compatibility reasons during the migration, we had to disable a lot of the query-caching logic, but now looks like a good time to start flipping things back on. Once done, this should help the UI feel significantly more responsive.
We can turn caching on globally by flipping a single setting right now, but just because so much of the site wasn't built with that in mind, that feels risky. It feels like it's best to update things one-by-one, and verify that things are working correctly and aren't causing unexpected "UI annoyances". For example, turning caching on causes the paginated table UIs to drop you onto random parts of the page when you change pages. Ideally, it would always scroll you back to the top of the table, no matter what.
Plan of attack
- Start going through each of our query factory files, and manually update each factory function to turn query caching on
- For each factory, verify that the UI using it still works and isn't causing any new annoyances. Resolve any issues in the UI that pop up.
- Once all factories have been updated, remove all the factory-level query caching configs, and turn caching on globally throughout the app
Not fully sure how long this could take, just because the UI might act up in unexpected ways once we introduce this new behavior. Thinking this could take 1–2 sprints, depending on how much priority it's given.