Bruno Barbosa Bruno Barbosa - 2 months ago 7
Javascript Question

Sagas and fetch promises

I've been banging my head on the desk for the last few minutes here due to this API request...

I have the following code:

Saga:

export function * registerFlow () {
while (true) {
const request = yield take(authTypes.SIGNUP_REQUEST)
console.log('authSaga request', request)
let response = yield call(authApi.register, request.payload)
console.log('authSaga response', response)
if (response.error) {
return yield put({ type: authTypes.SIGNUP_FAILURE, response })
}

yield put({ type: authTypes.SIGNUP_SUCCESS, response })
}
}


API request:

// Inject fetch polyfill if fetch is unsuported
if (!window.fetch) { const fetch = require('whatwg-fetch') }

const authApi = {
register (userData) {
fetch(`http://localhost/api/auth/local/register`, {
method : 'POST',
headers : {
'Accept' : 'application/json',
'Content-Type' : 'application/json'
},
body : JSON.stringify({
name : userData.name,
email : userData.email,
password : userData.password
})
})
.then(statusHelper)
.then(response => response.json())
.catch(error => error)
.then(data => data)
}
}

function statusHelper (response) {
if (response.status >= 200 && response.status < 300) {
return Promise.resolve(response)
} else {
return Promise.reject(new Error(response.statusText))
}
}

export default authApi


The API request does return a valid object however the return from the Saga call always is undefined. Can anyone guide me to where I am wrong?

Thanks in advance!

Best Regards,

Bruno

Answer

You forgot to return the promises from your function. Make it

const authApi = {
  register (userData) {
    return fetch(`http://localhost/api/auth/local/register`, {
//  ^^^^^^
      method  : 'POST',
      headers : {
        'Accept'        : 'application/json',
        'Content-Type'  : 'application/json'
      },
      body    : JSON.stringify({
        name      : userData.name,
        email     : userData.email,
        password  : userData.password
      })
    })
    .then(statusHelper)
    .then(response => response.json());
  }
};
Comments