How should we handle errors on manual requests?

[DarynHolmes]

Thanks for the library!

I have a question around this example:

import useAxios from 'axios-hooks'

function App() {
  const [{ data: getData, loading: getLoading, error: getError }] = useAxios(
    'https://api.myjson.com/bins/820fc'
  )

  const [
    { data: putData, loading: putLoading, error: putError },
    executePut
  ] = useAxios(
    {
      url: 'https://api.myjson.com/bins/820fc',
      method: 'PUT'
    },
    { manual: true }
  )

  function updateData() {
    executePut({
      data: {
        ...getData,
        updatedAt: new Date().toISOString()
      }
    })
  }

  if (getLoading || putLoading) return <p>Loading...</p>
  if (getError || putError) return <p>Error!</p>

  return (
    <div>
      <button onClick={updateData}>update data</button>
      <pre>{JSON.stringify(putData || getData, null, 2)}</pre>
    </div>
  )
}

If there is an error calling executePut then we could end up with the following error

createError.js:17 Uncaught (in promise) Error: Request failed with status code 500
    at createError (createError.js:17)

This does not show if I use

      data: {
        ...getData,
        updatedAt: new Date().toISOString()
      }
    }).catch(() => {})

I was not expecting an error to be thrown, as the hook sets the error. Is this how I should handle this error, or am I doing something wrong?

[simoneb]

Fair point. It's been requested in #51 that the manual fetch function returns the promise, which makes sense to me because if you do a manual fetch you may also want more control about what happens when the promise resolves/rejects. But this also means that if there's a rejection and you're not interested into it you need to swallow it somehow.

Unfortunately I don't see a solution that can cover both cases. Ideas?

[DarynHolmes]

I thought it might be a deliberate design choice. It can be quite nice to get the actual promise.

I guess you could pass in another option like this:

          url: '/login',
          method: 'POST'
        },
        { 
            manual: true,
            void: true // or returnPromise: false
         }
    )

There is no need to over complicate this for me, at the moment I am using:

const silenceError = (promise) => promise.catch(() => {})
...
...
...
    const login = () => {
      silenceError(postLogin({
        data: {
          username,
          password
        }
      }))
    }

[simoneb]

I guess the additional configuration option is one possible way but it doesn't feel like it deserves so much attention at the current time, I would like to keep things simple. If there's demand for this feature I may reconsider it. Thanks for reporting though!

[DarynHolmes]

I might just do this

const silenceError = (fn) => () => fn().catch(() => {})

    const [{ data, loading, error }, postLogin] = useAxios({
          url: '/login',
          method: 'POST'
        },
        { manual: true }
    )

    const login = silenceError(() => {
      return postLogin({
        data: {
          username,
          password
        }
      })
    })

[DarynHolmes]

Or just catch the promise in a standard way....

Thanks again for the library.