В моем проекте я использую Django - graphene-django (graphQL) - Apollo - VueJS - Vuetify, а для задач перетаскивания я пытаюсь использовать Vuedraggable. На самом деле я пытаюсь создать доску kanban со столбцами и карточками для перехода от столбца к столбцу (как в Trello). Дело в том, что он хорошо работает, когда я не запускаю мутацию Apollo.
Итак, вы можете увидеть мое исходное состояние:
Если я ничего не делаю, кроме :list и group='...', это работает:
Но когда я предоставляю @change="..." метод с мутацией apollo, он больше не работает и делает следующее:
Мои данные структурированы следующим образом:
Есть несколько этапов (New, In Progress, Done), и каждый из них может иметь несколько билетов (Stage 1-n Tickets)
stage {
id
name
ticketIds {
id
name
}
}
Вот мои источники:
Мой шаблон (я опустил чисто визуальные элементы, такие как классы стилей и заголовок столбца, чтобы сделать его более чистым):
<template>
<v-row>
<v-col
v-for="stage in helpdeskTicketStages"
:key="stage.id">
<draggable
:list="stage.ticketIds"
@change="changeTicketStage($event, stage)"
group="tickets">
<v-card
v-for="ticket in stage.ticketIds"
:key="ticket.id">
<v-card-title>{{ ticket.name }}</v-card-title>
</v-card>
</draggable>
</v-col>
</v-row>
</template>
Мой change метод:
changeTicketStage (event, stage) {
if (event.added) {
this.$apollo.mutate({
mutation: CHANGE_HELPDESK_TICKET_STAGE_MUTATION,
variables: {
ticketId: event.added.element.id,
stageId: stage.id
},
update: (cache, { data: { changeHelpdeskTicketStage } }) => {
console.log('cache : ', cache)
}
})
}
}
Мутация CHANGE_HELPDESK_TICKET_STAGE_MUTATION:
const CHANGE_HELPDESK_TICKET_STAGE_MUTATION = gql`
mutation changeHelpdeskTicketStageMutation (
$ticketId: ID!,
$stageId: ID!
) {
changeHelpdeskTicketStage (
ticketId: $ticketId,
stageId: $stageId
) {
id,
isClosed,
stageId {
id
name
}
}
}
`
Графен- django, который называется:
class ChangeHelpdeskTicketStage(graphene.Mutation):
class Arguments:
ticket_id = graphene.ID()
stage_id = graphene.ID()
class Meta:
output = HelpdeskTicketType
def mutate(self, info, **kwargs):
ticket = get_object_or_404(HelpdeskTicket, id=kwargs['ticket_id'])
stage = get_object_or_404(HelpdeskTicketStage, id=kwargs['stage_id'])
ticket.change_stage(stage)
return ticket
Странно то, что без мутации, он движется правильно. И когда я добавляю мутацию, чтобы эффективно изменить ее и в БД (что сделано правильно), он делает этот странный «клон». Я думаю, что проблема в кэше apollo, потому что, когда я печатаю что-то на консоли, в методе change(...) все в порядке:
Действительно, в конце метода change(...) я запускаю:
for (const stage of this.helpdeskTicketStages) {
console.log('name:', stage.name, 'tickets:', stage.ticketIds)
}
, что выдает на консоль:
Итак, мы видим, что это правильно, есть 1 билет на этап. Но он отображает 2 билета на стадии «Новый»!
Я добавил кнопку тестирования для запуска того же кода:
test () {
console.log('----------------- TEST -----------------')
for (const stage of this.helpdeskTicketStages) {
console.log('name:', stage.name, 'tickets:', stage.ticketIds)
}
console.log('----------------- END -----------------')
}
И когда мы проверяем результат в консоли, мы можно увидеть:
Что есть 2 билета на этапе «Новый» и 1 билет на этапе «В процессе», тогда как он должен быть по 1 на каждом этапе. ... Конечно, если я нажму F5, он выполнит запрос и получит правильную информацию в БД и исправит отображение.
Также в этой части:
update: (cache, { data: { changeHelpdeskTicketStage } }) => {
console.log('cache : ', cache)
}
Если я проверю cache, мы также можем видеть, что их 2 в «Новом» и 1 в «В процессе».
Может кто-нибудь сказать мне, почему он делает это? Я имею в виду, что когда мутации нет, списки меняются правильно. Мутация должна присутствовать только для того, чтобы эффективно изменить ее в БД.
Заранее спасибо!