Double fetch on immediate re-mount

[BRKalow]

Hey! Hoping to get some thoughts on this case and determine if it's something that we would want to handle in react-query core. If we have a component with a query that gets remounted it is possible that two identical fetches can get dispatched, see the sandbox here: https://codesandbox.io/s/charming-snowflake-8zj2i. Notice that the resultArray gets added to twice.

What ends up happening is that the first mount creates a query instance, fires off the query, and immediately that query instance gets destroyed. However, the "fetch" is still in-flight and when it does eventually resolve, the cache will get populated. This is effectively an orphaned query instance. The second mount does the same thing, but as there are no active query instances it fires off another fetch. We could cancel the first fetch, but there's no guarantee that the request hasn't already made it to our service and introduced potential for unnecessary load.

This is a convoluted example, but in our app we have encountered this in a few scenarios. Ideally, we would fix the remounting that is happening, but I think we could make a case for adding some resiliency into react-query itself.

I think it could make sense to handle this "orphan" case, checking if an instance isFetching, and if so letting it finish, before removing it from the instances array.

What do y'all think?