vuedraggable 和 apollo 突变的问题答案

【问题标题】：Problem with vuedraggable and apollo mutationvuedraggable 和 apollo 突变的问题
【发布时间】：2020-10-09 11:34:02
【问题描述】：

在我的项目中，我使用的是Django - graphene-django (graphQL) - Apollo - VueJS - Vuetify，对于拖放问题，我尝试使用Vuedraggable。我实际上正在尝试构建一个带有列和卡片的看板，以便从列移动到列（类似 Trello）。问题是当我不运行任何 Apollo 突变时它运行良好。

所以你可以看到我的初始状态：

如果我除了提供:list 和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
      }
    }
  }
`

被调用的graphene-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 中有效地更改它时（正确完成），它会执行这个奇怪的“克隆”。我认为问题出在 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，它会运行查询并在 DB 中检索正确的信息它可以纠正显示。

也在这部分：

      update: (cache, { data: { changeHelpdeskTicketStage } }) => {
        console.log('cache : ', cache)
      }

如果我检查缓存，我们还可以看到“New”中有 2 个，“In Progress”中有 1 个。

有人能告诉我为什么会这样吗？我的意思是当没有突变时，列表会正确更改。突变应该只是为了在 DB 中有效地改变它。

提前致谢！

【问题讨论】：

标签： vue.js graphql apollo graphene-django vuedraggable

【解决方案1】：

好吧，我终于改变了主意，决定perform the mutation on the STAGE instead of doing this on the TICKET，这样我就可以发送源阶段和目标阶段以及他们更新的票证列表作为突变的结果。通过写下所有问题，我意识到这样会更容易......

实际上，突变的结果是：[source_stage, target_stage] 所以输出类型现在是 graphene.List(my_type)。

通过这样做，我不必在 update 语句中的突变之后手动更改 stage ticketIds，因为它会自行正确更新。

【讨论】：