vue-query icon indicating copy to clipboard operation
vue-query copied to clipboard

proposal: dataRefreshOn() for infiniteQuery

Open michealroberts opened this issue 3 years ago • 5 comments

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?

michealroberts avatar Jun 25 '22 11:06 michealroberts

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);

DamianOsipiuk avatar Jun 27 '22 08:06 DamianOsipiuk

Would there be scope for a flushDataOn(), so revert back to empty data?

michealroberts avatar Jun 27 '22 12:06 michealroberts

You could either use:

DamianOsipiuk avatar Jun 27 '22 22:06 DamianOsipiuk

Hi Damian, I have tried the remove suggestion, however, this has not worked ... I still have data...

michealroberts avatar Jul 01 '22 15:07 michealroberts

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.

DamianOsipiuk avatar Jul 04 '22 18:07 DamianOsipiuk