RXJS sharedReplay does not work when recreating an observable

Question

I'm using RXJS websocket for my application. After logging in data is send from my server to the client and the data is stored in an observable using shareReplay to keep the data when navigating the application.

if(!this.data$ || this.data$Completed) {
    this.data$ = this.dataService.get(this.CTRL, 'list').pipe(
        finalize(() => {
            console.log('finalizing data list');
            this.data$Completed = true;
        }),
        map(data => [....]), // irrelevant
        tap((d) => console.log('data: ', d)),
        shareReplay(1),
        tap((d) => console.log('data 2: ', d)),
    );
}

Console output is as intended

// first subscribe
data:  [{…}]
data 2:  [{…}]
// every other subscribe when resubscribing after navigation / different components
data 2:  [{…}]
data 2:  [{…}]
data 2:  [{…}]
...

When logging off the connection is terminated and the finalize method is triggered. When loggin back in the data is send again, but the shareReplay does not work anymore. I get data only on the first subscribe, but not after navigating and resubscribing.

// logout
finalizing data list

// logging in again
data:  [{…}]
data 2:  [{…}]

I also noticed that the rxjs websocket multiplex in that case sends subscribe commands to the server, so obvisously I subscribe to the websocket subject and not the ReplaySubject.

How do you subscribe (or |async) to your rs ? It's not in the code, and remember that a pipe won't do anything by itself, it's the subscribe that "activate" the whole thing. — Jean-Xavier Raynaud
I subscribe to the observable using async in my html, but I also tried it with a subscribe call in a component, the result is the same. — Fussel

Poul Kruijt Poul Kruijt · Accepted Answer · 2021-02-11T08:30:23

When finalize is called, this means that the source Observable has completed. You cannot restart a completed Observable. The data$ still emits on subscribe, because that's the idea of shareReplay, it just gives you the last emitted value on subscribe, regardless if the source is completed. It will however never get new data.

You will have to recreate your data$ observable when you login again, to get a new and fresh observable.

RXJS sharedReplay does not work when recreating an observable

2 Answers