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

Question

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

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

但出于某种原因，我的代码无法像这样工作。我收到了两个 update() 调用，都带有乐观数据。

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

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

Answer 1

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

简而言之，问题可能出在名为 OfflineLink 的网络链接上aws-appsync 使用的.

解释

aws-appsync有一个名为 OfflineLink 的 ApolloLink干预 request功能。

发生的事情是这样的:

1. 你调用$apollo.mutate(...)
2. ApolloClient.QueryManager初始化触发你的突变 update第一次有了乐观的 react 。这发生在 ApolloClient 数据存储中，markMutationInit电话 markMutationResult那calls your update .
3. graphql 操作执行并到达 OfflineLink在网络链中。
4. OfflineLink创建一个新的观察者和 dispatches the mutation信息作为一项行动。
5. 下一行OfflineLink调用观察者的 next功能与 optimisticResponse 就好像是执行结果一样!
6. 这会触发您的 update 第二次 结果实际上是 optimisticResponse .
7. OfflineLink调用观察者的 complete这解决了你的 promise 。
8. console.log('done!'...

与此同时，OfflineLink甚至阻止原始突变发送请求，并生成一个新的突变并使用您给它的选项发送。