Controlled state mutation in useQuery
Hi! I am looking for some way to control when states are updated. So the use case is like based on some user action I am animating somwthing for 1-2s and based on the same callback I'm refetching the query or updating the params being passed to it. So, I want that both animation and data fetching happens in parallel and
onAnimationEnd the data is updated into states exposed by react query. Kindly help3 Replies
eastern-cyan•2y ago
Can you do a more detailed explanation?
extended-salmonOP•2y ago
Sure, I have a map. map has several points marked on it in a country. The pills contains data like Lat, Long. When user clicks on a pill as per current logic the fly animation is initiated and the view flies from Lat/Lng A to Lat/Lng for the duration say 2s. And then based on it react states like current location is updated using which react query refetches the query. Instead I want that the animation and data fetching run in parallel. And once animation ends I somehow tell react query to update the states like data then so that view can be updated. So like async state updates as my current source for reading data from API is reach query and for states across the app its Zustand.
So, onces animation ends I would have to tell reach query to update the data so that the map view gets updated.
Why I can't do it together because animation will get interrupted and it wont play because we hard reset the Lat/Lng currently its A -> Click -> Animate to B -> Fetch for B -> View gets Updated
eastern-cyan•2y ago
How about A-> Click -> prefetch B + animate -> update state