post query issue with express.js and node.js (server side) and react.js (client side)

Hello,

I am a junior developer and I am facing an issue with a post query made in node.js, express.js while using ReactJS on the front-end.

I have two folders:

client and server

In the server folder I am using node.js and express.js.

Here is the code in the index.js file from the server side:

const express = require("express"); const app = express(); const mysql = require('mysql') const cors = require('cors'); app.use(cors()); app.use(express.json()); const db = mysql.createConnection({ user: "root", host: "localhost", password:"root", database: "employeeSystem", }) app.post('/create', (req, res) => { const name = req.body.name; const age = req.body.age; const country = req.body.country; const position = req.body.position; const wage = req.body.wage; db.query( "INSERT INTO employees (name, age, country, position, wage) VALUES (?,?,?,?,?)", [name, age, country, position, wage], (err, result) => { if(err) { console.log(err) } else { res.send("Values Inserted"); } } ); }); app.listen(3306, () => { console.log("Yey your server is running on port 3306"); }); 

In the client folder I am using node.js and express.js.

Here is the code in the App.js file from the client side:

import React, { useState } from 'react'; import './App.css'; import Axios from 'axios'; function App() { const [name, setName] = useState(""); const [age, setAge] = useState(0); const [country, setCountry] = useState(""); const [position, setPosition] = useState(""); const [wage, setWage] = useState(0); const addEmployee = () => { Axios.post("http://localhost:3306/create", { name: name, age: age, country: country, position: position, wage: wage }).then(() => { console.log("success"); }); }; return ( <div className="App"> <div className="information"> <label>Name</label> <input type="text" onChange={(event)=> {setName(event.target.value);}} /> <label>Age</label> <input type="number" onChange={(event)=> {setAge(event.target.value);}} /> <label>Country</label> <input type="text" onChange={(event)=> {setCountry(event.target.value);}} /> <label>Position</label> <input type="text" onChange={(event)=> {setPosition(event.target.value);}} /> <label>Wage (year)</label> <input type="number" onChange={(event)=> {setWage(event.target.value);}} /> <button onClick={addEmployee()}>Add Employee</button> </div> </div> ); } export default App; 

My server is running on the port 3306 and the code is ok, client side as server side.

The issue I am having is with the db.

I created a db in sequel pro « employeeSystem » with a table « employee ».

And I cannot insert the values in the table.

Error message 1:

Error: Connection lost: The server closed the connection.

at Protocol.end (/Users/ana/Desktop/crud-tutorial/server/node_modules/mysql/lib/protocol/Protocol.js:112:13)

Error message 2:

{

fatal: true,

code: ‘PROTOCOL_CONNECTION_LOST’

}

Error: Cannot enqueue Query after fatal error.

I am a bit lost on the MySQL side and with the db I created in Sequel Pro.

In the browser on localhost:3000 the form is working perfectly fine.

Same for the server on localhost:3306 I have the right message, Cannot GET /

I have tried restarts of everything, server apps and googled my issue but nothing really is close to it.

So Thank you very much in advance if you can help!

submitted by /u/Creative-Committee-5
[link] [comments]


Go to Source of this post
Author Of this post: /u/Creative-Committee-5
Title Of post: post query issue with express.js and node.js (server side) and react.js (client side)
Author Link: {authorlink}