Preventing concurrent queries in v4

[baymac]

Why are there multiple queries with identical keys, and when does this situation arise?

It appears that several components are concurrently utilizing React Query to retrieve data, and they are being re-rendered due to a common state dependency that triggers the query. Is this the likely cause of the issue?

If so, what is the recommended approach for effectively managing React Query when multiple components on a page depend on it?

[TkDodo]

Why are there multiple queries with identical keys, and when does this situation arise?

it cannot, keys have to be unique. if you use the same key, you use the same query. Have a look at the query devtools, they'll tell you what the keys are.

[baymac]

I checked devtools and there are infact multiple queries with the same key. Attaching here the screenshot of devtools for ref.

You can see network-id and base-address query has 50 and 3 queries respectively.

[baymac]

I am sorry for confusion, just learned these figures are actually observers. But I noticed that the underlying promises are still called multiple times like 3-4 times when it should be just called 1 time.

[TkDodo]

with the default staleTime of zero, every mount of a new observer will trigger a background refetch. Customize staleTime to reduce the amount of background refetches.

[baymac]

this suggestion partially helped. Currently network-id query is only called 1 time but base-address keeps getting called multiple times like earlier. Is there any other way this could happen?

[TkDodo]

would need to see a reproduction to say more

[baymac]

@TkDodo I think I figured it out, we had multiple internal calls that contributed to this rather than react query. Thanks for the help. 🙏🏼