Custom React hook for REST network call
MIT License
This is a simple fetch wrapper for http request.
yarn add @mj-studio/http-client
npm install @mj-studio/http-client
GET
, POST
, PUT
, DELETE
, PATCH
: return a tuple that first item is function to create network call promise and second is function to abort network callPut following code in the application entry like index.js
.
All fields are optional.
The default values are following.
setApiDefaultSettings({
headers: {
'Content-Type': 'application/json',
Accept: 'application/json',
},
baseUrl: '',
requestInterceptor: (request) => request,
responseInterceptor: (response) => response,
responseInterceptorAddons: [],
responseCodeWhiteListRange: { minInclude: 200, maxExclude: 300 },
responseCodeWhiteList: [], // number[]
responseCodeBlackList: [], // number[]
serializedNames: {},
});
You can reset to default values.
clearApiDefaultSettings();
In responseInterceptor
, the parameter is body(data) object(or array)in response.
requestInterceptor
and responseInterceptor
also receive Promise
for async tasks.
You must return processed request
and response
in the interceptors!
setApiDefaultSettings({
requestInterceptor: async (request) => {
request.headers.Authorization = AsyncStorage.getItem('accessToken') || '';
return request;
},
responseInterceptor: async (response) => {
await logToServer(response)
return response;
},
});
There are response interceptor addons(currently, only CAMELCASE
).
You can set this addons to setApiDefaultSettings
setApiDefaultSettings({
// response data from server like { my_name: 'mj' } is converted with { myName: 'mj' }
responseInterceptorAddons: [ResponseInterceptorAddOn.CAMELCASE],
});
Use GET
, POST
, PUT
, PATCH
, DELETE
in the library.
this is even not async function or return promise! 😀
Return with ApiResult<your data type>
type FetchVersion = {
androidMinimumVersion: number;
iosMinimumVersion: number;
};
export const fetchVersion = (): ApiResult<FetchVersion> => {
return GET('version/', {
headers: { token: myToken },
body: { bodyData: 1 },
files: [{ key: 'movie', file: { name: 'movie', type: 'video/*', uri: 'video/path' } }],
queryParams: { name: 'queryParamsName' },
});
};