useDraftDataApi
is a React hook for fetching arbitrary data. It is written using TypeScript and builds upon useDataApi created by rwieruch.
This hook uses axios
for fetching its data, and useDraftReducer
for letting people to override the internal state (se example).
yarn add use-draft-data-api
npm install use-draft-data-api --save
Working example can be foud under
/example
, need to extract it from the main repo though. To run it, just runyarn install
ornpm install
thenyarn start
ornpm start
.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import useDraftDataApi from 'use-draft-data-api';
type Payload = {
readonly data: Readonly<{
id: number;
email: string;
first_name: string;
last_name: string;
avatar: string;
}>;
};
const App = () => {
const [
{
data: { data },
isLoading,
},
doFetch,
] = useDraftDataApi<Payload>(
'https://reqres.in/api/users/2',
{
data: { id: 0, email: '', first_name: '', last_name: '', avatar: '' },
},
(prevState, action) => {
if (action.type === 'FETCH_SUCCESS') {
console.log('test', action.draft);
return {
...action.draft,
data: {
...action.draft.data,
data: { ...action.draft.data.data, avatar: '' },
},
};
}
return action.draft;
}
);
const { id, email, first_name, last_name, avatar } = data;
return (
<div>
{isLoading ? (
'...Loading'
) : (
<>
<p>id: {id}</p>
<p>email: {email}</p>
<p>name: {`${first_name} ${last_name}`}</p>
<img src={avatar} />
</>
)}
</div>
);
};
ReactDOM.render(<App />, document.getElementById('root'));