CODEWITHSUNDEEP
angularrxjs
Sandra Willford
Sandra Willford

Reputation: 3789

rxjs merge: You provided 'undefined' where a stream was expected

I am getting an error You provided 'undefined' where a stream was expected. when I try to merge observbles.

i create my refresh observable here:

refresh$: Observable<Funnel[]>;

then I have a timer...

TimerObservable.create(0, (this.storageService.refRate * 1000))
    .takeWhile(() => this.interval)
    .subscribe(() => {
        this.refresh$ = this.funnelService.getStoryFunnels({}).map(response => [...response]);
    });

and then when I try to merge the observable, the error is produced:

this.funnels$ = this.funnelService.getStoryFunnels({}).pipe(
    merge(this.refresh$, funnelCreation$.pipe(
            filter(funnel => !!funnel),
            map(funnel => [funnel])
        )
    )
);

update based on cozy's answer:

this.refresh$ = TimerObservable.create(0, (this.storageService.refRate * 500))
    .takeWhile(() => this.interval)
    .switchMap(() =>  this.funnelService.getStoryFunnels({}).map(response => [...response]));

and then:

this.funnels$ = this.funnelService.getStoryFunnels({}).pipe(
        merge(this.refresh$, funnelCreation$.pipe(
                filter(funnel => !!funnel),
                map(funnel => [funnel])
            )
        )
    );

Upvotes: 0

Views: 2034

Answers (1)

CozyAzure
CozyAzure

Reputation: 8478

That is because this.funnels$ isn't an observable yet when it was declared (not initiated with any values), because it will only be assigned a value only after the timer is executed. The declaration code however, is executed almost immediately (synchronous). That is why you get an undefined.

What you should do is you can use switchMap and assign your this.refresh$ to it:

this.refresh$ = TimerObservable.create(0, (this.storageService.refRate * 1000))
    .takeWhile(() => this.interval)
    .switchMap(() =>  this.funnelService.getStoryFunnels({}).map(response => [...response]));

Upvotes: 3

Related Questions