Why does using share block an observable using withLatestFrom? - rxjs

Question

Problem
I have the following operators:
const prepare = (value$: Observable<string>) =>
value$.pipe(
tap((x) => console.log("prepare: ", x)),
share()
);
const performTaskA = (removed$: Observable<string>) =>
removed$.pipe(tap((x) => console.log("taskA: ", x)));
const performTaskB = (removed$: Observable<string>) =>
removed$.pipe(
tap((x) => console.log("taskB 1: ", x)),
withLatestFrom(otherValue$),
tap((x) => console.log("taskB 2: ", x))
);
and I call them like this:
const prepared$ = value$.pipe(prepare);
const taskADone$ = prepared$.pipe(performTaskA);
const taskBDone$ = prepared$.pipe(performTaskB);
merge(taskADone$, taskBDone$).subscribe();
resulting in the following output:
prepare: TEST
taskA: TEST
taskB 1: TEST
Note that taskB 2 has not being logged - it appears the taskBDone observable has stalled at the withLatestFrom(otherValue$) in performTaskB.
If the share in prepare is removed, the observable does not stall, but it (unsurprisingly) results in prepare executing twice, which I do not want.
Questions
How can I execute both performTaskA and performTaskB but prepare only once?
Given the debug explanation below, why does share cause the change in emit sequence?
Demo
With share (as above): https://codesandbox.io/s/so-share-with-latest-from-with-share-rtyex?file=/src/index.ts:663-853
Without share: https://codesandbox.io/s/so-share-with-latest-from-no-share-p702e
Go to Tests tab on right, ensure the Console is visible and click the Play button.
Partial Explanation
Debugging withLatestFrom it is evident that when the source(removed$) emits, ready is false here which prevents emission.
This occurs because when share is present, the input(otherValue$) subscription emits after the source, so ready has not yet being set. (Or is it that share has caused the source to emit earlier?)
But when share is removed, the input subscription emits before the source has, meaning ready is set true via here and here, and therefore withLatestFrom emits as expected.

Answer 1

I tried running your code and I couldn't get it to hang the way yours does. I suspect it's something about how your testing framework manages observables. I can't replicate it.
I did notice that there are some interleaving/ordering issues inherent with what you've written. Sharing synchronous observables comes with issues such as the first observer synchronously observing all the source values and its completion before the second observer can subscribe. This happens even though they should be subscribed "at the same time".
Ordering with the Event Loop
What I've written here works for me:
function init(
value$: Observable<string>,
otherValue$: Observable<string>
) {
const prepare = pipe(
tap(x => console.log("prepare: ", x)),
delay(0),
share()
);
const performTaskA = pipe(
tap(x => console.log("taskA: ", x))
);
const performTaskB = pipe(
tap(x => console.log("taskB 1: ", x)),
withLatestFrom(otherValue$),
tap(x => console.log("taskB 2: ", x))
);
const prepared$ = value$.pipe(prepare);
merge(
prepared$.pipe(performTaskA),
prepared$.pipe(performTaskB)
).subscribe();
}
init(of("a"), of("b"));
For me, this prints this to the console:
prepare: a
taskA: a
taskB 1: a
taskB 2: ["a","b"]
You'll notice a call to delay(0) within prepare. Without that, prepare is called twice since the shared observable has synchronously completed. Delay(0) just puts the next call on the event queue as soon as possible.
That's not the best solution. It's a hack. The best solution depends on how this is used. Most of the time, shareReplay(1) does the job. If you use that here, that will work.
Ordering with Publish/Connect
Otherwise, you can publish and connect to insure the order is what you'd expect.
Publish/Connect lets you set up all your subscriptions to the source before the source is officially started/connected/subscribed to. This ensures that under the hood, all the callbacks and are in place before anything happens. That's the only way to ensure that a fully synchronous observable can share its values.
function init(
value$: Observable<string>,
otherValue$: Observable<string>
) {
const prepare = pipe(
tap(x => console.log("prepare: ", x)),
share()
);
const performTaskA = pipe(
tap(x => console.log("taskA: ", x))
);
const performTaskB = pipe(
tap(x => console.log("taskB 1: ", x)),
withLatestFrom(otherValue$),
tap(x => console.log("taskB 2: ", x))
);
const prepared$ = publish()(value$.pipe(prepare));
merge(
prepared$.pipe(performTaskA),
prepared$.pipe(performTaskB)
).subscribe();
prepared$.connect();
}