Unable to process Azure Functions Html response with React - Expo - node.js

Question

Disclaimer: I am new to JS so this problem is probably pretty simple to solve, but I have consulted all resources and stack overflow posts I could find online on the subject
This is probably something simple that's missing but I haven't been able to debug this problem :
I want to connect an Azure Function API to a React app, but I am unable to process the Html Response, which makes my await functions hang.
Here is the very simple Azure functions API code :
import logging
import azure.functions as func
import json
def main(req: func.HttpRequest) -> func.HttpResponse:
logging.info('Python HTTP trigger function processed a request.')
return func.HttpResponse(
json.dumps({
'recommendations': [1,2,3,4,5]
}),
mimetype="application/json"
);
And here is my React based app (running with Expo) :
class App extends Component {
state = {
selectedUser: 0,
step: 0,
recommendations: 1
};
goToStep0 = async () => {
this.setState({ step: 0, recommendations: 1 });
};
goToStep1 = async () => {
const { data: rec } = await axios.get(config.API_URL);
//const rec = await axios.get(config.API_URL);
// const options = {method: "GET"};
// var rec;
// fetch(config.API_URL,options)
// .then(data => {rec = data.recommendations;});
this.setState({ step: 1, recommendations: rec });
};
The Azure function is receiving input and returns a successful answer everytime.
What I have tried :
Changing the the Azure function app to return a string
Trying to get the request with fetch
Removing async and running a more old school request :
var rec;
fetch(config.API_URL)
.then(response => response.json())
.then(data => {
rec = data
});
Probably at least 10 other things I have forgotten (I have wasted more than 4 hours on this...)
Thanks a lot in advance for your help!
Edit : Below is the code for the rendering part of the app (text is in French) :
render() {
if (!config.API_URL) {
return (
<View style={styles.container}>
<Image
style={{ resizeMode: "center", width: 450, height: 150 }}
source={require("./assets/icon-flat.png")}
/>
<Text style={{ color: "red", margin: 20 }}>
L'app n'est pas configurée correctement. Mettez à jour le fichier
config.json comme indiqué dans le README.
</Text>
</View>
);
}
return (
<View style={styles.container}>
<Image
style={{ resizeMode: "center", width: 450, height: 150 }}
source={require("./assets/icon-flat.png")}
/>
<Text style={{ fontSize: 18, padding: 20, textAlign: "center" }}>
Choisissez votre profil afin de recevoir des recommendations de
lecture personnalisées : {this.state.recommendations.toString()}
Quel est mon état : {this.state.step}
</Text>
<Picker
style={{ height: 200, width: "80%", margin: 30 }}
selectedValue={this.state.selectedUser}
onValueChange={value => this.setState({ selectedUser: value })}
>
{[...Array(10000).keys()].map(e => (
<Picker.Item key={e} label={`User ${e}`} value={e} />
))}
</Picker>
<Button title="Se connecter" onPress={this.goToStep1} />
</View>
);
}
}

Answer 1

I have managed to find the problem. The code was not problematic as much as the fact that I was using an old version of react and axios.
With the newest version, I am unable to send requests to localhost but I managed to get responses after deploying the application.
I have "deployed" my Azure function API to the internet using Ngrok which allows me to handle requests.

Answer 2

You can call the callback function on Axios call like this:
axios.get(config.API_URL)
.then(res => {
if (res) {
console.log("Data fetched: ", res)
// do stuff
}
else {
// do stuff
}
}).catch(err => {
console.log(err)
})
Like you did with fetch