1.9.0 • Published 2 years ago
@tdcerhverv/api-connector v1.9.0
API utils for a React world 🚀
Installation
npm i @tdcerhverv/api-connectorLooking for docs to version 0.x
Getting started
First off, a request object has to follow this format
| Name | Type | Default value | Description |
|---|---|---|---|
| endpoint | string | required | Endpoint, fx: /bc/matrix/discountmatrix |
| host | string | null | API host, fx: https://odinapi.tdc.dk |
| method | string | GET | Method (GET, POST, PUT, DELETE) |
| headers | object | {} | Object with headers |
| params | object | {} | Object with query parameters |
| mode | string | 'cors' | Set the mode for CORS, see specification. * |
| body | object | string | null | Object or string with body (obj will be stringified) |
| timeout | number | 10 | Seconds before timing out the request |
| mockResult | any | null | Mock a result (OBS: Request won't be called with this on) |
| mockError | any | null | Mock an error (OBS: Request won't be called with this on) |
| mockDelay | number | 0 | Delay any mock with x ms |
| cacheBust | bool | false | Appends a query parameter with timestamp: ?_=14301301031 |
| cacheKey | string | null | Cache the result in memory for a unique key |
| onError | function | null | Error handler (request, error) => useful for global error handling |
| onCacheSave | function | null | A handler called with (request, result) => for you to save |
| onCacheLoad | function | null | A handler with (request) => return any value as the response |
| clean | bool | false | If true, no defaults will be included |
| retryAttempts | number | 0 | Number of times it should retry, before throwing the error |
* = credentials will be include if mode is cors or same-origin
In case you don't want to write host or some headers each time, you can set up some defaults.
// Somewhere in index.js or App.js fx
import { setRequestDefaults } from '@tdcerhverv/api-connector';
setRequestDefaults({
host: 'https://odinapi.tdc.dk',
headers: {
'Content-Type': 'application/json; charset=utf-8',
},
});Use with hooks: useRequest
The simplest way to "hook" this up 🥁, is with the useRequest hook.
useRequest: (requestFunc, deps?) => result
requestFunc: () => Promise A function that returns a request promise. () => request({...})
deps?: any[] An array of values that when one of those values change, the requests will get called again.
response error, responseBody, loading, rawResponse The result from the request
import { useRequest, request } from '@tdcerhverv/api-connector';
export default function SomeComp() {
const [error, response, loading, rawResponse] = useRequest(() =>
request({
endpoint: '/bc/p/discountmatrix',
})
);
// render stuff!
}Examples Hooks
Programatically request
import { request } from '@tdcerhverv/api-connector';
request({
endpoint: '/bc/p/discountmatrix',
}).then((response) => {
console.log(response);
});
// Using async/await 💪
const [err, response] = await request({
endpoint: '/bc/p/discountmatrix',
method: 'POST',
});