reactjs - Apollo 突变去抖和竞争条件

Question

(这是 https://github.com/apollographql/apollo-client/issues/1886 的后续内容)

我正在尝试构建一个文本输入，它将在用户键入时更新值。

第一次尝试

我首先尝试使用optimisticResponse在用户输入时更新本地缓存。这是可行的，只不过它会在每次击键时触发突变。除了请求淹没网络之外，还存在网络不一致的问题。有可能最后一个突变最先到达，而第一个突变最后到达。这会导致服务器最终得到一个过时的值。以下是此竞争条件的示例:

type: a
mutate request: a
type: b
mutate request: ab
arrives on server: ab
arrives on server: a

现在服务器在graphql中记录了“a”，这是不正确的。

添加去抖

为了缓解这个问题，我向按键事件添加了去抖功能。尽管这确实有助于解决上述竞争条件，但它并不能解决问题。如果网络速度慢于您的去抖阈值，仍然可能出现竞争条件。

因为我们现在要消除文本输入的抖动，所以我们需要向该 React 组件引入本地状态，以便它在用户键入时立即更新(正如 @jbaxleyiii 在 github 问题中建议的那样)。现在我们的状态存在于两个地方(组件状态和 apollo 缓存)。

这样做的一个大问题是组件在收到新的 props 时不会更新。例如。当 graphql 更新并推送到客户端时。

添加网络队列

因为去抖实际上并没有解决竞争条件，所以我添加了一个网络队列(除了去抖之外)，它将管理突变请求，以确保其中只有一个突变一次飞行。如果它在有一个正在运行的突变请求时收到一个突变请求，它会将其排队等待第一个返回时被触发。如果已经有一个突变排队，它将丢弃它并用新的替换它(队列中一次只能有一项)。这是一个例子:

type: a
send mutate request: a
type: b
queues mutate request: ab     <<  wait to send this until "a" comes back
type: c
replaces queued request: abc  << discard the queued request for "ab", it's old now
response from server: a
send mutate request: abc      << send the queued mutation and clear the queue
response from server: abc

这保证了我们不会出现竞争条件(至少来自该客户......)

但是这种方法有一个问题。 optimisticResponse 仅在突变消失时才会更新。如果突变正在进行中，我们需要等待网络返回，然后才能应用更新 optimisicRespose。在慢速网络上，这个时间可能会很长。因此，在上面的示例中，我们无法使用 optimisticResponse 更新为“abc”，直到“send mutate request: abc”。

这不是什么大事，只是延迟，但这似乎是我们应该能够做到的事情。

尝试在用户键入时更新缓存

在文档中，我了解到可以使用 withApollo 来访问客户端，并在用户通过 writeQuery 键入时更新缓存。这取代了对optimisticResponse的需求。然而，当旧的响应返回并更新我们下面的缓存时，现在就会出现问题。这是一个例子:

action                   | cache
-------------------------+------------
type: a                  | a
mutate request: a        | a
type: b                  | ab
queues request: ab       | ab
response from server: a  | a  << oh no!
mutate request: ab       | a  << we're not using optimisticResponse anymore
... network time ...     | a
response from server: ab | ab

我想我们可以使用 client.writeQuery 在用户输入时更新缓存，使用 optimisticResponse 在 mutate 请求触发时进行更新，但现在这段代码变得很难遵循。

在 update 函数中也可能有一种方法来处理这个问题，但我还没有走那么远。

帮忙？

我对 Apollo 还很陌生，所以也许我错过了一些东西。有没有更好的方法来处理apollo中的许多快速突变？

Answer 1

每个突变都会返回一个 promise ，因此您可以通过跟踪最新的突变来了解无序突变何时到达。

由于您接受用户输入的任何内容，这意味着用户的值是规范的，并且您并不真正需要乐观的响应。您所做的就是确保服务器具有与您相同的值。

因此，我建议您跟踪 Redux 中的输入并添加一个存储监听器来触发突变(带有去抖)。

如果您确实需要跟踪服务器值，请使用计数器来查看返回的突变是否是最后一个(在突变发送时存储++counter 值，并将该值与突变时的计数器值进行比较返回)。