gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 13:27:45 25 4
gpt4 key购买 nike

(这是 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中的许多快速突变?

最佳答案

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

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

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

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

关于reactjs - Apollo 突变去抖和竞争条件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45683687/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com