Multiple requests being made for the same query

[cmacdonnacha]

Hey, I am using the same query in 3 components. When I load my app, all 3 components use useQuery to fetch some details from an API. However, even though these 3 components are loaded at the same time, I'm seeing 3 separate GET requests being sent. I was under the impression that useQuery would only make 1 GET request in this case and return the cached data to the other 2 components?

[TkDodo]

if the 3 components mount in the same render cycle, yes, there should only be one request. Do you have some code you could share?

[cmacdonnacha]

Ah ok that must be it then, I need to figure out why they are appearing in a different render cycle. Thanks for pointing me towards that. If by intention the components are rendering in different cycles, what would the solution be in that case when you only want to fetch the data once and once only? Perhaps setting staleTime to Infinity?

[TkDodo]

For setting data once, Infinity staleTime is okay. The correct time depends on your use case. I’ve written about that here: https://tkdodo.eu/blog/react-query-as-a-state-manager

[cmacdonnacha]

Great, I'll give that a read 👍

[cmacdonnacha]

Setting refetchOnMount: false might actually suit my use case a bit better. Great article!