在我的项目中，我正在使用Django- graphene-django (graphQL)- Apollo- VueJS-Vuetify并且对于我尝试使用的拖放问题Vuedraggable。我实际上正在尝试构建一个带有列和卡片的看板，以便从列移动到列（类似 Trello）。问题是当我不运行任何 Apollo 突变时它运行良好。
所以你可以看到我的初始状态：
:list如果除了提供and之外我不做任何事情group='...'，它会起作用：
但是当我提供一个@change="..."带有阿波罗突变的方法时，它就不再起作用了，它会这样做：
我的数据结构如下：
有多个阶段（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
奇怪的是，没有突变，它会正确移动。当我添加突变以在 DB 中有效地更改它时（正确完成），它会执行这个奇怪的“克隆”。我认为问题出在阿波罗缓存中，因为当我将内容打印到控制台时，在该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，它会运行查询并在 DB 中检索正确的信息并纠正展示。
同样在这部分：
update: (cache, { data: { changeHelpdeskTicketStage } }) => {
console.log('cache : ', cache)
}
如果我检查缓存，我们还可以看到“新”中有 2 个，“进行中”中有 1 个。
有人能告诉我为什么会这样吗？我的意思是当没有突变时，列表会正确更改。突变应该只是为了在 DB 中有效地改变它。
提前致谢 ！