Does the devtools appropriately indicate query state?

[ohansemmanuel]

The What

Hey! I wasn't sure under what category to file this, but consider the following:

const query = useQuery(
    "some-user-id",
    () => fetchProfileDetails("some-user-id"),
    {
      enabled: false,
      staleTime: Infinity,
    }
  );

Please note the staleTime passed i.e Infinity

However, on inspecting the devtools, you get the following representation:

Technically speaking, I reckon isStale's value should follow the definition below:

Will be true if the data in the cache is invalidated or if the data is older than the given staleTime

Essentially, the query with key some-user-id is NOT stale. Or is it? https://github.com/tannerlinsley/react-query/blob/master/src/devtools/utils.ts#L25

If the query has the enabled option as true, you get the right representation i.e the query is considered as fresh

const query = useQuery(
    "some-user-id",
    () => fetchProfileDetails("some-user-id"),
    {
      enabled: true, // 👈🏽 look here 
      staleTime: Infinity,
    }
  );

The Discussion

In my opinion, I believe the mental model (or technical interpretation) for enabled and stale queries should perhaps not be mixed. I guess the bigger question is, "is a disabled query considered stale even on mount"?

It does appear that when a query is "disabled", the cache is invalidated and therefore considered stale. That makes sense.

However, if a query is mounted as "disabled" i.e., the enabled option as false, there's really nothing in the cache to be invalidated. The query should still be considered fresh and not stale. No? A fresh query that's inactive (or a disabled query) seems to fit the description than considering it stale.

In terms of how this may be represented in the devtools, I reckon just dimming out a disabled query is enough to provide visual feedback. Similar to how the query "states" are represented https://github.com/tannerlinsley/react-query/blob/master/src/devtools/devtools.tsx#L511

Conclusion

That turned out longer than I had planned for! Let me know your thoughts and if I've managed to ramble on for too long.

[TkDodo]

I agree that this is a general issue with the devtools - it seems that disabled queries are always displayed as stale. We have the following situation:

• the devtools display one row for each cache entry, because we also allow to inspect the cached data
• the number up front indicates how many observers (instances of useQuery) there are
• enabled is a per-observer setting, so you can have the same query mounted twice, once with enabled: true and once with enabled: false
• in those scenarios, it is not clear which "state" the query is in, because each observer is actually in a different state.

One question that has also come up very often is: Why am I seeing a cache entry for disabled queries at all? And the answer is pretty much the same: because it's a per-observer level, and the cache entry is technically there.

---

One way to make this better would be to flag entries, or even hide them completely, if all observers are disabled. It would potentially clear the confusion for many users. Feel free to Pr that if you want :)

[ohansemmanuel]

Amazing!! I'll take a look later in the coming week, and work on issuing a PR :)