TanStackT
TanStack•8mo ago•
8 replies
efficient-indigo

Client side cache best practices

Hi!

Finally getting my hands on TanStack and I love it so far. One question I have though is regarding cache best practices when it comes to invalidate vs manually update it.

Say I have a simple CRUD api:

GET  /api/hospitals/[hospital-id]/services -> {serviceId, serviceName}[]
POST /api/hospitals/[hospital-id]/services

GET    /api/hospitals/[hospital-id] -> {id, name, serviceCount}
PUT    /api/hospitals/[hospital-id]
DELETE /api/hospitals/[hospital-id]

GET    /api/services/[service-id] -> {id, name}[]                   
PUT    /api/services/[service-id] 
DELETE /api/services/[service-id]


The main thing from this API is that some queries say DELETE /api/services/[service-id] (DELETE_ SERVICE) will have some impact on the response of others e.g GET /api/hospitals/[hospital-id]/services(HOSPITAL_SERVICES) or GET /api/hospitals/[hospital-id](HOSPITAL).

When using useMutation for the DELETE_SERVICE, I am not sure if manually updating the cache for the keys associated with HOSPITAL_SERVICES and HOSPITAL is a good practice.

For the HOSPITAL_SERVICES cache I would need to loop through the array of {serviceId, serviceName} and remove the correct one. For the HOSPITAL cache I would need to decrement serviceCount by one.

And to some extent one could argue that once I have the initial state of my app, then I could always rely on manually updating the cache and never actually refetc the data from the server. So my main question is to which extent is it considered good or bad practice? When invalidating cache is better over manually updating it?

Another related question: is updating the cache "thread safe" (or async context is maybe more precise)? Not sure if it really means something in JS but basically if the same mutation is called twice and the 
onSuccess
 of both tries to decrease the cached serviceCount, isn't my state going to be corrupted (e,g showing 6 instead of 5 for instance)?
Was this page helpful?