Using React, NodeJS, and Postgres: Having trouble being able to delete and updating todos

Question

I am creating simple todo app with postgre and react.

The server side the delete and update are defined as below.

app.put("/todos/:id", async (req, res) => {
  try {
    const { id } = req.params;
    const { description } = req.body;
    const updateTodo = await pool.query(
      "update todo set description = $1 where todo_id = $2",
      [description, id]
    );
    res.json("todo updated !!");
  } catch (error) {
    console.error(error.message);
  }
});

// delete todo
app.delete("/todos/:id", async (req, res) => {
  try {
    const { id } = req.params;
    const deleteTodo = await pool.query("delete from todo where todo_id = $1", [
      id,
    ]);
    res.json("todo deleted !!");
  } catch (error) {
    console.error(error.message);
  }
});

On the front end (React) this is how I am calling the update and delete

  const updateDescription = async () => {
    try {
      handleClose();
      const body = { description };
      const response = fetch(`http://localhost:3000/${todo.todo_id}`, {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(body),
      });
      console.log(response);
    } catch (error) {
      console.log(error.message);
    }
  };

Delete todo is in the other component.

  const deleteTodo = async (id) => {
    try {
      const deleteTodo = await fetch(`http://localhost:3000/${id}`, {
        method: "DELETE ",
      });
      console.log(deleteTodo);
      setTodods(todos.filter((todo) => todo.todo_id !== id));
    } catch (error) {
      console.log(error.message);
    }
  };

So when I am doing delete or put request its not updating it in the DB.

On the browser console I am getting this error.

Failed to execute 'fetch' on 'Window': 'DELETE ' is not a valid HTTP method.

Edited

Response {type: "cors", url: "http://localhost:3000/3", redirected: false, status: 404, ok: false, …}
body: (...)
bodyUsed: false
headers: Headers {}
ok: false
redirected: false
status: 404
statusText: "Not Found"
type: "cors"
url: "http://localhost:3000/3"
__proto__: Response

For insert todo its working but for delete and put request its not updating in the database.

So can somebody tell me whats going wrong here ?

AbhishekGowda28 · Accepted Answer · 2021-06-08 02:44:14Z

1

There is a space after DELETE, correct it should work properly. Even if its a simple todo App, its always good practice to create an enum or const when we are dealing with fixed string, i.e., we know the string would not change so that we can have consistency and skip over these kind of issues.

const METHOD = {
 GET: "GET",
 PUT: "PUT",
 POST: "POST",
 DELETE: "DELETE" 
};

edited Jun 8, 2021 at 2:44

answered Jun 8, 2021 at 2:38

AbhishekGowda28

1,10412 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

bad_coder9042093 Over a year ago

That helped. But ts only updating on the front end side. But database is not updated. I am getting other error on the browser console. You can see in edit section.

AbhishekGowda28 Over a year ago

I think you are trying to perform some action on the resource that doesn't exist. When are you seeing the new error, is it on PUT or DELETE ?

bad_coder9042093 Over a year ago

On delete. The resource is exists if I do it on postman its deleting it in the database.

bad_coder9042093 Over a year ago

Cool. I got it. Its the on delete url mistake. It should be ` const deleteTodo = await fetch(http://localhost:3000/todos/${id}, { method: "DELETE", });`

Collectives™ on Stack Overflow

Using React, NodeJS, and Postgres: Having trouble being able to delete and updating todos

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related