Как реализовать Long polling на Vue/Vuex?

Question

[Андрей]

Сразу скажу, описанный кейс не совсем long polling, но лучшего термина я не подобрал.

Суть в том, что бэк использует брокер сообщений для долгих запросов. На фронте нужно отображать статус этих запросов.

Предположим, что это блог, каждая запись имеет комменты, комменты можно удалять и комменты удаляются по две минуты (ЭТО ПРОСТО ПРИМЕР):
/blog/article-1
На этой странице я решил удалить комментарий от хейтера. Задача поместилась в очередь, я получил id задачи:
task_id: 'task-1'

Результат выполнения этой таски приходит по веб-сокет, что и отличает данный подход от лонг поллинга.

Теперь я иду на страницу с другой записью и там делаю то же самое. Теперь у меня две задачи.

Я возвращаюсь на предыдущую страницу (article-1) и вот тут возникает самый интересный вопрос: как мне отобразить то, что коммент, который я решил удалить, еще удаляется?

Идея, которая пока пришла в голову. Хранить всё во vuex (понятное дело) в виде такой структуры данных:

{
    'article-1': {
        comments: {
            'comment-54': {
                deleting: {
                    task-555: {
                        status: 'running',
                        response: null
                    }
                }
            }
        }
    }
}

Выглядит избыточно и потенциально очень баговано и опасно.

Вероятно, ситуация тривиальная и есть решение для этого, хотелось бы узнать, т.к. ранее еще не сталкивался с этим.

Answer 1

[Антон Антон]

Таски - в vuex, в отдельном массиве. Кроме id таска писать еще то, к чему он.
Например так:
[{id: 555, entityType: 'comment', entityId: 54, taskType: 'deleting', taskParamenters: {...}}, ...]
Структура с деревом вообще странная. А так - это вариант классического асинхронного RPC.

Comments

[Андрей]

Ну, в целом то, до чего я и додумался, просто в другой форме. Да, в массиве будет удобнее, спасибо)