vuedraggable 和 apollo 突变的问题

Question

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

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

如果我除了提供 :list 和 group='...' 之外什么都不做，它会起作用：

但是当我提供一个带有 apollo 突变的 @change="..." 方法时，它不再起作用，它会这样做：

我的数据结构如下：

有多个阶段（新的、进行中的、完成的），每个阶段可以有多个工单（阶段 1-n 工单）

stage {
  id
  name
  ticketIds {
    id
    name
  }
}

这是我的消息来源：

My template (I omitted pure visual things such as styling classes and column header to make it cleaner) :

<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>

My change method :

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)
      }
    })
  }
}

The CHANGE_HELPDESK_TICKET_STAGE_MUTATION mutation :

const CHANGE_HELPDESK_TICKET_STAGE_MUTATION = gql`
  mutation changeHelpdeskTicketStageMutation (
    $ticketId: ID!,
    $stageId: ID!
  ) {
    changeHelpdeskTicketStage (
      ticketId: $ticketId,
      stageId: $stageId
    ) {
      id,
      isClosed,
      stageId {
        id
        name
      }
    }
  }
`

The graphene-django that is called :

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 中有效地更改它时（这是正确完成的）它会做这个奇怪的 'clone'。我认为问题出在 apollo 缓存中，因为当我将内容打印到控制台时，在 change(...) 方法中一切正常：

确实，在 change(...) 方法的最后，我运行 :

  for (const stage of this.helpdeskTicketStages) {
    console.log('name:', stage.name, 'tickets:', stage.ticketIds)
  }

给控制台：

所以我们可以看到它是正确的，每个阶段有1张票。但是它在 'New' 阶段显示 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，它运行s查询并在数据库中检索正确的信息并更正显示。

这部分也有：

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

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

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

提前致谢！

Answer 1

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

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

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

vuedraggable 和 apollo 突变的问题

Problem with vuedraggable and apollo mutation

apollo

vue.js

graphql

vuedraggable

graphene-django