React Query Optimistic Update导致闪烁更新

Question

我在React Query中遇到了一个问题，如果用户按下按钮太快，触发突变，当API调用返回时，屏幕上的正确值闪烁和变化，即使试图取消它们。我注意到这个问题也发生在官方的React Query乐观更新示例中。这是我拍摄的一段关于那里发生的问题的视频。

export const useIncreaseCount = () => {
const queryClient = useQueryClient()
return useMutation(
() => {
const cart = queryClient.getQueryData('cart') as Cart
return setCart(cart)
},
{
onMutate: async (cartItemId: string) => {
await queryClient.cancelQueries('cart')
const previousCart = queryClient.getQueryData('cart') as Cart
queryClient.setQueryData(
'cart',
increaseCount(previousCart, cartItemId)
)
return { previousCart }
},
onError: (error, _cartItem, context) => {
console.log('error mutating cart', error)
if (!context) return
queryClient.setQueryData('cart', context.previousCart)
},
onSuccess: () => {
queryClient.invalidateQueries('cart')
},
}
)
}

我正在考虑取消调用使用useincreecount，但然后onMutate将被取消，我不希望那样。理想情况下，只有API调用会被取消。是否有一个内置的方式在React查询做到这一点?

Answer 1

问题来自于这样一个事实，即每个onSuccess回调调用queryClient.invalidateQueries，即使对突变的不同调用仍在运行。用户代码有责任不这样做。我看到两种方法:

• 我们有时做的一件事是用ref跟踪正在进行的突变的数量(onMutate增加，onSettled减少)，然后只有在计数器为零时才调用queryClient.invalidateQueries。
• 分配mutationKeys和使用!queryClient.isMutating(key)也应该工作。