how to avoid React query calling the same api multiple times on initial render.

[aboveyunhai]

Ver.4.29.19
I have a following scenario where React query calls the same api multiple times upon initial render, is there any way to avoid this problem.
To be specific, is this the expect behavior? or I'm running into some concurrency problems due to my own mistake.

Though both items are using the same key, but because they are almost running in the parallel once the id is ready, get no cache at that moment, it still calls the api twice regardless the key itself.

// Inside item A and item B, there is a such a function that call useQuery based on the 

function useTestQuery (id) => {
   return useQuery(["test", id], apiCallFn)
}

const ItemA = () => {
  const router = useRouter();
  const { id } = router.query;
  useTestQuery(id);
  return <div />
}

const ItemB = () => {
  const router = useRouter();
  const { id } = router.query;
  useTestQuery(id);
  return <div />
}

Scenario A: (not sure how to solve)

//  let's assume A and B are far away from the dom tree, so you know these two items are rendering almost in parallel.
// but they are inside the same page, so the "pid" is the same. 

 <Item_A />

 <Item_B />

Scenario B: (solvable)

// this also causes the api call twice, first one from A, second one from first Item_B, 
// then the rest of the Item_Bs will utilize the cache

 <Item_A>
      { Array({ length: 10 }).map(() => <Item B/>)}
 </Item_A>

// but obviously we can wait for the pid to be ready or pass the data down to the tree
// this will only call api once
<Item_A>
      { id && Array({ length: 10 }).map(() => <Item B id={id}/>)}
 </Item_A>

[aboveyunhai]

It seems like based on this one: #3630
https://stackoverflow.com/questions/72828361/what-are-staletime-and-cachetime-in-react-query
The staleTime will do the trick, but I'm not sure if there is any potential tradeoff or bug it might lead to if I set it to something like 1000ms.

[alxvallejo]

"The staleTime will do the trick"

What does that mean? What are you setting staleTime to to only load the data once on page load?

[aboveyunhai]

"The staleTime will do the trick"

What does that mean? What are you setting staleTime to to only load the data once on page load?

For example when you have itemA and itemB both are calling the same useQuery("unique_id"),
in the following code by default <ItemB /> will fire the same query again as code execute. Assuming the "code execution“ between <ItemA /> and <ItemB /> are 1ms, it's less than that realistically,

<> 
  <ItemA />
  <ItemB />
  // assume it takes 1000ms in between.
  <ItemC />
</>

then staleTime: 1000ms for example will notify ItemB that the data is still "fresh" since 1ms < 1000ms, hence ItemB will take the result from ItemA instead of firing its own api again, hence if ItemC executed after the staletime, meaning data is not "fresh", it will fire the api and refresh the data inside the query. hence resulting in a new api call.

This means a 1s - 2s, even 100ms staleTime will probably collapse the multiple same query api call into single one (if they executed close enough) within the same page unless you have tons of lazy load that blocks the useQuery execution, you can play the time around and benchmark yourself in the network tab. The staleTime is also small that 99.9% of your application logics probably wouldn't care about always getting latest data less than per 1s. If it really matter like stock market price, it might belong to websocket or SSE.

If the code execution (code execution !== rendering) for your app inside the same page took longer than the, there is a bigger question you need to ask yourself.

If you never want to refetch the data once it's done, then Infinity, but it's probably not a good idea in lots of spot, always case by case.

[kalijonn]

Are you sure its running with the same id value? I'm assuming that you're using NextJS where router.query is {} during prefetching. You might be running the queryFn with id as undefined initially and then running it with the actual id. This might look like its running twice.

If that's the problem, you can use the enabled flag to only run the queryFn when id is defined. Something like this:

useQuery(["test", id], apiCallFn, {enabled: !!id})

Also yes, the default staleTime is 0. This means, any subsequent queries after a success are going to fetched again but not while the first promise isn't resolved. (Dominik can correct me if I'm wrong here)

[aboveyunhai]

Yes, I did guard against the invalid query param/input.
I think this is just the default behavior, with staleTime default to 0, Tanstack query will just call the api multiple time upon the initial render if you call it multiple places, any subsequent fetch will be shared obviously, hence only once per fetch after that. This does make sense.
The initial load always feels a little bit counter-intuitive. 😃

[lili21]

You can set refetchOnMount to false.