Get remaining stale time for a certain query

[clicktodev]

I searched the docs but I can't find anything that gives me the remaining stale time.
I need this information to to show the user how much time is left for the data to be updated.

[TkDodo]

There might be a misconception what staleTime is doing. Just because staleTime hits zero doesn't mean that the data will be updated. It means the data will be considered as stale, so on the next refetch point (onMount, onReconnect, onWindowFocus), there will be a refetch. This cold be hours after staleTime has passed.

[clicktodev]

I understand now, though could you please consider adding staleTime and RefetchTime in useQuery return value.
I realise that I already know them, but the library doesn't provide a way to access that information programmatically which I believe is very useful, only way to get that information right now is by declaring a seperate object with the query parameters then pass it as the usequery parameters object.
This way I can access staleTime because It's defined outside useQuery.

[TkDodo]

a simple constant would also do, but yes, that would be the way. Not sure how returning it from useQuery would make it accessible outside of useQuery?

[clicktodev]

The last line was about the constant approach which we both agree is a good solution for having the stale time value accessible in multiple locations.
Any reason why useQuery shouldn't return the stale and refetch times? those values don't change so there's no need to worry about the value causing re-renders.
I'm gonna start defining my query options in constants from now on but I don't see a reason why these values shouldn't be returned directly by useQuery, this way I don't have to rely on the constant approach.
I enjoy reading your blog btw, especially the react query posts.

[TkDodo]

we could return all options that you pass into useQuery from useQuery, but I really don't understand the point in doing that. example:

const { data, staleTime } = useQuery(key, fn, { staleTime: 5000 })

the staleTime variable will be 5000 - the same value you pass into the query on the same line. We also don't return things like queryKey or cacheTime. refetchInterval can also be a function, so we'd need to return the result of that function. Whatever we return has to be a primitive, because notifyOnChangeProps might trigger unwanted re-renders otherwise.

Imo, it's just something that adds very little value in comparison to the amount of code we'd have to add. Hope that makes sense.

[clicktodev]

I understand except that I define my queries in separate files as custom hooks. So using the constant approach, I would have to import both the custom hook and the config constant in order to get the staleTime.
I realize importing both is not a huge inconvenience, I would like to get your opinion on this approach and its viability compared to directly returning the value directly from useQuery.
I believe returning the staleTime in useQuery would also make sense if the query's staleTime was modifiable programmatically which I haven't tested yet.