Refetch a prefetch with interval in background

[bennettdams]

Is there a way to refetch a prefetch with interval?

I prefetch data from the root component to load critical data upfront:

export function useBatchPrefetch(batchId: string): void {
  const queryClient = useQueryClient();
  queryClient.prefetchQuery(["batch", batchId], () => fetchBatch(batchId));
};

in App.tsx:

function App(): JSX.Element {
  ...
  useBatchPrefetch("someBatchId")
  ...
  return <div>....</div>
}

I use another hook that fetches and provides the data "normally" (with useQuery inside):

export function useBatch(
  batchId: string
): {
  isLoading: boolean;
  batch: Batch | null;
} {
  const { isLoading, data } = useQuery(
    ["batch", batchId],
    () => fetchBatch(batchId),
    {
      refetchInterval: 1 * 60 * 1000,
      refetchOnWindowFocus: false,
      cacheTime: Infinity,
    }
  );

  return { isLoading, batch: data?.result || null };
};

Components that need that data to show something are using the useBatch hook.

I'm using the useBatchPrefetch hook on the root component. Now I want to refetch in intervals, so components that mount with the "normal" hook use the cached data.

Is this done via queryClient.refetchQuery(...) or am I missing some option that does that out of the box?
Or are there better solutions?

[TkDodo]

As far as i know, prefetchQuery does nothing if there is already data in the cache. I’m not exactly sure what you are trying to achieve. Once you have data in the cache, if a new component mounts, it will use that cached data and do a background refetch to get the latest data.

if you want to fetch in an interval without having an actual useQuery, i think you want to use queryClient.fetchQuery in a useInterval. Dan Abramov shows a good impl of that hook here: https://overreacted.io/making-setinterval-declarative-with-react-hooks/

[bennettdams]

I want to fetch a query in intervals, even when there's no instance of that query "active" in a mounted component. That way users who visit a page will always have fresh(er) data (which is served from the cache).
fetchQuery with useInterval seems like it will work for this use case.

[TkDodo]

yes, if that's what you want, you'd need to spawn that up manually. I think for most cases, the data in the cache suffices, or you can pre-load on demand, e.g. when the user hovers with the mouse over the button that would load that specific query.

But as always, everyone has different use-cases, and I hope the fetchQuery in usInterval works for you :)

[bennettdams]

Thanks! Just to give you an idea on why I want to do that:
My application

• never runs on mobile, so I'm free to fetch "as much as I want"
• renders real-time charts with up to 20.000 data points. Rendering them already takes a second, so having fresh data all the time brings huge (perceived) performance improvements