Dynamically Update staleTime After Query Data is Fetched

[Cihatata]

Currently, the staleTime option in useQuery is determined when the query is initially created and cannot be modified later. However, there are scenarios where the optimal staleTime depends on the response from the query itself (for example, when the API provides a recommended caching duration).

It would be highly beneficial if staleTime could be updated dynamically based on the data returned from the query.

Current Behavior:

• staleTime is set once at query creation and remains static.

Desired Behavior:

• Allow developers to set or update staleTime dynamically, after data is successfully fetched.

Possible Solutions:

• Accept a function for staleTime that receives the latest data and returns a numeric value:

useQuery({
  queryKey: ['my-query'],
  queryFn: fetchMyData,
  staleTime: (data) => data.timeout
})

Why This Feature Is Needed:
In my use case, files fetched from an API become invalid after a certain period, and the API explicitly provides a timeout value indicating when the data becomes stale. Being able to directly use this timeout value as staleTime would simplify caching logic significantly, ensuring optimal and accurate cache handling without manual invalidation or additional logic.

Is there a best practice for this problem?

[TkDodo]

staleTime can already be a function that receives the latest query, so you can build this already.

[Cihatata]

thank you, I didn't know that

[c0per]

I couldn't find a .data field on Query type. There's only a promise to the data, but staleTime function can not be async, the return type must be number.

I came up with a workaround:

const qc = useQueryClient();

useQuery({
  staleTime: ({ queryKey }) => {
    const data = qc.getQueryData(queryKey);
    // ...
    return staleTime;
  }
});

[TkDodo]

query.state.data

[recurvevedder]

query.state.data

If I have a function for a dynamic stale time that I want to reuse because many queries have the same need; how do I make typescript happy about the 4th type parameter of Query? Note: I am using Vue (@tanstack/vue-query).

No typescript version of what I am doing:

function figureOutStaleTime( query ) {
   const d = query.state.data;
   ...
   return staleTime;
}

useQuery({
  ...
  staleTime: figureOutStaleTime,
 });

When I do this in typescript, I need to type the query parameter of my function. I've tried typing query in many, many, ways, and I always get errors on the query key type. I've tried something like:

function figureOutStaleTime<T>(query<T, Error, T, QueryKey){
   ...
 }
 
 useQuery({
   staleTime: figureOutStaleTime<MyReturnType>,
   });

But that doesn't work. I've tried making my actual query key a const, typing that, passing that in as another type param in place of QueryKey, I've tried making my query key's type extend QueryKey, etc. but I'm at a loss as to what to actually do here.

Of course, I'd also be happy to be told there's a better way of doing this entirely as well. =)

[TkDodo]

function figureOutStaleTime<T, TQueryKey extends QueryKey = QueryKey>(query<T, Error, T, TQueryKey){

or just use any. Ideally you’d add all 4 type parameters but that’s up to you:

function figureOutStaleTime<TQueryFnData, TError = DefaultError, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(query<TQueryFnData, TError, TData, TQueryKey){