I am trying to delete the user by hitting an delete api(mysql+node). But somehow i am getting an error
saying the BAD REQUEST.
Error:
DELETE http://localhost:7003/api/remove/2 404 (Not Found)
Please refer below index.js and react(Home.js)
Home.js:
import React, { useState, useEffect } from "react";
import axios from "axios";
import { Link } from "react-router-dom";
import { toast } from "react-toastify";
const Home = () => {
const [data, setData] = useState([]);
const loadData = async () => {
const response = await axios.get("http://localhost:7003/api/get");
setData(response.data);
};
const deleteUser = (id) => {
console.log("clicked");
axios.delete(`http://localhost:7003/api/remove/${id}`);
loadData();
};
useEffect(() => {
loadData();
}, []);
return (
<div className="table-container">
<Link to={"/add"}>
<button>ADD USER</button>
</Link>
<table className="styled-table">
<thead>
<tr>
<th>No.</th>
<th>Name</th>
<th>Location</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
{data.map((item, index) => {
return (
<tr key={item.id}>
<th>{index + 1}</th>
<td>{item.name}</td>
<td>{item.location}</td>
<td>{item.amount}</td>
<td>
<Link to={`/update/${item.id}`}>
<button>Edit</button>
</Link>
<button
onClick={() => {
deleteUser(item.id);
}}
>
Delete
</button>
<Link to={`/view/${item.id}`}>
<button>Edit</button>
</Link>
</td>
</tr>
);
})}
</tbody>
</table>
</div>
);
};
export default Home;
`
Index.js:
const express = require("express");
const app = express();
const cors = require("cors");
const bodyParser = require("body-parser");
const mysql = require("mysql2");
const db = mysql.createPool({
host: "localhost",
user: "root",
password: "root",
database: "crud_contact",
});
app.use(cors());
app.use(express.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.listen(7003, () => {
console.log("Server is up and running @7003");
});
// app.get("/api/get",(req,res)=>{
// const sqlQuery ="insert into customer (name,location,amount) values ('Aditya','USA',500000)";
// db.query(sqlQuery,(error,result)=>{
// if(error){
// console.log(error)
// }
// res.send(result)
// });
// })
app.get("/api/get", (req, res) => {
const sqlQuery = "select * from customer";
db.query(sqlQuery, (error, result) => {
if (error) {
console.log(error);
}
res.send(result);
});
});
app.post("api/post", (req, res) => {
const { name, location, amount } = req.body;
const sqlInsertQuery =
"insert into customer (name,location,amount) values (?,?,?)";
db.query(sqlInsertQuery, [name, location, amount], (error, result) => {
if (error) {
console.log(error);
}
});
});
app.delete("api/remove/:id", (req, res) => {
const { id } = req.params;
const deleteQuery = "delete from customer where id = ?";
db.query(deleteQuery, [id], (error, result) => {
if (error) {
console.log(error);
}
});
});`
It will be great help if you could help me find where esactly I am going wrong.
But somehow i am getting an error saying the BAD REQUEST.
Not according to the error you're showing us:
Error: DELETE http://localhost:7003/api/remove/2 404 (Not Found)
"Not Found" isn't a "Bad Request" response, it's a "Not Found" response. Which means the resource doesn't exist on the server. At a glance, I see a difference here:
// this is found:
app.get("/api/get", (req, res) => {
// this is not found:
app.delete("api/remove/:id", (req, res) => {
The post
and delete
operations appear to be missing the initial /
in the URL. So the endpoints are being created, but not at the URL you expect. Add the /
to match the get
operation.