Question

在我的项目中，我使用的是Django-graphene-django (graphQL)-Apollo-VueJS-Vuetify使用Vuedraggable。我实际上是在尝试构建带有列和卡片的看板来在列之间移动（Trello之类的）。问题是当我不运行任何Apollo突变时，效果很好。

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

如果我除了提供:list和group='...'之外没有做任何其他事情，它会起作用：

但是当我提供带有阿波罗突变的@change="..."方法时，它不再起作用了，并且可以这样做：

我的数据的结构如下：

有多个阶段（“新建”，“进行中”，“完成”），每个阶段可以有多个票证（第1阶段-n票证）

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

奇怪的是，没有突变，它可以正确移动。当我添加突变以在数据库中有效地更改它时（正确完成），它也会执行此奇怪的“克隆”操作。我认为问题出在阿波罗缓存中，因为当我将内容打印到控制台时，在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 -----------------')
}

当我们在控制台中检查结果时，我们可以看到：

在“ New”阶段有2张票，在“ In Progress”阶段有1张票，而每张票应该是1张...当然，如果我按F5键，它将运行查询并在DB中检索正确的信息，它会纠正显示。

也在这一部分：

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

如果我检查缓存，我们还可以看到“新建”中有2个，“进行中”中有1个。

有人可以告诉我为什么这样做吗？我的意思是，当没有突变时，列表会正确更改。突变应该在那里，以便有效地在数据库中对其进行更改。

提前谢谢！

Answer 1

好吧，我终于改变了主意，决定使用)，以便我可以将源阶段和目标阶段及其更新的故障单列表发送给突变源。通过写下所有问题，我意识到用这种方式会更容易...

实际上，突变的结果是：[source_stage，target_stage]，因此输出类型现在为graphene.List（ my_type ）。

通过此操作，由于perform the mutation on the STAGE instead of doing this on the TICKET语句中的突变本身可以正确更新，因此我不必手动更改阶段ticketIds。

vuedraggable和阿波罗突变的问题

1 个答案: