How to get .catch operator working?

[RavenHursT]

I've added import 'rxjs/add/operator/catch' to the top of my epic file using RxHR.post()

But for some reason I'm still getting .catch is not a function

import {
  SIGN_IN_INIT,
  SIGN_IN_SUCCESS,
  SIGN_IN_FAILURE
} from './sign-in.actions'
import {Observable} from 'rxjs'
import AuthService from '../../../services/authentication.service'
import 'rxjs/add/operator/catch'

const signInEpic = action$ => {
  return action$.ofType(SIGN_IN_INIT)
  .mergeMap(
    action => {
      return AuthService.signIn(
        action.credentials.username,
        action.credentials.password
      )
      .map(response => ({
        type: SIGN_IN_SUCCESS,
        response
      }))
      .catch(error => Observable.of({
        type: SIGN_IN_FAILURE,
        error
      }))
    }
  )
}

export default signInEpic
``

`AuthService.signIn()` is just a function that returns the `baseRequest` from `RxHR.defaults()`

even adding `import 'rxjs/Rx' doesn't work...

Really at a loss as to how to do error handling w/ this?

Any ideas?

[akanass]

First .defaults() doesn’t return an observable so you can not do some actions on it like .map or .catch

Second you must import Observable from rxjs/Observable and this normally isn’t required because all methods return Observable

[RavenHursT]

I'm confused..

This is in the README:

// requests using baseRequest will set the 'x-token' header
const baseRequest = RxHR.defaults({
    headers: {'x-token': 'my-token'}
});

// requests using specialRequest will include the 'x-token' header set in
// baseRequest and will also include the 'special' header
const specialRequest = baseRequest.defaults({
    headers: {special: 'special value'}
});

So one should be able to do something like:

baseRequest.post(...).map(...).catch(...) Right?

In fact, baseRequest.post().map(), w/o the .catch() is working just fine..

I only get the error in the OP when I try to add in error handling via .catch

[akanass]

If you return a function calls .defaults().post() so an Observable it will work.

But why create a new instance of RxHR and not just call a function on it!?

[RavenHursT]

Sorry.. yes.. AuthService.signIn() returns baseRequest.post()..

I'm trying to keep my code DRY.. Don't want to be repeating:

RxHR.post/get/put/etc({
  url: ...
  headers:
  body:
  etc
})

over and over again throughout my code.. not to mention, my app has a lot of the config for how the app talks to services that is resolved through a config layer.

But regardless.. not here to critique the architecture on my app.. just looking for help as to why .catch() specifically would not be working even w/ import 'rxjs/add/operator/catch' included in the file.

I'm starting to think this has something to do w/ #13

Where import 'rxjs/add/operator/catch' is updating a different instance of rxjs/Observable other than that which is being used by RxHR because of how the package is being exported...

[RavenHursT]

I even removed my architecture out of the problem here:

import {
  SIGN_IN_INIT,
  SIGN_IN_SUCCESS,
  SIGN_IN_FAILURE
} from './sign-in.actions'
import {Observable} from 'rxjs'
// import AuthService from '../../../services/authentication.service'
import {RxHR} from '@akanass/rx-http-request'
import 'rxjs/add/operator/catch'

const signInEpic = action$ => {
  return action$.ofType(SIGN_IN_INIT)
  .mergeMap(
    action => {
      return RxHR.post(`https://localhost:3000/api/sign-in`, {
        json: true,
        resolveWithFullResponse: true,
        body: {
          username: action.credentials.username,
          password: action.credentials.password
        }
      })
      .map(response => Observable.of({
        type: SIGN_IN_SUCCESS,
        response
      }))
      .catch(error => Observable.of({
        type: SIGN_IN_FAILURE,
        error
      }))
      // return AuthService.signIn(
      //   action.credentials.username,
      //   action.credentials.password
      // )
      // .map(response => Observable.of({
      //   type: SIGN_IN_SUCCESS,
      //   response
      // }))
      // .catch(error => Observable.of({
      //   type: SIGN_IN_FAILURE,
      //   error
      // }))
    }
  )
}

