Why toPromise is deprecated and Explain other options like firstValueFrom and lastValueFrom methods | toPromise deprecated in RxJS 7 and firstValueFrom and lastValueFrom is something we can use now

toPromise deprecated, yes you heard it right let’s know the reason in detail, but before this let me tell you what is toPromise method and why it is important.

rxjs toPromise method is a method from Rxjs library, It is used to convert an observable to a promise.
The toPromise method subscribes to the observable and returns the last emitted value of that observable.

Let’s Understand toPromise Functionality with the example code

observable$ = new Observable <String> (Observer =>{
  Observer.next("fistValue");
  Observer.next("lastValue");
  Observer.complete();
})

async function emmitValue(){
  const value = await observable$.toPromise();
}

emmitValue();

//******Output is */
lastValue

So in the above code, we are creating an observable that is emitting values one by one, but in the end, it only emits one value whatever the last value is.

Also if you want more understanding of observables and promise you can check out our this blog post

All looks fine right? What is the problem then?

Well, the problem with toPromise is, it cannot handle undefined values properly and that is why topromise deprecated.

Let’s understand what is the issue.

Problem with undefined in toPromise Method

First Problem is when your observable completes without returning the emitted value, for example in our above code the last emitted value which is returning is “lastValue”. so in the case when there is no last emitted value and the observable only executes complete then the output will be undefined.

Example code for Frist Problem

observable$ = new Observable <String> (Observer =>{
  Observer.complete();
})

async function emmitValue(){
  const value = await observable$.toPromise();

}
emmitValue();

//******Output is */
undefined

So in the above code, we are not returning any value, now the observable converting with toPromise returns a value of undefined.

Now the Second Problem is, what if you pass undefined as a value inside the observer.next, So the value we are passing is undefined and the toPromise will also return undefined, so now how we will handle this situation that the value we are getting as undefined is actually a value that is passed by observable or there is no value passed from the observable.

Example code for Second Problem

observable$ = new Observable <String> (Observer =>{
  Observer.next(undefined);
  Observer.complete();
})

async function emmitValue(){
  const value = await observable$.toPromise();

}

emmitValue();

//******Output is */
undefined

This was the main reason to deprecate the toPromise from the Rxjs library.

Alternative To Resolve this toPromise undefined issue or topromise() deprecated replacement

When you convert observable into toPromise you might want to select only the first value or maybe last value. Maybe you don’t want to wait for the observable to complete and you just want the first value whatever it is coming inside the observable.

Now to handle these undefined values, toPromise is deprecated and two other methods were introduced.

firstValueFrom Method

It returns the first value emitted by the observable, subscription will be released immediately after returning the value. It means once the first value occurs the subscription to that observable finish.

Also, it will reject with an Empty Error if the observable is complete with no value or undefined value.

observable$ = new Observable <String> (Observer =>{
  Observer.next("FirstValue");
  Observer.next("SecondValue");
  Observer.complete();
})
async function emmitValue(){
  const value = await firstValueFrom(observable$,{defaultValue:'to replace empty value'})??'to replace undefined'
}
emmitValue();
//******Output is */
"FirstValue"

So now in the above code, we can see that firstValueFrom method takes the observable value and check for empty and undefined value and we can use the default value in case the observable return an empty value and we can use another value after ?? if the value returns undefined.

This way we can handle the empty and undefined values.

lastValueFrom Method

Similarly, lastValueFrom returns the last emitted value and checks for empty values and undefined values. lastValueFrom also stops the subscription once the last value is emitted.

The example code is also similar but the output is different. Output is the last emitted value.

observable$ = new Observable <String> (Observer =>{
  Observer.next("FirstValue");
  Observer.next("SecondValue");
  Observer.complete();
})
async function emmitValue(){
  const value = await lastValueFrom(observable$,{defaultValue:'No Value'})??'Third Value in place of undefined'
}
emmitValue();
//******Output is */
"LastValue"

Now understand the empty value. So in our first problem example code, we were not returning any value and we completed the observable.

observable$ = new Observable <String> (Observer =>{
  Observer.complete();
})

Now the empty value is passing to the firstValueFrom and lastValueFrom, this method will now give the output as undefined.

In the case of these two methods, the output will throw an error.

Error : no element in seqence

So this is how toPromise issue of undefined is resolved by the firstValueFrom and lastValueFrom methods.

If you like this blog please share it with your friends and also comment if you have any doubts or suggestions.