rxjs-ajax-wrapper v2.0.0

rxjs-ajax-wrapper

Disclaimer: Uses RxJS v6, for RxJS v5 compatible wrapper, please check v0.1.38.

Simple to use and simple to setup wrapper for rxjs. Allows you to define your distant resources api and call them on the fly, while having set custom middlewares beforehand !

How to use

Step 1: Define your api routes.

const apiDefs = {
  getAllFilms: {
    url: 'https://ghibliapi.herokuapp.com/films',
    method: 'GET',
    responseType: 'json',
  },
  getSingleFilm: {
    url: 'https://ghibliapi.herokuapp.com/films/:filmID',
    method: 'GET',
    responseType: 'json',
  },
  postFilm: {
    url: 'https://ghibliapi.herokuapp.com/films',
    method: 'POST',
    responseType: 'json',
  },
};

You can check all the available request params here

Step 2: Initialize the wrapper

import { RxjsWrapper } from 'rxjs-ajax-wrapper';

const api = new RxjsWrapper(apiDefs);

Step 3: Call the routes

api.routes.getAllFilms(params)

Parameters

When calling a route, 3 different parameters can be added to the request:

params: Object -> Will replace the :someParam, in the request definition with the desired parameters. query: Object -> Will append some query parameters to the request. body: * -> The body of the request.

Example

api.routes.getSingleFilm({
  params: {
    filmID: 2,
  },
  body,
  query: {
    lim: 3,
  }  
})

Return value

Return an Observable. Checkout https://github.com/Reactive-Extensions/RxJS-DOM/blob/master/doc/operators/ajax.md for more details.

Library functions

CombineWrappers

CombineWrappers will return an object like this:

{
  resources: {
    auth,
    film,
  }
  addErrorMiddlewares, // See Methods
  addRequestMiddlewares, // See Methods
}

It is then possible to add an error/request middleware after the creation of the Wrapper (ex: when having logged-in etc ...).

Example

Here is an example using redux-observable library. We're adding the token as middleware to our requests, as well as error middlewares for handling the token validity and unauthorized errors.

import { CombineWrappers } from 'rxjs-ajax-wrapper';

import exampleApi from 'exampleApi';
import anotherApi from 'anotherApi';

const appApi = new CombineWrappers({
  example: exampleApi;
  another: anotherApi;
});

appApi.addRequestMiddlewares([
  {
    name: 'token',
    handler: () => ({ headers: { Authorization: 'sometoken' } }),
  }
]);
api.addErrorMiddlewares([
  {
    name: 'tokenExpired',
    handler: (req, extras) => {
      if (req.status === 401 && checkObj(req, ['response', 'code']) === 'token_expired') {
        store.dispatch({ type: 'ADD_TO_REFRESH_QUEUE', values: extras });
        store.dispatch(
          refreshToken({
            values: {
              refresh_token: store.getState().auth.refreshToken,
              access_token: store.getState().auth.token
            }
           })
        );
      }
     }
  },
  {
    name: 'notAllowed',
    handler: (req, extras) => {
      if (req.status === 401 && checkObj(req, ['response', 'code']) === 'not_allowed') {
        browserHistory.push('/unauthorized');
        }
      }
    }
]);

...

const loginEpic = action$ =>
  action$.pipe(
    ofType('LOGIN_REQUEST'),
    mergeMap(action =>
      race(
        appApi.resources.login.login({body: JSON.stringify(action.payload)}).pipe(
          flatMap(response => {
            return of(loginFulfilled(response.response));
          }),
          catchError(error => of(loginRejected(error))),
        ),
        action$.pipe(
          ofType('LOGIN_REQUEST'),
          flatMap(() => of(loginCancelled(action.payload))),
          take(1),
        ),
      )),
  );

export default loginEpic;

RxjsWrapper methods

Ignore middleware on specific route.

Simple, just an set an array ignoreMiddlewares containing the names of the middlewares you wish to ignore. Works for both errorMiddlewares and requestMiddlewares.

Example :

const apiDefs = {
  specialRoute: {
    url: 'https://ghibliapi.herokuapp.com/films',
    method: 'GET',
    responseType: 'json',
    ignoreMiddlewares: [
      '404',
      'tokenMiddleware',
    ]
  },
};