Feature request: refetchInterval for queryClient.fetchQuery

[bennettdams]

It would be nice to have the ability to set a refetchInterval for queryClient.fetchQuery, as we have with useQuery.

This would allow the application to always have fresh data, no matter if a query is "active" (in a mounted component) or not.

You can create your own custom hook (e.g. useInterval) and execute fetchQuery with it, but having that built into the library is maybe not a bad idea.

---

Imagine multiple pages (e.g. one for each production machine) which all show a chart with real-time data.
Each page uses useQuery to get its own data, it can easily refetch with the refetchInterval.
Now a user switches to another page. That new page's useQuery will refetch, before that the old result from cache will be shown.

I would like to always show fresh(er) data when a user switches to a page.
useQuery's cacheTime is not sufficient for this use case, as it will show data from the last fetch if set to Infinity, but the last page switch could be minutes or hours in the past. For real-time data with new data every second, I need to fetch in the background (=when that page is not mounted).

---

Update

I just realized that I can simply use that custom hook (that I use in my components) on a global component and just ignore the result.

// some child component
const { batch, isLoading } = useBatch("batchId")

vs.

// global/top level data layer component
useBatch("batchId")

That way they even share the refetchInterval!
Does this have any downsides though? Maybe performance?

[TkDodo]

Does this have any downsides though? Maybe performance?

It re-renders the current component on every refetch, but you can mitigate that if the immediate child is memoized. Or it doesn’t matter :)
But from code clarity / intent, i like the fetch-in-useInterval more.