During my experimentation with an AngularFire test environment, I executed a Rx scenario
const merged = Observable.merge(o1, o2)
and observed an observable that emitted twice, each time containing an array resulting from individual queries.
This led me to ponder on how the output is being monitored. If fed into a template using the async pipe {{ results | async }}, the second emission will replace the first one, giving the illusion of only the second set of data being received.
I apologize if you are already aware of this aspect.
If you require a single emission combining both arrays, there exist several methods to achieve it. The most suitable for this situation is using combineLatest().
const combined = Observable.combineLatest(o1, o2)
.map(([s1, s2]) => [...s1, ...s2])
The rationale behind choosing this method lies in the fact that .valueChanges() is intended to continuously push changes without completion. Consequently, approaches utilizing forkJoin() or
Observable.merge(o1.mergeMap(x => x), o2.mergeMap(x => x)).toArray()
both necessitate a completed event to emit any data, whereas combineLatest() does not have this requirement and the combined observable will emit whenever either source is updated.