Waiting for invalidated query to be refreshed before navigating
Hello all:
I have a page where the user creates a new item in the database. I am invalidating the query that has the list of these items.
I would like to wait for the invalidated query to be reloaded before navigating back to the list so the user doesn't see it pop in after the fact.
I'm not sure how to watch for this to happen. I've got the following set up:
const isFetchingPosts = useIsFetching({ queryKey: ['myQueryName'] })
Then after the mutate happens I have tried using vueUse functions to watch the "count" of queries running and navigate when it is 0
if (isSuccess) {
invoke(async () => {
await until(isFetchingPosts).toMatch(v => v === 0)
await navigateTo('myPath')
})
}
I'm sure there is a more elegant way. I'm still a fairly new developer (even though I'm old!) so I would appreciate any ideas folks have.
Thanks very much!
Sam
I have a page where the user creates a new item in the database. I am invalidating the query that has the list of these items.
I would like to wait for the invalidated query to be reloaded before navigating back to the list so the user doesn't see it pop in after the fact.
I'm not sure how to watch for this to happen. I've got the following set up:
const isFetchingPosts = useIsFetching({ queryKey: ['myQueryName'] })
Then after the mutate happens I have tried using vueUse functions to watch the "count" of queries running and navigate when it is 0
if (isSuccess) {
invoke(async () => {
await until(isFetchingPosts).toMatch(v => v === 0)
await navigateTo('myPath')
})
}
I'm sure there is a more elegant way. I'm still a fairly new developer (even though I'm old!) so I would appreciate any ideas folks have.
Thanks very much!
Sam
