Api Definition

The generated scaffolding can be quickly used make calls to external APIs meaning another endpoint either within your system developed by another team or a public endpoint of 3rd party provider e.g. hotels.com etc...

The backend (and frontend) uses the axios library as the HTTP Client.

It is on purpose left as a thin wrapper implementation so that the user can extend with additional parameters on top of the mandated ones; url, method - e.g. a header for authentication. As such it only returns an unopinionated axios Instance and not a method initialized implementation. the method parameter is mainly used as a type guard.

Sample implementation of an entire API can be found in the ../src/state/ducks/get-menus, this demonstrates how to setup a saga to fetch a specific business endpoint.

export const fetchMenus = () =>
    action(GetMenuActionTypes.FETCH_POSTS, [], {
        method: "get" as Method,
        route: "/menu", // Todo: Point to deployed example API
    })

The specific saga implementation is ../src/state/ducks/get-menus/saga

import {all, call, fork, put, takeEvery} from "redux-saga/effects"
import {
    MetaActionWithAPI,
    GetMenuActionTypes,
    MenuItem,
} from "../../../interfaces/sagas.interface"
import apiCaller from "../../../services/apiCaller"
import {fetchMenusError, fetchMenusSuccess} from "./actions"

function* handleFetch(action: MetaActionWithAPI): Generator {
    try {
        // eslint-disable-next-line
        const res: MenuItem[] | any = yield call(
            apiCaller,
            action.meta.method,
            action.meta.route,
        )
        yield put(fetchMenusSuccess(res))
    } catch (err) {
        if (err instanceof Error) {
            console.error(err)
            yield put(fetchMenusError(err.message))
        } else {
            yield put(fetchMenusError("An unknown error occurred."))
        }
    }
}

function* watchFetchRequest(): Generator {
    yield takeEvery(GetMenuActionTypes.FETCH_POSTS, handleFetch)
}

export default function* postSaga() {
    yield all([fork(watchFetchRequest)])
}

Feel free to modify the example code for your own API endpoints!