How to immediately refetch a stale query?

[ryanoglesby08]

I'm wondering what is the best way to accomplish the equivalent of a refetchOnStale prop?

My use case is that I'm fetching some data that has a known TTL (let's say its 5 minutes). Once that TTL is reached, the data cannot be used anymore and MUST be refetched before being used again.

staleTime: <TTL> is useful here so that the data can be refetched on window re-focus, re-mount, etc
refetchInterval : <TTL> is also useful so that the data can be refetched every 5 minutes while the query is mounted and the page is active

But, this breaks down when:

1. Query mounts, fetches data. Data will be usable for 5 total minutes.
2. Query unmounts, which cancels the refetchInterval.
3. 4 minutes elapses....
4. Query mounts again, restart the refetchInterval.
5. 1 more minute elapses. Data becomes stale/unusable.
6. User attempts to use stale data. :(

I was able to implement it like this, but the use of queryClient.invalidateQueries seem bulky and a lot of work.

const TTL = 5 * 60 * 1000  // 5 minutes

const queryClient = useQueryClient()
const myQuery = useQuery("my query", fetchData, {
  staleTime: TTL,
})
useEffect(() => {
  if( myQuery.isStale ) {
    queryClient.invalidateQueries('my query')
  }
}, [myQuery.isStale, queryClient])

Is there a better way to set up immediate refetching of stale data?

[TkDodo]

I think an effect that listens to query.isStale is a good approach, as observers are also informed about queries getting stale. To trim down the code a bit, you can use the refetch function returned from useQuery:

const myQuery = useQuery("my query", fetchData, {
  staleTime: TTL,
})
useEffect(() => {
  if( myQuery.isStale ) {
    myQuery.refetch()
  }
}, [myQuery.isStale, myQuery.refetch])

not a super good improvement though, but hidden in a custom hook I think it's not a bad pattern at all.

[ryanoglesby08]

Thanks @TkDodo! I suppose one consequence of this approach is that now the query will be refetched even when the window loses focus or the network is disconnected.

[TkDodo]

Only if the query is stale, which is what you want. Fresh queries will not be refetched…

[ryanoglesby08]

Thanks for the help @TkDodo! And your blog posts are great btw!