Angular - RxJS operator .first() throws type error after upgrade from Http to HttpClient

Question

I've recently upgraded my angular app to use HttpClient instead of Http. After some fixes around handling of headers and params most of my code work, but one specific request alludes me with it's weird behavior.

The request is a bit special as it's a polling request that bails when it gets a payload from the server (it will return a 204 response until it have something to deliver).

I'm using an interval Observable to poll the endpoint once a second for a specific span of time, and when I get a payload I use the .first() operator to handle the data. This worked fine when I used the old Http service. Here's how it looks:

return Observable.interval(this.pollInterval)
  .mergeMap(() => this.http.get(this.apiUrl + '/poll'))
  .first(data => data) // This is where the error occurs in HttpClient
  .map(result => result)
  .timeout(20000)
  .catch(this.errorHandler);

The observable works as should when I use the deprecated Http service, but when I use the HttpClient service I get the following error:

error TS2345: Argument of type '(data: Object) => Object' is not assignable to parameter of type '(value: Object, index: number, source: Observable<Object>) => boolean'. Type 'Object' is not assignable to type 'boolean'.

Now here's where it gets a bit weird, I decided to try to debug the observable stream by adding a .do(console.log) before the .first() operator like thus:

return Observable.interval(this.pollInterval)
  .mergeMap(() => this.http.get(this.apiUrl + '/poll'))
  .do(console.log)
  .first(data => data)
  .map(result => result)
  .timeout(20000)
  .catch(this.errorHandler);

Doing this seemed to solve the problem, no more type assignment errors, and the wanted functionality works as before. I've resorted to use a dummy function that I call in the .do() operator, but I'm not happy with having to do this to resolve the issue, so I want to figure out why this behavior is appearing and what the .do() operator does to make the problem go away.

Looking forward to hear your input on this issue.

Solution I followed the advice of the first answer and used !! to cast the data type to boolean in the .first() return, this removed the type error and removed the need to use the .do() operation as described in the issue.

martin martin · Accepted Answer · 2018-02-01T10:40:49

If do() solves the problem it actually seems like bug in typings for do() with RxJS < 5.5. This operator is meant to do only side-effects and shouldn't alter the chain in any way. So check you RxJS version, maybe this is the issue https://github.com/ReactiveX/RxJS/commit/9a40297.

Anyway the callback for first() requires the following type (http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-first):

function(value: T, index: number, source: Observable<T>): boolean

I think the error tells you exactly what's wrong. You're using first(data => data) so you're not returning a boolean but Object instead.

If I understand what you want to do you need to turn the object to true or false based on whether it exists or not.

.first(data => !!data)

... or maybe not as lame solution:

.first(Boolean)

Another question is whether you even need to use first. It's meant to emit an error if the source Observable completes and there was no matching item or it completed and there were more than one matching item and I think none of these chan happen in your situation. So maybe it would make more sense to use filter(Boolean).

Angular - RxJS operator .first() throws type error after upgrade from Http to HttpClient

1 Answers