vue-query
vue-query copied to clipboard
proposal: dataRefreshOn() for infiniteQuery
Again, amazing library ...
It would be extremely useful if we could specify when to do a force refresh on, or flush out data, for an infinite query.
For example, if we are performing an infinite query, it would be nice to flush out the data when, for example, a specific ref changes that will change maybe a querystring of URLSearchParams ... unless there is currently a way to do this?
i.e., I'd like the data to be flushed out when a certain queryKey changes ... so far I have this:
useInfiniteQuery(
['searchBodies', { page: page.value, params: params.value.toString() }],
async () => {
const { data } = await fetchBodies({
page: page.value,
params: params.value
})
return data
},
{
retry: 2,
staleTime: 10000,
keepPreviousData: true,
getNextPageParam: previousPage => previousPage.next_page,
getPreviousPageParam: nextPage => nextPage.previous_page
}
)
But it looks to just add to the infinite data (which is what I think it intended to do)...
What are your thoughts on this?
I think you are looking for combination of watch composable from Vue and refetch which is returned from useInfiniteQuery.
Basically you would call refetch whenever watch callback happens.
Example:
const { refetch } = useInfiniteQuery(...);
watch([fooRef, barRef], refetch);
Would there be scope for a flushDataOn(), so revert back to empty data?
Hi Damian, I have tried the remove suggestion, however, this has not worked ... I still have data...
Well, remove is removing the query from the cache, and that works correctly which you can see in the DevTools.
The issue here is that observer is not notified that query has been removed.
Could you tell me more about the use case? Based on that I could suggest another solution, or propose a feature in the core library.