Revalidate cache only after a certain fixed duration [Q&A/Feature Request]

[roch-numbered]

Hi,

I'm working on a dashboard where I'm making requests to supabase to get user's infos. I'm saving the list of accounts into LocalStorage and I'd like to revalidate the data only after a certain amount of time AND if the user loads in a new session.

A step by step description of my use case

Saying CACHE_DURATION = 300_000 // 5 * 60 * 1000 = 5 minutes.

1. The user logs in for the first time.
2. A request is made to get accounts, the list is saved into the global cache (and saved into LocalStorage on deconnection).
3. The user stays connected only 2 minutes and reconnects 1 minute later.
4. The CACHE_DURATION delay is not passed, 2nd connection happens 3 minutes after the 1st one, data are pulled from LocalStorage and no network calls are made.
5. User stays connected 8 minutes, data are still used from global cache.
6. User reconnect next day, the cache is expired, a request is made to update global cache + LocalStorage.

My issue

From what I understand of SWR, it's not currently possible to specify a cacheDuration delay that would automatically check if saved data needs to be updated.

The refreshInterval is a half-solution has it's valid only through the session and not across time. Plus it keep fetching even if data are already saved. With the ability to give a function to refreshInterval it would be possible to fetch only one time. But still, it does check across sessions.

The #1708 PR seems to brought a first step to a solution with the updatedAt value.

Possible workaround

From discussion #2013, it seems that I have to handle the expiration manually. Can someone confirm that to me please?

My implementation:

import useSWR, {useSWRConfig, unstable_serialize as serialize} from 'swr'

export const useAccounts = () => {
	const user = useUser()
	const key = user && {name: 'accounts', userId: user.id}

	 // check cache expiration
	const {cache} = useSWRConfig()
	const timestamp = cache.get(serialize(key) + 'timestamp') || 0
	const now = Date.now()
	const revalidate = now - timestamp > CACHE_DURATION
	const options = revalidate ? {} : {revalidateIfStale: false, revalidateOnFocus: false, revalidateOnReconnect: false}

	const {data, error} = useSWR(key, fetcher, {
		...options,
		onSuccess(_, key) {
			// save timestamp of request success
			cache.set(key + 'timestamp', Date.now())
		}
	})

	return {
		accounts: data,
		isLoading: !error && !data,
		isError: error,
	}
}

Feature Request

As SWR is already handling cache and revalidation, would it be possible to handle the expiration mechanism directly inside the library?