React查询乐观更新导致闪烁更新

Question

我对React查询有一个问题，如果用户按按钮太快按下按钮，触发突变，即使返回API调用，正确的值也会在屏幕上闪烁并更改，即使在尝试取消它们时也会返回API调用。我注意到此问题也发生在官方React查询示例以进行乐观更新。这是 fivese 我 我对那里发生了问题。

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')
            },
        }
    )
}

我正在考虑拒绝使用UsiseIncreaseCount的电话，但是随后onMutate将被拒绝，我不想要。理想情况下，仅将拒绝API电话。 React查询中是否内置了内置的方式？

Answer 1

问题来自以下事实：即使该突变的不同调用仍在运行，每个onsuccess回调 queryclient.invalidatequeries 即使。不执行此操作是用户代码的责任。我看到两种方法：

• 有时我们要做的一件事是用ref跟踪正在进行的突变量（inmutate inmutate ，insettled ），然后仅调用queryclient.invalidatequeries如果计数器为零。
• 分配突变键并使用！queryClient.ismutating（key）也应起作用。