Declarative fetch in React
npm install -S holen// Fetch on mount
<Holen url="api.startup.com/users">
{({data}) => <pre>{JSON.stringify(data, null, 2)}</pre>}
</Holen>
// Lazy fetch
<Holen lazy onResponse={handleResponse} url="api.startup.com/users">
{({fetching, data, fetch, error}) => (
<div>
<button onClick={fetch}>Load Data</button>
<pre>{JSON.stringify(data, null, 2)}</pre>
</div>
)}
</Holen>body any
<Holen
body={JSON.stringify({ message: 'hello' })}
method="POST"
url="api.startup.com/users"
>
{({data}) => <pre>{JSON.stringify(data, null, 2)}</pre>}
</Holen>children function
Children is a function that receives an object as its only argument.
The object contains the following keys:
- fetching:
bool - response:
object - data:
object - error:
object - fetch:
function
<Holen url="api.startup.com/users">
{({data}) => <div>{data.name}</div>}
</Holen>credentials string
headers string
lazy boolean
If true then the component will not perform the fetch on mount.
You must use the fetch named argument in order to initiate the request.
<Holen lazy url="api.startup.com/users">
{({fetching}) => {fetching && <div>Loading</div>}} // renders nothing, fetch was not started
</Holen>method string - default GET
onResponse function
callback called on the response.
const handleResponse = (error, response) => {
if (error || !response.ok) {
panic()
}
cheer()
}
<Holen
lazy
onResponse={handleResponse}
url="api.startup.com/users">
{({ data, fetch }) => (
<div>
<button onClick={fetch}>Load Data</button>
<pre>{JSON.stringify(data, null , 2)}</pre>
</div>
)}
</Holen>transformResponse function - default data => data
The transformResponse prop is a function that can be used to massage the response data. It receives one argument, data, and by default, performs an identity operation, returning the data passed to it.
type string - default json
The body method applied to
the response. One of json, text, blob, arrayBuffer or formData.
url string
url of the request.