Awesome-api-client
The awesome-api-client is a nice wrapper around fetch that makes it easier to work with Api integration.
The reason for writing this module is to avoid dublicate code. I felt that I wrote this kind of code or copying and pasting it all the time everytime I started a new project. So with this module, I hope that you can save some time and do other great stuff without having to write Api integration all the time. :=)
Get Started
Install awesome-api-client
npm install @lindebros/awesome-api-client
How to use it
Just include the client anywhere in your project. Use it in your redux actions, in your node express server, server side as well as the browser side.
import ApiClient from '@lindebros/awesome-api-client'
const someFunction = async () => {
const response = await ApiClient.get('https://api', {
authToken: 'someToken'
})
if (response.isOk) {
// do something awesome here...
}
}
Available methods:
GET
ApiClient.get(url, {
headers: {object} custom headers,
authToken: {string} token that will be set as a propertry of headers object (Authentication: bearer {token})
})
POST
ApiClient.post({string} url, {object} body, {object} options = {
headers: {object} custom headers,
authToken: {string} token that will be set as a propertry of headers object (Authentication: bearer {token})
})
PUT
ApiClient.put({string} url, {object} body, {object} options = {
headers: {object} custom headers,
authToken: {string} token that will be set as a propertry of headers object (Authentication: bearer {token})
})
PATCH
ApiClient.patch({string} url, {object} body, {object} options = {
headers: {object} custom headers,
authToken: {string} token that will be set as a propertry of headers object (Authentication: bearer {token})
})
DELETE
ApiClient.delete(url, {
headers: {object} custom headers,
authToken: {string} token that will be set as a propertry of headers object (Authentication: bearer {token})
})
UPLOAD
Sends a file upload request.
ApiClient.delete(url, file, {
headers: {object} custom headers,
authToken: {string} token that will be set as a propertry of headers object (Authentication: bearer {token})
})
CALL
All methods above are shortcuts of the call
function.
If none of the methods above suits your needs, you can use the call
function to make a request to your API.
ApiClient.call({object} options = {
url: {string} the url to the endpoint of your api,
method: {string} the rest method to use,
headers: {object} headers to send in the request,
body = {object} the body of your request,
fetchOptions = {object} options of the fetch function (isomorphic-fetch)
})
Mocking the api-client when unittesting
This client is great when writing unittests in for instance jest
. When you write API integration unittests, just mock this module using jest.mock
.
Here's an example of how a unittests can look like.
Lets say that getBooks
are using the get
method of the ApiClient
, then just let jest mock the get method and fake a response from it:
import ApiClient from '@lindebros/awesome-api-client'
import getBooks from 'getBooks'
jest.mock('@lindebros/awesome-api-client')
test('this code is actually never making a request', () => {
ApiClient.get = jest.fn(() => ({
isOk: 400,
error: {
'message': 'this is a really bad request',
}
}))
getBooks()
expect(ApiClient.get.mock.calls[0][0]).toEqual('https://someapiurl')
})
Unittesting a React Redux Action:
The action:
const ERROR = 'Some error event action'
const myErrorAction = createAction(ERROR)
export const MyAwesomeAction = (params) => async (dispatch) => {
const response = await ApiClient.post('https://myUrl', params)
if (!response.isOk) {
// do som great error handling here
dispatch(myErrorAction(response.data))
}
}
The unittest:
const mockDispatcher = jest.fn()
ApiClient.post = jest.fn(() => ({
isOk: 400,
error: {
'message': 'this is a really bad request',
}
}))
const fn = MyAwesomeAction({ a: 'b'})
fn(mockDispatcher)
expect(ApiClient.post.mock.calls.[0]).toEqual({
type: 'Some error event action',
payload: 'this is a really bad request',
})