Holen

Declarative fetch in React

• Install
• Basic Usage

Install

npm install -S holen

Basic Usage

// 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>

Props

body any

<Holen
  body={JSON.stringify({ message: 'hello' })}
  method="POST"
  url="api.startup.com/users"
>
  {({data}) => <pre>{JSON.stringify(data, null, 2)}</pre>}
</Holen>

MDN - Body

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

MDN - Credentials

headers string

MDN - Headers

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

MDN - Method

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

Fetch method applied to the response. One of json, text, or blob.

url string

url of the request.