with-fetch

HOC for simple data fetching designed for fetch api. If you pass it a request function that is not following the fetch api, the raw response will be returned to the final component in the data prop.

Installation

$ yarn add with-fetch
$ npm install with-fetch

How it works

The component exports two HOC's

• withFetch
• displayWhileLoading

withFetch

This HOC is where the fetching is done. The HOC will fetch, parse and then pass the data to the final component.

Basic Usage

import {withFetch} from 'with-fetch'
import {compose} from 'recompose'
import fetch from 'isomorphic-fetch'

export const MyComopnent = compose(
  withFetch(props => fetch(`http://myResource.com/${props.someResourceId}`))
)(({data, loading, error}) => {
  if (error) {
    return <MyErrorComponent error={error} />
  }

  if (loading) return <MySpinner />

  return <div>{data}</div>
})

displayWhileLoading

This HOC displays a spinner, it comes with a somewhat ugly default spinner but accepts a custom spinner. The HOC is designed to take up 100% space of the wrapper component.

Basic Usage (Combined with withFetch)

import {withFetch, displayWhileLoading} from 'with-fetch'
import {compose} from 'recompose'
import fetch from 'isomorphic-fetch'

const MyCustomSpinner = () => <div>Spinning into places</div>

const enhance = compose(
  withFetch(props => fetch(`http://myResource.com/${props.someResourceId}`)),

  // Your spinner will be displayed until the data is returned

  // ####################################################################
  // If you dont pass any argument, the HOC will render a default spinner
  // ####################################################################
  displayWhileLoading(MyCustomSpinner)
)

const MyComponent = enhance(({data, loading, error}) => {
  // If you dont want this inside your render, move this functionality into a HOC aswell!
  if (error) return <MyErrorComponent error={error} />
  return <div>{data}</div>
})