Apollo 客户端：在创建过程中进行乐观更新

Question

我希望能够在对象仍在创建时对其进行更新。

例如：假设我有一个待办事项列表，我可以在其中添加带有名称的项目。我还希望能够编辑项目的名称。

现在假设连接速度较慢的用户创建了一个项目。在这种情况下，我会触发一个创建项目突变并乐观地更新我的 UI。这很好用。目前没有问题

现在假设由于网络缓慢，创建项目突变需要一些时间。在那个时候，用户决定编辑他们刚刚创建的项目的名称。对于理想的体验：

1. UI 应立即更新为新名称
2. 新名称最终应该保留在服务器中

我可以通过等待创建变更完成（这样我可以获得项目 ID）来实现 #2，然后进行更新名称变更。但这意味着我的 UI 的一部分将保持不变，直到创建项目突变返回并且更新名称突变的乐观响应开始。这意味着 #1 不会实现。

所以我想知道如何使用 Apollo 客户端同时实现 #1 和 #2。

注意：我不想添加微调器或禁用编辑。我希望应用程序即使在连接速度较慢的情况下也能做出响应。

Answer 1

如果您有权访问服务器，则可以实施upsert操作，并且可以将所有查询减少到这样的一个：

mutation {
  upsertTodoItem(
    where: {
      key: $itemKey # Some unique key generated on client
    }
    update: {
      listId: $listId
      text: $itemText
    }
    create: {
      key: $itemKey
      listId: $listId
      text: $itemText
    }
  ) {
    id
    key
  }
}

因此，您将拥有一系列相同的突变，仅在变量上有所不同。相应地，乐观响应可以配置为这一突变。在服务器上，您需要检查具有此类的项目是否key已存在并分别创建或更新项目。

此外，您可能希望使用apollo-link-debounce来减少用户键入时的请求数量。