Krdytkyu

For a while now I've been looking for a way to make Fetch calls from a React component in a succinct way, while still handling errors and exceptions.

I came up with the below

Fetch helper:

const getHeaders = () => ({ 'Content-Type': 'application/json' })



function handleErrors(response) {

  if (!response.ok) {

    let err = new Error('something went wrong!')

    throw err

  }

  return response

}



function parseJSON(response) {

  if (response.status === 204 || response.status === 205) {

    return null

  }

  return response.json()

}



export const get = (url, returnError = false) => {

  return fetch(url, { headers: getHeaders() })

    .then(handleErrors)

    .then(parseJSON)

    .catch(error => {

      if (returnError) return error

    })

}



export const post = (url, data, returnError = false) => {

  return fetch(url, {

    headers: getHeaders(),

    body: data,  

  })

    .then(handleErrors)

    .then(parseJSON)

    .catch(error => {

      if (returnError) return error

    })

}

Component use case #1 - I just want to know if I got data or not:

import { get } from './fetch-helper'



class UserDetail extends React.Component {

  state = { user: null }



  componentDidMount() {

    get('/api/user')

      .then(res => this.setState({ user: res }))

  }



  render() {

    return (

      <div>

        {this.state.user &&

        <div>

          {user.username}<br />

          {user.email_address}<br />

          {user.phone_number}<br />

        </div>}

      </div>

    )

  }

}

Component use case #2 - I want to handle my errors in my component:

import { post } from './fetch-helper'



class LoginForm extends React.Component {

  state = {

    email: '',

    emailError: null,

    password: '',

    passwordError: null,

  }



  handleSubmit = (e) => {

    e.preventDefault()

    post('/login', {

        email: this.state.email, password: this.state.password

      },

      true // the critical part - passing true to post helper

    ).then(res => {

      if (res.errors) {

        Object.keys(res.errors).forEach(err =>

          this.setState({ [`${err}Error`]: res.errors[err] })

        )

      }

    })

  }



  change = (e) => this.setState({ [e.target.name]: e.target.value })



  render() {

    const { email, emailError, password, passwordError } = this.state

    return (

      <form onSubmit={this.handleSubmit}>

        <input name="email" value={email} onChange={this.change} />

        {emailError && <div>{emailError}</div>}

        <input name="password" value={password} onChange={this.change} />

        {passwordError && <div>{passwordError}</div>}

      </form>

    )

  }

}

The critical part is passing true or false to the get or post helper. I.e, in a component where I just want to either display data or not, the fetch call handles errors itself, but if I pass true to post then I want to get errors back and handle them in the component.

Note: The components are pseudo code, since I have HOCs for inputs and a great deal of additional code for styling, labels, accessibility, etc. The fetch helper code is actual code I'm trying to develop and improve.