CODEWITHSUNDEEP
reactjsfetch-apiredux-saga
Sijan Shrestha
Sijan Shrestha

Reputation: 2266

How to return data using Fetch API to a calling function?

I am experimenting with redux saga, I have an issue trying to fetch data from my API. I changed my API and I am using fetchjs and I ran into some trouble.

The issue is the data is not being returned to the calling function but the api is receiving data.

Here is my Saga code:

/* eslint-disable no-constant-condition */

import { put, call, takeEvery } from 'redux-saga';
import { delay } from 'redux-saga';
import RPC from "../../RPC";

export function* load_contacts() {
    console.log("Called"); // This part is printed
    try{
        const data = yield call(RPC.execute("contact","search_read_path",[[],["name","picture"]],{})); // *this is the calling function. nothing is returned.
        console.log("waiting for data",data); // this is not printed
        yield put({type:"CONTACTS_LOADED",payload:data});
    }
    catch (e) {
          yield put({type: "CONTACTS_LOAD_FAILED", message: e.message});
     }
}

export default function* rootSaga() {
  console.log(">> rootSaga");
  yield takeEvery('LOAD_CONTACTS', load_contacts)
}

Here is my API code:

module.exports.execute=function(model,method,args,opts,cb) {
    console.info("rpc.execute",model,method,args,opts);
    if (!_rpc_base_url) throw "RPC base url is undefined";
    var params=[model,method];
    params.push(args);
    if (opts) {
        params.push(opts);
    }
    var headers={
        "Accept": "application/json",
        "Content-Type": "application/json",
    };
    if (_database) headers["X-Database"]=_database;
    if (_schema) headers["X-Schema"]=_schema;

    fetch(_rpc_base_url+"/json_rpc",{
        method: "POST",
        headers: headers,
        body: JSON.stringify({
            id: (new Date()).getTime(),
            method: "execute",
            params: params
        }),
    })
    .then((response) => response.json())
    .then((data)=>{
        console.log(data); // data is printed here
        return data} // doesnot return 
    )
    .catch((err) => {
        alert("upload error: "+err);
        if (result_cb) result_cb(err,null);
    })
};

I believe it has something to do with I am using fetch js (incorrect way). I could not find any solutions that could help.

UPDATE if using callback,

export function* load_contacts() {
    console.log("Called")
    try{
        const data ={};
        yield call(RPC.execute("contact","search_read_path",[[],["name","picture"]],{},(err,data)=>{
            if (err){
                alert(err);
                return
            }
            console.log("data inside is ",data)
            data = data
        }));
        console.log("waiting for data",data)
        yield put({type:"CONTACTS_LOADED",payload:data}); // this is called before the data is fetched causing error
    }
    catch (e) {
          yield put({type: "CONTACTS_LOAD_FAILED", message: e.message});
     }
}

RPC:

.then((response) => response.json())
.then((data)=>{
    if (data.error) {
        if (cb) cb(data.error.message,null);
    } else {
        //console.table(data.result);
        if (cb) cb(null,data.result);
    }
})

If I do this, the data is returned but I get some exception by yield put

bundle.js:17692 uncaught at rootSaga 
 at takeEvery(LOAD_CONTACTS, load_contacts) 
 at load_contacts 
 TypeError: (0 , _reduxSaga.put) is not a function
    at load_contacts$ (http://localhost:8088/static/bundle.js:50254:47)
    at tryCatch (http://localhost:8088/static/bundle.js:93097:40)
    at Generator.invoke [as _invoke] (http://localhost:8088/static/bundle.js:93335:22)
    at Generator.prototype.(anonymous function) [as next] (http://localhost:8088/static/bundle.js:93149:21)
    at next (http://localhost:8088/static/bundle.js:48139:27)
    at proc (http://localhost:8088/static/bundle.js:48098:3)
    at runForkEffect (http://localhost:8088/static/bundle.js:48374:19)
    at runEffect (http://localhost:8088/static/bundle.js:48261:872)
    at next (http://localhost:8088/static/bundle.js:48143:9)
    at currCb (http://localhost:8088/static/bundle.js:48215:7

I removed the try catch and removed the yield put for exception , but I still get the same errors seems the issue is with the first yield put.

Upvotes: 0

Views: 728

Answers (1)

Ematipico
Ematipico

Reputation: 1244

Not sure which version of redux-saga you use but put, call, fork, etc. are now inside a different folder

import { put, call, takeEvery } from 'redux-saga/effects';

Upvotes: 1

Related Questions