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