Custom hook for fetching data from an API.
- Caching – if passed the same API with the same params, cached response will return.
- Three states –
loading
,success
anderror
. - Refetch – if
error
is returned, you possibly would want to send same request. - Automatic retries – specify a number of request retries to do in
error
case.
const [data, error, status, refetch] = useAPI(api, retries)
if (status === 'loading') {
return <span className="loader" />
}
if (status === 'success') {
return (
<ol>
{data instanceof Array ? (
data.map(el => <li key={el[field]}>{el[field]}</li>)
) : (
<li key={data.field}>{data[field]}</li>
)}
</ol>
)
}
if (status === 'error') {
return (
<div className="App__error">
<p>Oops! Something went wrong:</p>
<p>{error.message}</p>
<button type="button" onClick={refetch}>
Retry
</button>
</div>
)
}