小编Jon*_*ron的帖子

我正在使用Scaphold.io来构建我正在开发的一个小应用程序的后端，并且在尝试更新单个变更请求中的多个项目时遇到了问题。

在 Scaphold 中，当您创建新类型时，会为常见操作创建更改：创建、更新和删除。

您无法重新定义这些更改或其输入类型的架构。在我正在工作的模型类型 ( card) 中，我立即获得了这些突变：

createCard(input: CreateCardInput!): CreateCardPayload

updateCard(input: UpdateCardInput!): UpdateCardPayload

deleteCard(input: DeleteCardInput!): DeleteCardPayload

该updateCardInput类型定义了以下字段：

listId: ID
description: Text
name: String
order: Int
id: ID!
clientMutationId: String

我能做的：更新一张卡

有了这个，我知道如何定义一个更新order单卡的突变：

mutation updateCardOrder($card: UpdateCardInput!) {
  updateCard(input: $card) {
    changedCard {
      id
      order
    }
  }
}

变量：

{
  "card": {
    "id": "Q2FyZDo4MzA=",
    "order": "1"
  }
}

我想要做的是：在一个突变中更新多张卡片

我得到了一些使用卡片列表 ( [card]) 作为输入的指针，但我不知道如何让它工作。

理想情况下，类似于：

mutation updateCardOrder($cards: UpdateCardInput!) {
  updateCard(input: $card) {
    changedCard …

我有一个查询返回多个嵌套对象,以呈现充满信息的屏幕.我想删除一个深度嵌套的对象并乐观地更新屏幕(即不运行完整的查询).

为了解释查询和UI,我将使用类似Trello板的查询作为示例:

query everything {
  getBoard(id: "foo") {
    name
    cardLists {        
      edges {
        node {
          id
          name
          cards {
            edges {
              node {
                id
                name
              }
            }
          }
        }
      }
    }
  }
}

此查询的结果用于构建如下UI:https://d3uepj124s5rcx.cloudfront.net/items/170a0V1j0u0S2p1l290I/Board.png

我正在构建应用程序:

• VueJS
• Vue Apollo
• Scaphold.io作为我的GraphQL商店

当我想删除其中一张卡时,我打电话给:

deleteCard: function () {
  this.$apollo.mutate({
    mutation: gql`
      mutation deleteCard($card: DeleteCardInput!) {
        deleteCard(input: $card) {
          changedCard {
            id
          }
        }
      }
    `,
    variables: {
      'card': {
        id: this.id
      }
    },
  })
  .then(data => {
    // Success
  })
} …

我正在使用的堆栈

• Scaphold.io作为我的 GraphQL 服务器
• 客户端的Vue Apollo
• 用于处理拖放的Vue Draggable库

我正在尝试做什么

我正在构建一个向用户呈现多个列表的应用程序，每个列表都包含多张卡片。在列表中，用户可以对卡片重新排序。卡片也可以从一个列表移动到另一个列表，这会更改卡片的父列表以及卡片在源列表和目标列表中的顺序。

这是一个 GIF，显示了我的应用程序中的卡片/列表和重新排序的 UI。您在这里看到的都是在客户端发生的，并且更改不会持久保存到数据库中：

这是我用来构建 UI 的查询：

const foo = gql`
  query foo {
    getAccount(id: "xxxxx") {
      cardLists {        
        edges {
          node {
            id
            name
            cards(orderBy: {field: order, direction: ASC}) {
              edges {
                node {
                  id
                  name
                  order
                }
              }
            }
          }
        }
      }
    }
  }
`

这是来自 Vue Draggable 项目的 GIF，它进一步说明了我正在做的事情（注意数据中的“order”值）：

问题

我不知道如何构建突变来处理重新排序，以便正确保留移动的卡以及源列表和目标列表的排序更改。

在 Scaphold 中构建模式意味着我需要（我认为）使用它提供的突变。我没有找到将多个卡片和列表传递给单个突变的方法，以便我可以立即更新所有内容。

以下是 Scaphold.io 中示例项目的端点：https://us-west-2.api.scaphold.io/graphql/soreorderingexample

这是 Scaphold.io 生成的架构：https://d3uepj124s5rcx.cloudfront.net/items/1e1m2q3F170C2G3M0v2p/schema.json

我的问题

• 在 GraphQL …