0

I am working on a project which began last year, and the developers are not with me. They wrote this code :

import { put, takeLatest, all, call } from 'redux-saga/effects';
import { getUserByUsernameService } from '../../services/userServices';
import 'regenerator-runtime/runtime';

function* fetchUser() {
  const response = yield call(getUserByUsernameService);
  yield put({ type: 'FETCHED_USER', payload: response.data.user });
}

function* actionWatcher() {
  yield takeLatest('FETCHING_USER', fetchUser);
}
export default function* rootSaga() {
  yield all([actionWatcher()]);
}

Code of getUserByUsernameService :

import {
  makeGetRequest,
  makePostRequest,
  makePutRequest,
  makeDeleteRequest,
} from '../utils/reqUtils';

export const getUserByUsernameService = (params) => {
  let headers = {
    "Access-Control-Allow-Origin": "*"
  };
  makeGetRequest('/user', params, headers);
}

Code of makeGetRequest :

import axios from 'axios';
export const makeGetRequest = (endpoint, params = {}, headers) => {
  const options = {
    method: 'GET',
    headers: { ...headers },
    params: params,
    url: endpoint,
  };

  return axiosInstance(options)
    .then((resp) => resp.data)
    .catch((e) => {
      console.log(e);
      throw e;
    });
};

At runtime I get Cannot read property 'data' of undefined corresponding to the code

yield put({ type: 'FETCHED_USER', payload: response.data.user });

So what is wrong ?

pheromix
  • 14,975
  • 22
  • 72
  • 138
  • `const response = yield call(getUserByUsernameService);` has resulted as undefined. Are you able to see any request in network tab of browser console? – Nik Feb 04 '21 at 13:10
  • 1
    yes there is a call to the back-end API , and it has a CORS error – pheromix Feb 04 '21 at 13:17
  • Hence you are not getting any `response`. So try to get the CORS error resolved from BE, it should resolve your issue as well. – Nik Feb 04 '21 at 13:20
  • 1
    why is the header I set `"Access-Control-Allow-Origin": "*"` not considered ? – pheromix Feb 04 '21 at 13:22
  • Or if you are facing this issue only in development mode then you can fix it with locally for development purpose with this, https://stackoverflow.com/questions/3102819/disable-same-origin-policy-in-chrome – Nik Feb 04 '21 at 13:23
  • Does your BE responds with the Access-Control-Allow-Origin: *? Check if its blocked on BE. – Nik Feb 04 '21 at 13:26

2 Answers2

0

The generator yield returns an object that you can iterate using next method.

I think you should use response.next().valute.data.user. I think also as you consume the generator in fetchUser you should not yield the result of the call API method.

function* fetchUser() {
  const response = call(getUserByUsernameService);
  yield put({ type: 'FETCHED_USER', payload: response.next().value.data.user });
}
DDomen
  • 887
  • 1
  • 3
  • 13
  • now I get `response.next is not a function` – pheromix Feb 04 '21 at 13:32
  • Probably your function`getUserByUsernameService` is throwing an error so the result of call is `undefined`. To prevent it you can add a check `if (!response) { /* handle error cases */ }` @pheromix – DDomen Feb 04 '21 at 15:04
0

This is a simple typo — you forgot to return something from your getUserByUsernameService function! You are calling makeGetRequest but not returning the response. You want

return makeGetRequest('/user', params, headers);
Linda Paiste
  • 20,442
  • 2
  • 16
  • 40