How can I avoid doing a refetch of an stale, but active query?

[julionav]

Lets say I have a component A that uses a query (wrapped in a custom hook that we will call useUser). Since I have the default config of staleTime set to 0, this query is stale as soon as it mounts.

Now, component A renders down the tree a bit further another component (component B) that needs the same data, so I use the same custom hook useUser here. This component is not mounted immediately after component A mounts, but is mounted after an user action.

Now, since the query from component A is stale, when component B mounts, the query refeches. This is my current problem. I don't want useUser to trigger a refetch when component B mounts as long as component A is still active.

A solution for this may be to play with the staleTime option, but I want to keep this to 0 since it allows me to always have up-to-date date when I change a route without the need of invalidating any query in another route. (I have a personal rule of only caring to invalidate currently active queries to have them refetch).

Another solution is just set refetchOnMount: false in component B, but I want this behavior to be the default. Also, there is a possible situation in which I mount component B without mounting component A, and since refetchOnMount is false, the query may not trigger (unless it is the first time the query appears).

So, basically what I want is a refetchOnMount that can be set to stale_and_inactive. I only want to do a refetch on mount when a query is both stale and inactive (or not in the cache).

Is there a way to do this? It actually feels like a bug to me. react-query is a state manager for server side data, but that ability is reduced if I cannot use the same query in several components without triggering a HTTP request.

P.D: this is a more elaborated discussion from our discussion on twitter @TkDodo (btw, huge thanks for the support there!)

[iamjohnlong]

I'm trying to wrap my head around this too.

Here is an example https://codesandbox.io/s/wizardly-leakey-cybh5?file=/src/index.js

There are two fetch requests made. I would assume that there should be 5 request made but there are 2?. What would be a good approach to insuring only one request is made? Setting the global staleTime to something like a second?

[TkDodo]

I would assume that there should be 5 request made but there are 2

2 is correct here. react-query de-duplictes requests that happen in the same render cycle. So if you render two siblings, or even one parent and then further down the tree a grand-grand child and they all use the same query, there will be one request.

in your case, you have dependent renders, so the children only render if there is data already. it flows like this:

• first render, Example1 is rendered. it shows the loading spinner and doesn't render it's children
• second render:
  • Example 1 gets data and starts rendering it's children (Example2)
  • Example 2 mounts, gets data from the cache and triggers a background refetch because refetchOnMount is true and the data is stale (staleTime: 0)
  • Example2 has data from the cache, renders it's children (Example 3)
  • Example 3triggers background refetch, same reason as above
  • Example 4 and last do the same, the isMounted && has no implication because it's true.

all the renderings of Example2 until Example last happen in the same render cycle, so they trigger "the same" background refetch, so react-query dedupes it to one request (the second one you see)

---

if you want only one request, yes, setting a small staleTime is the best approach imo. You can also turn off refetchOnMount but I think it's generally a good feature and you'd still probably want that if one component mounts 15 minutes after the first, because the data is now very old

[iamjohnlong]

👀

That clears things up. Thank you for taking the time to explain! 🍻

[Talor-A]

I think I'm having the same problem as you. just to be clear, you want the hook on component A to query as normal, and the hook on component B to be "read-only" from the cache, and never trigger fetches? that's the solution I'm looking for. we perhaps need a hook useQueryConsumer or something similar that reads data under a cache key but does not fetch. I wonder if it's possible to implement as a wrapper around useQuery?

[iamjohnlong]

and never trigger fetches

I think you can achieve this by setting staleTime: Infinity if you don't want to refetch until the app reloads.

I just want the fetch to happen once in the mounting life cycle. I think setting the staleTime to greater than zero is the way to do it.

[TkDodo]

I don't want useUser to trigger a refetch when component B mounts as long as component A is still active.

A solution for this may be to play with the staleTime option, but I want to keep this to 0 since it allows me to always have up-to-date date when I change a route without the need of invalidating any query in another route

I don't really understand the use-case. Either you want data to be up-to-date, or not ;) I don't understand why it matters so much how the refetch was triggered (mounting of a new subscriber, window refocus, something else ...). I usually look at it like this:

• react-query decides its time to update the data
• I'm telling react-query: no, I'm good, the data I'm having is still alright
• Or I'm saying: yes, please go ahead with the update

That's what staleTime is doing. Deciding how short lived data is depends on the use-case. A trading app has different requirements than my blog which I update twice a month.

---

looking at your component A and component B example, I'd like to see the components more in isolation. If component B mounts 20 minutes after component A, why would we not want a re-fetch?. On the other hand, if you switch routes back and forth within 10 seconds, why would you want a refetch? So it's not the action that matters so much, it's the timing. At least that's how I'm seeing it :)