Fetch

Fetch is a wrapper library around Axios to remove boilerplate code from your components.

Installation

Add this library as dependency to your project, run following command

yarn add @bbijelic/fetch

Example

import React, {Component, Fragment} from 'react'
import Fetch from '@bbijelic/fetch'

class App extends Component {

    render(){
        return <Fetch url="https://jsonplaceholder.typicode.com/post/1/comments">
        {({ isLoading, isError, error, data }) => (
          <Fragment>
            {isLoading && <span>Loading...</span>}
            {isError && <span>Ooops! {error.message}</span>}
            {data && data.map(comment => <div style={{ border: '1px solid lightgray', padding: 5, margin: 10 }}>
              <div><strong>Id: </strong>{comment.id}</div>
              <div><strong>Name: </strong>{comment.name}</div>
              <div><strong>Email: </strong>{comment.email}</div>
              <div><strong>Body: </strong>{comment.body}</div>
            </div>)}
          </Fragment>
        )}
      </Fetch>
    }

};

export default App;

Documentation

Fetch Props

One can pass following props to the Fetch component:

Name	Default Value	Required	Description
url		Yes	To which url to make request
method	get	No	HTTP request method to use
headers	{ "accept" : "application/json", "content-type" : "application/json" }	No	HTTP headers to send
params	{ }	No	HTTP query parameters
logging	false	No	Should Fetch output log about requests to console

State Props

State props are provided to the child components as follows:

Name	Type	Description
isLoading	Boolean	Is request finished
isError	Boolean	Is request finished with an error
error	Object	Axios error instance when error occurs with request.
response	Object	Axios response object
status	Integer	HTTP response status
data	Any	Response data
request	Func	Makes a request with parent Fetch instance. Function parameter can be passed providing Axios options.

License

MIT