How to make my react app dynamic when fetching api? - mysql

Question

In my react app, im using Im using MySql and NodeJS. When im fetching api, the code looks something like this
axios.post('http://localhost:5000/api/product-from-search', obj)
.then(function (response) {
state.setState({ searchInputResult: response.data })
})
.catch(function (error) {
console.log(error);
})
}
how can i make it dynamic so that i only need to write
axios.post('/api/product-from-search', obj)

Answer 1

You can define your baseURL outside your component and use template literals in your function call.
const baseURL = "http://localhost:5000"
~~~
axios.post(`${baseURL}/api/product-from-search`, obj)

Answer 2

excuse me if I'm not understanding your question correctly.
I think you are asking how to set your baseURL for Axios, so you can type all your routes as relative instead of absolute ('/api/...' instead of 'http://address:port/api/...')?
You should not need to write the http://localhost:5000 part of the path. Axios should work fine with just just the relative '/api/...'.
If that's NOT the case, I think you might have a CORS issue. (https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS)
If you've used create-react-app, then in the package.json (of your react app) add the following line just before the closing curly brace:
"proxy": "http://localhost:5000"
EDIT: Don't forget to restart your server after doing this!
If it's a CORS problem, the request is failing because your server is at a different origin (in this case, different port) than your front end, which the browser will block for security reasons.
Of course, you can use AXIOS configuration to set a baseURL so that you don't have to include it in every route as described here: (https://github.com/axios/axios)
const instance = axios.create({
baseURL: 'https://some-domain.com/api/',
timeout: 1000,
headers: {'X-Custom-Header': 'foobar'}
});
But I don't think that's your actual issue. Try the proxy in your package.json first.
Cheers!

Answer 3

You can create a separate 'helper.js' file where you can define a function to configure axios post request as per the requirements.
import React from 'react';
let baseUrl = "http://localhost:5000";
export function post(apiEndpoint, payload){
return axios.post(baseUrl+apiEndpoint, payload,
options = { headers: {
'Authorization': 'Your token goes here',
}})
.then((response)=>{
return response;
}).catch((err)=>{
console.log(err);
})
}
Now, call this named export into your file with required params.