T
TanStack•17mo ago
quickest-silver

Perform the refetch automatically

Hello, Is there any way to perform the refetch automatically? For example: I have a page in my application that the user spends a lot of time on, would it be possible to renew the data when it becomes stale, automatically? It turns out that 'refetchInterval' is not working well, because every time the component is remounted, it is restarted, which doesn't happen with the stale time. In my case, the ideal would be for the time to count from the last successful request, instead of restarting each time. For now I'm doing it like this: 
  useEffect(() => {
    const interval = setInterval(() => {
      if (isAuthenticated) {
        queryClient.invalidateQueries({ queryKey: ['query'] })
      }
    }, 1800000)

    return () => clearInterval(interval)
  }, [queryClient, isAuthenticated])
  useEffect(() => {
    const interval = setInterval(() => {
      if (isAuthenticated) {
        queryClient.invalidateQueries({ queryKey: ['query'] })
      }
    }, 1800000)

    return () => clearInterval(interval)
  }, [queryClient, isAuthenticated])
This way the interval isn't restarted, as I'm using it in a component at the top. Is there another way for me to do this natively in React Query? Thanks!
4 Replies
like-gold
like-gold•17mo ago
Do you want your application to refetch every 3 minutes regardless of everything? Even if it was refreshed one second ago?
genetic-orange
genetic-orange•17mo ago
In this one if you refresh the page it will start over again. Is this what you want?
quickest-silver
quickest-silverOP•17mo ago
I have a form where there is an automatic save and this save requires an Azure token. As the user spends a lot of time on this form, I run the risk of the token expiring and the autosave stopping working. Today it happens that the refetch in background resets every time the component is mounted, but the stale time doesn't. I created this solution in useEffect and placed it in a component at the top, so that it invalidates the query every 30 minutes. I also think I found another solution: I reduced the stale time to 25 minutes and left the refetch with the same value, so even with it resetting, there is still time to renew before it expires (it expires in 1 hour).
like-gold
like-gold•17mo ago
Honestly, your refetch should be a mutation and not a query. With this you could arbitrarily run the refetch in the onSuccess

Did you find this page helpful?