useQuery making multiple parallel API calls

[piotrpalek]

Hey! I am using the same useQuery (with the same key) in multiple components. The structure is such that there is a main component which has 2 child components in it. My wrapped useQuery is used in all 3 components.
Now I see that I get multiple API calls for the same endpoint, which seems to originate from the fact that each component calls useQuery and triggers an initial API call.

My question is, does useQuery know that a fetch is already happening and wait for it / cancel the newer fetches that are triggered almost simultaneously (meaning I'm doing something wrong)? Or does it actually trigger multiple fetches and it's working as it's supposed to by design?

[TkDodo]

Now I see that I get multiple API calls for the same endpoint, which seems to originate from the fact that each component calls useQuery and triggers an initial API call.

If they mount at the same time, the fetch should be deduplicated. If they mount one after the other, like component 2 only mounts after component 1 has finished fetching, you will get a background refetch because staleTime defaults to 0. You can increase staleTime to define how "fresh" your resource is.

[piotrpalek]

Ahh ok, seems this is a case of "user error" :) for some reason we've had something like:

useEffect(() => {
    queryClient.setQueryData('queryKey', normalizedData);
}, [normalizedData])

Which was firing constantly, and I guess caused all sorts of issues on initial load. After removing / refactoring this bit things for fine, and there are no parallel queries. Thanks for your answer though! Expanded my understanding of react query a little more :)