export default signInEpic

And I'm still getting:

[akanass]

Try to change the import of Observable

import { Observable } from ‘rxjs/Observable’;
import ‘rxjs/add/operator/map’;
import ‘rxjs/add/operator/catch’;

[RavenHursT]

Still getting TypeError: _rxHttpRequest.RxHR.post(...).map(...).catch is not a function :-(

[akanass]

I’ll try to publish new version tomorrow but for me I use now lettable operators instead of that you do and all work fine

https://github.com/ReactiveX/rxjs/blob/master/doc/lettable-operators.md

[RavenHursT]

Yup.. I think you're onto something there.. didn't know about the lettable-operators...

But yeah.. looks like somehow, the Observable that RxHR is using, is not the same singleton who's prototype is updated by import 'rxjs/add/operator/*'.

In fact, based on that hunch.. I tried this:

import {
  SIGN_IN_INIT,
  signInSuccess,
  signInFailure
} from './sign-in.actions'
import {RxHR} from '@akanass/rx-http-request'
import {Observable} from 'rxjs/Observable'
import 'rxjs/add/observable/from'
import 'rxjs/add/operator/map'
import 'rxjs/add/operator/mergeMap'
import 'rxjs/add/operator/catch'

const signInEpic = action$ => {
  return action$.ofType(SIGN_IN_INIT)
  .mergeMap(
    action => {
      return Observable.from(RxHR.post(`http://localhost:3000/api/sign-in`, {
        json: true,
        resolveWithFullResponse: true,
        body: {
          username: action.credentials.username,
          password: action.credentials.password
        }
      }))
      .map(signInSuccess)
      .catch(signInFailure)
    }
  )
}

export default signInEpic

And it works!

So yeah.. as long as the observable being chained is the same singleton in the consumer app of RxHR, the import 'rxjs/add/operator/*' prototype updates work just fine.

Hope this helps anyone else who comes along that doesn't want to use rxjs/operators and bloat their client-side bundles. :-)

[akanass]

Lettable operators is the good way to use latest version of rxjs and it’s easy to use if you read the link I gave to you.

Your solution works but it’s not ideal to do like this that’s why I will create new version tomorrow because the problem is the bundle with webpack and like you explained in a previous issue, you use the browser version bundled in your package that’s why you lost the scope of Observable

[RavenHursT]

Yeah.. I read the link... looks promising, but there's this line in the lettable-operators:

NOTE: Using rxjs/operators without making changes to your build process can result in larger bundles. See Known Issues section below.

Really don't wanna muddle w/ my build config today.. I'll give it a go later this week...

Thanks for all the help @njl07 👍

[RavenHursT]

Well.. now I can't get the .catch() function to get called when I return 401 from the api I'm hitting.. ugh..

So I went ahead and tried switching to lettable-operators, thinking maybe that would resolve it..

But it's now complaining that .pipe() isn't a function on Observable, even those the docs on RxJS say so:

There is a pipe method built into Observable now at Observable.prototype.pipe that сan be used to compose the operators in similar manner to what you're used to with dot-chaining (shown below).

import {
  SIGN_IN_INIT,
  signInSuccess,
  signInFailure
} from './sign-in.actions'
import AuthService from '../../../services/authentication.service'
import {Observable} from 'rxjs/Observable'
import {
  map,
  mergeMap,
  catchError
} from 'rxjs/operators'

const signInEpic = action$ => {
  return action$.ofType(SIGN_IN_INIT)
  .pipe(
    mergeMap(action => {
      return AuthService.signIn(
        action.credentials.username,
        action.credentials.password
      ).pipe(
        catchError(signInFailure),
        map(signInSuccess)
      )
    })
  )
}

export default signInEpic

What's odd is that the action$.ofType() observable has .pipe() just fine.. just not the Observable coming from RxHR. :-(