问题标签 [optimistic-ui]

试图从概念上理解 Optimistic UI 的工作原理，感谢任何帮助！

设想：

• 我们发送一个突变来创建一个新的User“John” -->请求 A
• 我们利用 Optimistic UI 功能立即返回“John”的“假”数据
  • 假“约翰”有Id字段：“FakeId10001”
• 在我们从Request A得到响应之前，我们发送另一个突变来将“John”更新name为“Johnny” --> Request B
• 请求 A最终得到处理，并创建了一个带有“10001”的User“John ”Id
• 服务器现在尝试处理请求 B

据推测，请求 B将尝试User使用Id“FakeId10001”更新并失败，因为该用户不存在。

Apollo 是否在发送Request B之前等待Request A响应，或者其他任何处理此行为的方法？

我正在使用<Mutation />具有渲染道具 API 并尝试在 UI 中进行乐观响应的组件。

到目前为止，我在一个_onSubmit函数中有这个块 -

我的<Mutation />组件看起来像 -

我知道该update函数<Mutation />运行两次，一次optimisticResponse是运行，第二次是服务器响应返回。

第一次，我将它们id作为number. createApp在optimisticResponse哪里结账id: negativeRandom()

这就是为什么我update的<Mutation />组件中的道具有一个检查是否createApp.id是number然后将它推入数组的原因。这意味着如果从本地返回的数据则将其推送到本地缓存中，如果从服务器返回则不推送。

但发生的情况是数据仅在从服务器返回时显示。该函数update运行两次，但不会将其推送到数组中。

我认为可能有3个问题-

1. 推送本地状态时，该update功能不运行

2. 我试过使fetchPolicy等于cache-and-network&cache-first但它也没有工作。

3. __typename在optimisticResponse. _ Idk ifMutation是正确的值，所以我也尝试AppConnection过，但它仍然不起作用。

完整的代码可以在这里找到。为简单起见，整个代码存在于一个文件中。它是一个非常简单的应用程序，有 2 个输入和 1 个提交按钮。看起来像 -

注意：同样的事情也适用于 React。这是 React Repo 的链接 - https://github.com/deadcoder0904/react-darkmodelist

我正在使用HOC带有突变的 graphql 作为输入类型checkbox。我还为它添加了乐观的 UI 更新选项。选中该框将触发一个突变，value=true取消选中将触发一个突变value=false。

但问题是快速点击会导致对服务器的多次突变调用，并且响应存在延迟。同时optimisticResponse更新完成它的工作并切换复选框。当服务器响应到达时，再次调用更新函数并切换复选框，导致 UI 出现故障。

让我总结一下我可以预期的流程

点击顺序：

UI 更新顺序：

有没有办法消除这些故障？

我正在尝试创建一个乐观的响应，其中 ui 会立即通过拖放数据进行更新（最小的延迟和更好的用户体验）。然而，我遇到的问题是它仍然滞后。

所以发生的事情是，我希望从我的查询中得到一个区域和未分配区域的列表， unassignedZone 是一个对象，其中包含城市，而 zone 是其中包含城市的区域列表。在编写我的突变时，我在拖放后返回新的重新排序的区域列表。重新排序由名为“DisplayOrder”的区域对象上的字段完成。逻辑将数字设置正确。问题是，当我尝试用乐观的 ui 和更新来模仿它时，会有一点延迟，就像它仍在等待网络一样。

我想要实现的大部分内容都发生在 onDragEnd = () => { ... } 函数中。

https://drive.google.com/file/d/1ujxTOGr0YopeBxrGfKDGfd1Cl0HiMaK0/view?usp=sharing <- 这是一个演示它发生的视频。

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

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

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

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

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

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

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

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

我正在使用 Apollo GraphQL 编写一个 React 组件（使用 React Apollo Hooks，但这没有区别）。

这是我的查询：

这是我进行突变的函数：

一旦我variables用 UI 注释掉键，limit就不会再乐观地更新。注释掉它的值。这里出了什么问题？

tl;dr：如果我们保持真实状态的秘密，并且只公开通过“状态视图”对请求用户可见的部分，考虑到该状态，我们如何实现客户端预测（可以预测的事物）更新对“真正的完整状态”进行操作，而不是状态视图？（无需复制状态视图的更新代码）

考虑有一个服务器“域状态”类来跟踪玩家的分数和硬币数量：

我们希望每个客户端都知道其他玩家的分数，但对硬币计数保密，并有一些衍生状态（可能使用秘密数据），因此我们只公开服务器状态的“视图”：

玩家可以采取某些行动来改变游戏状态

当然，在grab_a_coin没有服务器告诉我们的情况下，我们无法在轮到（做）之后知道谁是最富有的玩家，但我们绝对应该有足够的数据来了解我们自己的财富和其他人的得分（假设他们没有改变）。

假设我们可以与客户共享整个代码库。我想知道在这种情况下不重复自己的模式是什么：如果我们的服务器端代码在原始状态（例如grab_a_coin函数）上运行，我们如何让用户预测他们更新的状态视图？

一种方法是ServerStateView具有与 完全相同的字段ServerState，仅存储用户可用的信息，并且“秘密字段”在访问或返回UnknownData()实例时引发异常（例如coins，仅在使用 current 访问时返回实际数字，player_id并且不会保存任何“秘密数据”），例如coins = SecretDict(player_id = state.coins[player_id]). 但这对我来说似乎是一个有点脆弱的设计，不知道其他人是否已经“解决了它”。

所以我正在阅读有关Optimistic UI的内容，这是我想在我的 android java 应用程序中实现的东西。

我的 android 应用程序与我的 rest api 连接。我的困惑是我该怎么做？

我有一个产品 api，我从 android 应用程序调用它来保存数据。我如何使用乐观的 ui 方法来做到这一点。

我正在使用最新的 Apollo Hooks (v3.1.1)

我的代码看起来像 -

这是我能制作的最小复制品。我不知道为什么它不起作用。

基本上，在上面的示例中，我有一个自is以来的button所有文本。Not yetitem.publishedfalse

当我单击它时，它会向服务器发送一个请求并切换它，它会将true文本更改为Published并在我单击它时继续切换。

乐观的 UI 将确保它立即切换，但现在它没有。

来自原始突变的 AFAIK 响应被放入optimisticResponse2__typename所以我正在这样做。

有任何想法吗？

我还在 Github 上做了最小的复制开源 → https://github.com/deadcoder0904/test-optimistic-ui

它是用 React 和 Prisma2 制作的 :)

我的 GraphQL 乐观渲染遇到了一些麻烦。我正在使用 Apollo 客户端，例如：

问题来自重定向。据我了解，该update函数被调用了两次：第一次使用optimisticResponse，第二次使用网络响应（通常应该是相同的）。

但是，让我们考虑以下场景：

1. 我创建了一个新项目，
2. 我收到了乐观的回应，我被重定向到项目列表，
3. 我单击“添加项目”以重定向到表单
4. 我收到服务器响应，因此我再次被重定向到列表。

防止这种双重重定向的正确方法是什么？

我想检查当前的缓存值。如果该值已经是最新的，我不会应用重定向。不知道有没有更好的方法？你如何处理这样的场景？