Invalidate inactive query not working
I'm using a sidesheet to add/edit some data. If the sidesheet is mounted with an ID, I'm using react query to fetch data based on the id. After closing the sidesheet, it is unmounted and I invalidate the query by its queryKey + id and it turns to inactive because the sidesheet is unmounted and no one is listening to it. So far so good, but when I immediately open the sidesheet again, the query is marked as fresh and shows the old data from cache. After the stale time, the data gets marked as stale. I expected that the invalidation works also for inactive queries and runs again when I invalidate it and next time the query is used the query will refetch.
3 Replies
xenial-black•3y ago
Would it be possible to use a
cacheTime of say 250 (ms) so invalidation is not necessary after the sidesheet unmounts again?national-goldOP•3y ago
Good idea but I guess this is not what works well. Imagine someone is faster than 250ms 😄 I solved my issues with setQueryData and I guess I used the wrong ID in the query keys because my data was undefined. I missed to return the data in the update query function.
nice sideeffect from setQueryData is no extra network call 🙂
extended-salmon•3y ago
invalidation targets all matching queries, but only refetches active ones. In the case you are describing, I would expect:
- the query to become marked as stale by the invaliadation call as it's inactive
- no refetch when you call invalidateQuries
- a refetch once you mount the component again, because it should be marked as stale
if that's not what's happening, please provide a reproduction