Using refreshInterval and staleTime can cause refresh to only occur after refetchInterval + staleTime

[nramovs-sr]

Describe the bug

It looks like when useQuery reuses a cached query, refetchInterval starts at current time instead of time of last update. This means that actual refresh interval depends on end-user action - how they navigate the page.

Your minimal, reproducible example

https://codesandbox.io/p/sandbox/spring-pine-jm4py8

Steps to reproduce

1. Wait until "Data age" reaches 5 seconds
2. Click "2", which changes the queryKey
3. Within 5 seconds (before first query expires) click "1", which changes queryKey back to original
4. Data age will now reach age of between 15 and 20 seconds

Expected behavior

Because I set refreshInterval to 10 seconds, I expect query will be refreshed 10 seconds after previous execution, regardless if end user navigates the page and at some point gets cached query.

Using code like
let result = useQuery({ queryKey: [someParam], queryFn: () => { return {}; }, refetchInterval: 10000, staleTime: 10000, });

it doesn't make sense that this queryFn will refresh somewhere between 10 and 20 seconds, depending on end-user behavior.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

codesandbox.io

Tanstack Query adapter

react-query

TanStack Query version

5.51.1

TypeScript version

No response

Additional context

No response

[TkDodo]

Because I set refreshInterval to 10 seconds, I expect query will be refreshed 10 seconds after previous execution, regardless if end user navigates the page and at some point gets cached query.

this isn't true when a query key change is involved, because a key change moves the observer to a different Query (that knows nothing about the previous Query). So when you switch back, the timer correctly resets.

[csantos-nydig]

@TkDodo here is a quick and dirty example: https://codesandbox.io/p/sandbox/elegant-cdn-5hhvhh

const useDataQuery = (props) => {
  return useSuspenseQuery({
    queryFn: () => {
      return { a: 1, b: 2, c: 3 };
    },
    queryKey: ["test"],
    ...props,
  });
};

const ComponentOne = () => {
  const { data } = useDataQuery();

  return <div>ComponentOne {JSON.stringify(data)} </div>;
};

const ComponentTwo = () => {
  const { data } = useDataQuery({
    enabled: false,
    select: (data) => {
      console.log("inside Component2 select method");
      return data.a + data.b;
    },
  });

  return <div>ComponentTwo {JSON.stringify(data)} </div>;
};

The query in ComponentTwo is forever enabled: false, yet the select method is executed and data is returned.

I'd expect ComponentTwo data to be undefined for ever until I change enabled to true; but it might be misunderstanding how it's supposed to work?

[TkDodo]

@csantos-nydig what does this have to do with the original issue about refetchInterval ?

But yes, you are misunderstanding how enabled works. When calling useQuery, you are always subscribing to the queryKey. If data changes, your component re-renders. enabled just makes sure that this query is "read-only", meaning it won't trigger any refetches by itself.

[csantos-nydig]

@csantos-nydig what does this have to do with the original issue about refetchInterval ?

NOTHING 😭 I wanted to post this to #1196 instead; sorry about it.

---

UPDATE: Moved this topic to #7855 - sorry about the mess