genetic-orange

Update cached query result with the fresh value from another query [Details => List].

What's the go-to solution to sync a freshly fetched value (let's say getCustomerByID - the details part) into an already stored query result (let's say getCustomers - the list query). onSuccess callbacks on the queries are deprecated so I suppose I should use useEffect on query.data when fetching getCustomerByID and update the cache manually but I don't feel very confident in this approach.

6 Replies

foreign-sapphire•11mo ago

Hi I am interested on your post

harsh-harlequin•11mo ago

What's wrong with letting details exist under their own cache entries?

genetic-orangeOP•11mo ago

What do you mean? They exist on their own. The thing is, I have an old version of the object in the list key and a fresh version under the details key. So i want to update the list as well. queryKey: 'list' => contains potentially stale version of the object. queryKey: 'details' => contains a freshly fetched copy of the object. I want to update the object inside list when i fetch details. That's it.

harsh-harlequin•11mo ago

You could do it in the queryFn and save yourself an effect.

const details = await getCosutmerByID(...)

// `.find` the costumer enrty to update
queryClient.setQueryData(['costumers', oldData => ...)

return details

const details = await getCosutmerByID(...)

// `.find` the costumer enrty to update
queryClient.setQueryData(['costumers', oldData => ...)

return details

fascinating-indigo•11mo ago

Why not store the IDs in the lists cache, and pull from details cache with the ID on details component render https://tkdodo.eu/blog/seeding-the-query-cache#seeding-details-from-lists

genetic-orangeOP•11mo ago

That's what I was thinking as well.

Gaming

Programming

Update cached query result with the fresh value from another query [Details => List].

Did you find this page helpful?