Sometimes deleted item is still displayed although view initialization - Vue, Node.js

Question

I create app in Vue.js, Node.js and MongoDB. I have a list of items with delete button next to each item. Generally it works, but once, for example 20 deletions, the deleted item stays in the list, although the list is initialized after each delete. After refreshing page manualy, deleted item is gone. How to fix it?

vue component:

 methods: {
    async initialize() {
      return Service.getTool()
        .then((response) => {
          this.tools = response;
        })
        .catch((error) => {
          this.handleError(error, this.errors);
        })
        .finally(() => {
        });
    },
   async deleteItem(id) {
      await Service.deleteTool(id);
      await this.initialize();
    },
}

service:

    static async getTool() {
        const res = await api.get('tool/get')
        try {
            return res.data;
        } catch (err) {
            return err;
        }
    }
    static deleteTool(id) {
        return api.delete(`${'delete'}/${id}`);
    }

backend:

router.delete('/delete/:id', (req, res) => {
  Tool.deleteOne({ _id: req.params.id }, function (err) {
    if (!err) {
      return res.json('Item has been deleted');
    }
    else {
      res.status(500).send(err);
    }
  });
})

But deleted item is deleted in the database, only the view does not display correctly — Weronika, May 08 '21 at 16:42
Yea what if the second network request went to an error log? can you reproduce this consistently? — T J, May 08 '21 at 16:45
out of question, just try only `remove({ _id: req.params.id })` method instead of 2 operations findOne and remove see the [answer](https://stackoverflow.com/a/11522714/8987128) — turivishal, May 08 '21 at 16:46
I use: ```router.remove({ _id: req.body.id }, function(err) { (...) } ``` But I am getting an error: req is not defined. What is wrong? — Weronika, May 08 '21 at 16:51
`router.remove` is your main function don't change it, inside that function just write remove method only instead of findOne. like `Tool.remove({ _id: req.body.id }...` — turivishal, May 08 '21 at 16:53

score 1 · Answer 1 · answered May 08 '21 at 17:03

1

The item isn't deleted at the time when it's reported:

  tool.remove();
  return res.json('Item has been deleted');

That the problem occurs when there are many items to process means that it takes long enough for race condition to be revealed.

Callback-based APIs are obsolete for all major libraries. It should have been implemented via promises:

try {
  const tool = await Tool.findOne({ _id: req.params.id });
  ...
  await tool.remove();
  return res.json('Item has been deleted');

answered May 08 '21 at 17:03

Estus Flask

206,104
70
425
565

I used the solution from the comment to this question - instead of findOne I used deleteOne and it also works fine. I edited my question by adding the updated backend code to it. Can you check this and say if this solution is better or yours? – Weronika May 08 '21 at 17:15
It's better to use deleteOne instead of findOne because it does less queries. deleteOne works for this specific case because there's no race condition with 1 query. but won't prevent problems associated with callbacks for more complex queries. You're using obsolete API, stick to promises where possible. – Estus Flask May 08 '21 at 17:21
Thank you. I will do as you wrote. I had no idea that I was using an obsolete API. Could you please send me link for the newer API? Because on sites, each solution is so different and I don't know which is right. – Weronika May 08 '21 at 17:34
The question says that you use Mongo, but you use Mongoose in fact, don't you? Official documentation is up to date. – Estus Flask May 08 '21 at 17:45
Yes, I will check that. Thank you. – Weronika May 08 '21 at 17:51

score 0 · Accepted Answer · answered Jun 11 '21 at 12:57

I used solution from @turivishal from comment:

router.delete('/delete/:id', (req, res) => {
  Tool.deleteOne({ _id: req.params.id }, function (err) {
    if (!err) {
      return res.json('Item has been deleted');
    }
    else {
      res.status(500).send(err);
    }
  });
})

Sometimes deleted item is still displayed although view initialization - Vue, Node.js

2 Answers2