How to deal with staleTime, setQueryData and updatedAt

[Pumkko]

I am trying to write a code that fetches some data with a staleTime of 5 seconds. If the component mounts and finds data that are more than 5 seconds old, a refetch is triggered. I am able to achieve that without a problem with the following code :

  const { data: planets } = useQuery<Planet[]>(["starWars", "Planets"], {
    queryFn: async () => {
      const response = await fetch("https://swapi.dev/api/planets");
      const d = await response.json();
      return d.results;
    },    
    staleTime: 5000
  })

Then i created a mutation to optimistically add a planet

const { mutate: addPlanetMutation } = useMutation(["starWars", "addPlanets"], {
    mutationFn: (payload: Planet) => {
      return Promise.resolve<Planet>(payload)
    },
    onMutate: (payload) => {
      queryClient.setQueryData<Planet[]>(["starWars", "Planets"], (old) =>
        [...(old ?? []), payload],
      )
    },
  })

The problem here is that setQueryData seems to extend the lifetime of the data. When the component mounts a refetch might not be triggered if addPlanetMutation has been called less than 5 seconds ago, even if the initial fetch happened a long time ago.

I was able to work around the problem by doing this when mutating :

    onMutate: (payload) => {
      const queryClientCache = queryClient.getQueryCache();
      const planetsCache = queryClientCache .find(["starWars","Planets"]);
      queryClient.setQueryData<Planet[]>(["starWars", "Planets"], (old) =>
        [...(old ?? []), payload], {
          updatedAt: planetsCache?.state.dataUpdatedAt
        }
      )
    },

By accessing the timestamp at which the last refetch was ran, i am able to achieve what i want, but is there a better way ?
all i want is when my component mounts, fetch some data and if the last refetch happened later than X milliseconds old, refetch otherwise don't do any HTTP Request use the cache.
I don't want anything be it setQueryData or else alter this behavior.

PS : I found this while working on a POC for my company, the code can be found here : https://github.com/Pumkko/PocReactQueryForKim

[TkDodo]

The problem here is that setQueryData seems to extend the lifetime of the data.

Two ways to address this:

1. as you've said, you can pass updatedAt as options to setQueryData. It defaults to Date.now() because we assume that data that you write to the cache is from "now" at the time of writing. Using dataUpdatedAt from what is currently in the cache seems good.

2. Usually, with optimistic updates, you'd just invalidate in onSettled. That makes sure that no matter what, at the end of your mutation, your entry is refetched from the server if it is currently used or marked as stale if it's unused so that it will be refetched when you mount it the next time.

[sowizz]

I'm trying to do something similar. I've got a Clock component which displays server time. I want to "re-sync" every 5 minutes and in mean time I'm adding one second every second (I know that setInterval is not reliable, but it's good enough in this case) by calling the setQueryData function. I'm setting the updatedAt field, but my query won't refetch. Any idea what I'm doing wrong?

const getControllerDateTime = async () => {
  const response = await http.get(API_ROUTES.dateTime)
  return dayjs(response.data.datetime)
}

const Clock = () => {
  const queryClient = useQueryClient()

  const {
    data: dateTime,
    isLoading,
    isSuccess,
  } = useQuery({
    queryKey: ['controllerDateTime'],
    queryFn: getControllerDateTime,
    staleTime: 5000,
    refetchInterval: 5000,
    refetchIntervalInBackground: true,
  })

  useEffect(() => {
    let intervalId = null
    if (isSuccess) {
      intervalId = setInterval(() => {
        const cache = queryClient.getQueryCache().find(['controllerDateTime'])

        queryClient.setQueryData(
          ['controllerDateTime'],
          oldDateTime => oldDateTime.add(1, 'second'),
          {
            updatedAt: cache?.state.dataUpdatedAt,
          }
        )
      }, 1000)
    }

    return () => {
      if (intervalId !== null) {
        clearInterval(intervalId)
      }
    }
  }, [queryClient, isSuccess])
  
  return (
    <Text>{dateTime}</Text>
  )
}

I'm using "@tanstack/react-query": "^4.33.0".

[TkDodo]

refetchInterval guarantees that you get new data in that time frame. If you provide new data manually with setQueryData, this will reset the interval.

dataUpdatedAt is a timestamp that we can take to mark data as stale, but that doesn't mean it will be refetched at that time.

I think your interval should likely just count with local state instead of writing to the query cache. It's not what it is meant for :)