React - delete request come with error code 404

Question

I've an issue while i'm trying to delete a driver from mySQL db. Calling my function and passing mapped id (it's working):

<button id="deleteRent" onClick={DeleteVehicles.bind(vehicle.id)}>Delete</button>

Here is my react code:

const DeleteVehicles = (CarId) => {
        Axios.delete(`http://localhost:3001/vehicleDelete/${CarId}`)
            .then((response) => {
                if (response) {
                    console.log(response)
                    alert("Sikeres Törlés")
                    navigate("/admin");
                }
                else {
                    console.log("törlési hiba")
                }
            })
    }

and here is my node express request:

app.delete('/vehicleDelete/:CarId'), async (req, res) => {
    db.query("DELETE FROM products WHERE id = ?", req.params.CarId,
        (err, result) => {
            console.log(err)
            console.log(result)
            if (result) {
                res.send(result);
            }
        })
}

any idea?

Answer 1

You should run this:

app.delete('/vehicleDelete/:CarId'), (req, res) => {
   // make sure your are getting CarId that exists
   // and then you delete it

    db.query(`DELETE FROM products WHERE id = ${req.params.CarId}`,
        (err, result) => {
            console.log(err)
            console.log(result)
            if (result) {
                res.send(result);
            }
        })
}

Also, you don't need to add async as your not using await for the query. The result gives you an object that might look like this:

{
  fieldCount: 0,
  affectedRows: 1,
  insertId: 0,
  serverStatus: 34,
  warningCount: 0,
  message: '',
  protocol41: true,
  changedRows: 0
}

Now, when you say you receive the 404 status code, it means that you don't have the route on which the request is made. So, http://localhost:3001/vehicleDelete/${CarId} you need to register the route properly at the server.

You should add the catch blocks with Promises, it is recommended practice.

const DeleteVehicles = (CarId) => {
        Axios.delete(`http://localhost:3001/vehicleDelete/${CarId}`)
            .then((response) => {
                if (response) {
                    console.log(response)
                    alert("Sikeres Törlés")
                    navigate("/admin");
                }
                else {
                    console.log("törlési hiba")
                }
            }).catch(console.log);
    }