graphql - Apollo 客户端 : Making optimistic updates while creation is still in progress

Question

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

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

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

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

UI 应立即更新为新名称

新名称最终应保留在服务器中

我可以通过等待创建变更完成(这样我可以获得项目 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减少用户输入时的请求数量。