React-Native Server Error When making a simple API request

Question

I have a frontend in react-native that makes an API call using the axios library; its shown below:

function addItem(item) {
if (!item) {
    Alert.alert('Error', 'Please enter a valid item.', [{text: 'Ok'}]);
} else {
    axios.get('/additem', {
        Id: items[items.length - 1].id + 1,
        Text: item
    })
    .then((res) => {
        setItems([...items, {id: res.id, text: res.text}])
    })
    .catch((err) => {
        console.log(err);
    })
  }
}

As you can see, I am making a GET request to an endpoint, and using the response data.

Here is what my backend endpoint looks like in Node.js (using Express.js):

app.get('/additem', (req, res) => {
const item = new Item({
    id: req.body.Id,
    text: req.body.Text
});

item.save()
    .then((result) => {
        res.send(result)
    })
    .catch((err) => {
        console.log(err)
    })
})

The save() function and Item object are just specific to MongoDB, so don't worry too much about that. I am using a proxy to "connect" the backend and frontend, meaning, I have added this to my package.json file in my frontend:

{
"name": "firstProj",
"version": "0.0.1",
"private": true,
"proxy": "https://localhost:5000",
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},

localhost:5000 is where my node.js backend is running

Now when I try to access the endpoint via my frontend, react-native yells at me saying this:

  LOG      [Error: Network Error]

Zero clue why this is happening. Any help is appreciated. :) Let me know if you need more information from my end.

Thanks a ton.

EDIT: this is the full error when not caught by my code:

 Possible Unhandled Promise Rejection (id: 0):
Error: Network Error
createError@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:99656:26
handleError@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:99560:27
dispatchEvent@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:32348:31
setReadyState@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:31432:33
__didCompleteResponse@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:31248:29
emit@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:3537:42
__callFunction@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:2765:36
http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:2497:31
__guard@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:2719:15
callFunctionReturnFlushedQueue@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:2496:21
callFunctionReturnFlushedQueue@[native code]

user_15124145 · Answer

just Remember to not put http://localhost:PORT into API Address because it will not work in that way

the way you should do it is first find your internet IP address on your machine like :

108.67.122.124

and then you change setting in your backend Service and replace localhost with this :

108.67.122.124:PORT

and then Address it like that to your AXIOS or whatever library you use

So lets wrap it again :

DONT address your react native like http:localhost:5000 instead do it like 108.67.122.124:5000 In that way it will fully work

React-Native Server Error When making a simple API request

1 Answers