The right way to fetch and cache with react query
I think I have made a simple cache complex. Just wanted some help restructuring it.
Use case
I am building project management application with 2 types of tasks - 1) project tasks 2) workspace tasks (these are tasks that are not part of any project).
Note - Projects are made up of stages and stages are made up of tasks
Currently I have tasks stored in the cache in the following ways -
1) Tasks for each stage in a project - ["tasks", "project", projectId, "stage", stageId]
2) Tasks for a specific user, kind of like My Tasks ( these are across projects and workspace) - ["tasks", "user", userId]
3) All the tasks of a company (across projects and the workspace) - ["tasks", "all"]
When I click on any of these tasks, I fetch the whole task which opens in a panel
4) Specific task - [tasks, taskId]
Where I need help
1) If I make an optimistic update to status for example, I need to change 4 caches and invalidate 2 large requests (2 & 3) with the way I have set it up. This seems extremely suboptimal? Not sure how I should restructure things so I'd appreciate any advice here.
2) All tasks are sorted relative to the due date by default. If I change the status or any other attribute, I need to make sure the order is the same as the refetch. Is it ok to be sorting on the client side every time? Couldn't think of any more optimal workaround.
0 Replies