vue.js - Apollo - update() 方法被调用两次，两次都是乐观/虚假数据

Question

我完全陷入了一个 Apollo 问题，为此我打开了一个 GitHub 问题并且对它的响应为零。

我正在调用 Apollo 突变，使用optimisticResponse. 据我了解，它应该工作的方式是update()被调用两次：首先是乐观数据，然后是来自网络的实际数据。

但由于某种原因，我的代码不能这样工作。我接到两个update()电话，都是乐观的数据。

这是一个演示此行为的存储库：https ://github.com/ffxsam/apollo-update-bug

1. 纱线&&纱线开发
2. 在浏览器中打开，打开控制台
3. 输入一些文字并按回车
4. 重复上面
5. 请注意控制台中有关重复键的错误。发生这种情况是因为临时 ID “??” 没有被真实的 UUID 替换（可选）如果可用，您可以打开 Vue DevTools 并检查数据以查看它是否不正确

Answer 1

我正在做一些挖掘，我想我找到了问题的根源。不幸的是，我没有解决方案。

简而言之，问题可能出OfflineLink在aws-appsync.

解释

aws-appsync有一个调用的 ApolloLinkOfflineLink干预该request函数。

发生的事情是这样的：

1. 你打电话$apollo.mutate(...)
2. ApolloClient.QueryManagerupdate初始化第一次触发你乐观响应的突变。这发生在 ApolloClient 数据存储中，markMutationInit调用markMutationResult调用您的 update。
3. graphql 操作执行并到达OfflineLink网络链中。
4. OfflineLink创建一个新的观察者并将突变信息作为一个动作发送。
5. 下一行OfflineLink调用观察者的next函数，optimisticResponse 就好像它是执行结果一样！
6. 这会触发您update的第二次，结果实际上是optimisticResponse.
7. OfflineLink调用观察者complete来解决你的承诺。
8. console.log('done!'...

同时，OfflineLink甚至阻止原始突变发送请求，并使用您提供的选项生成并发送新的突变。