0

I am using Heroku's add-on ClearDB MySQL to manage database, Python Flask for backend, and React for frontend.

I successfully setup the database through MySQL Workbench and connected it to the backend like that:

cnx = mysql.connector.connect(
  host = 'host-here',
  user = 'user-here',
  password = 'password-here',
  database = 'db-here',
  port = '3306'

)
cursor = cnx.cursor()

I also created a table individual with a sample row data through MySQL Workbench and made the following endpoint to just select all the data from the table:

@app.route('/api1/create', methods=['GET'])
def get_person():
    cursor.execute("SELECT * FROM individual")
    row_headers = [x[0] for x in cursor.description]
    data = cursor.fetchall()
    json_data = []
    for result in data:
      json_data.append(dict(zip(row_headers, result)))
    return json.dumps(json_data)

For the frontend, I'm using hooks to get data from the database:

const [dataDB, setData] = useState([]);
  useEffect(() => {
    getData();
  }, []);
  const getData = async() => {
    const result = await axios (`/api1/create`, {
      headers: { 'Content-Type': 'application/json'}
    })
    .catch(err => console.log(err));
    console.log("getData: " + result);
    setData(result);
  };

return (
   <table className="result_table">
        <thead>
        <tr>
            <td>id</td>
            <td>First Name</td>
            <td>Last Name</td>
            <td>Info</td>
            <td>Gender</td>
         </tr>
       </thead>
       <tbody>
       {dataDB ?
         dataDB.map((item, idx) => (
         <tr key={idx}>
           <td>{item.individual_id}</td>
           <td>{item.first_name}</td>
           <td>{item.last_name}</td>
           <td>{item.info}</td>
           <td>{item.gender}</td>
         </tr>
       ))
       : <p>Can't get data</p>
     }
       </tbody>
      </table>
)

This is supposed to return the table with that sample data I inserted into the individual table through MySQL Workbench.

However, when I deploy the apps on Heroku, I am able to get db data on my backend but I lose it once I open a page on React frontend.

Meaning that when I open https://mybackend.herokuapp.com/api1/create, I see the json data, but when I open https://myfrontend.herokuapp.com/create (the route is /create but, remember, in the hooks above I am calling useEffect and getData with endpoint /api1/create to fetch data) at the same time, the data on the backend get lost after page refresh and throw an error.

Frontend just shows "Can't get data", meaning that dataDB state has never been updated.

Not sure what's wrong... Here are the errors I get in the log.

Frontend:

 at=info method=GET path="/api1/create" ... status=404 protocol=https

Backend:

: at=info method=GET path="/create" ....connect=0ms service=1ms status=404 protocol=http

Is there anything I am missing?

P.S. I am using api1/... because there is another backend handling other feature, so I distinguish them as api1 and api2 respectively in the setupProxy.js.

AMR
  • 1
  • 2

0 Answers0