Newbie needs advice on how to structure query keys in this type of application
I've been asked at work to look into using React Query to simplify, decouple and generally improve a part of our application. I'm looking for someone to help me bounce some ideas around with how to best implement React Query in this specific use case or to determine if React Query might not be the best solution for this usecase.
The application
A grid based scheduling software where the "X-axis" contains cells for every date in a date range chosen by the user. The range can be up to a year long. Because of the potentially large timespan we only fetch data for the "visible" (visible dates + a few days) part of the schedule and defer fetching more until the user scrolls the page horizontally to reveal more dates. Today we refetch all the data when a user scrolls horizontally, even if only one more date became visible, which works but is not really effective because of the size of the schedule for many users.
Every row in the grid represents the people that will be scheduled. So a large company might have a few hundred rows.
What I hope to achieve
When the page is scrolled horizontally and reveals for example 1 more date (or even an entirely new range if you scroll far). Only the new dates are fetched and cached, keeping all previous data (unless it has become stale and should be refetched).
1 Reply
ratty-blushOP•3y ago
My "issue"
I'm trying to decide on how which "level" of the grid to but the
useQuery hook. The realistic options I have, with the structure of the application, are (as I see it):
- Put the hook on the Row component using the "visible" range in the query key and the request to the server (most like the current implementation). This would make the querying simple but would make not make it possible to have a date-by-date cache of each row? We could for example have a query key like this ["person", 1, "2023-01-01", "2023-01-07] (dates in ISO format) and then when the page i scrolled the range would shift and the new query key would be ["person", 1, "2023-01-04", "2023-01-10"]. This would more or less make the cache useless right? Unless the user manages to scroll to the exact range where a previous query is cached.
- Put the hook on each Cell component. This way each cell would fetch as soon as it is visible using a query key like this ["persion", 1, "2023-01-01"]. The problem I see with this is that this would result in many simultaneous calls, both at the initial page load where each row would want to fetch a whole week of data at the same time and as more dates become visible. I would probably need a batching solution to not overwhelm the servers.
Is there a middle ground option I'm missing? Is there a way to get the simplicity of the Row component but the caching of the Cell component?