Setting Cached Time Base on a function instead of based on a period

[talpx0]

I've been experimenting with React Query's caching mechanisms but haven't found a straightforward way to implement this dynamic caching strategy based on the current time. Most examples or documentation I've found discuss setting a fixed cache time (e.g., using the staleTime option), but nothing that adjusts based on a function or the current time.

Here's a pseudo-code example of what I'm trying to achieve, inspired by a function I've used outside of React Query context:

export const shouldFetch = async <T>(storageKey: string): Promise<FetchResult<T>> => {
  const cachedDataString = await AsyncStorage.getItem(storageKey);

  if (cachedDataString) {
    const { data, timestamp }: CachedData<T> = JSON.parse(cachedDataString);
    const now = moment();
    const timeToCompare = moment(timestamp);
    return now.isSame(timeToCompare, 'hour') ? {
      result: data,
      refractor: false
    } : {
        result: undefined, 
        refractor: true
      };
  }
  return {
    result: undefined, 
    refractor: true
  };
};

This function checks if the current hour is the same as the hour when the data was last fetched. If it is, it uses the cached data; otherwise, it indicates that a refetch is necessary.

I'm trying to find the best way to integrate this logic with React Query. Would anyone have suggestions or examples on how to dynamically set the cache expiration or refetching criteria based on the current time or a similar function? Any guidance or pointers to resources that could help me implement this functionality would be greatly appreciated.

[TkDodo]

staleTime is determined by when data was last fetched - it's a relative time. If you set it to one hour, It will go stale one hour after data was put in the cache. If you want something else, you'd need to do this in user-land (probably with some state calculations)

[talpx0]

Hi, after I do a lot of research , it looks like staleTime and gcTime does not support dynamic value?
My data updates at 0:00am every day , which is means if a user accesses it at 23:59 , then it's cache time is 1 min, but after 0:00, the gctime should be updated to 24 hours . How can I slove this

[TkDodo]

yes, that's pretty much what I said. It's not supported.

How can I slove this

put staleTime and gcTime values in react state and update that state when you get a response