Reactjs 如何在突变和再蚀刻期间显示微调器？

React查询中最简单的突变场景是调用突变，然后使查询无效。
ReactQuery将在变异后在后台重新提取数据，重新提取后UI将与服务器状态一致

这是使用ReactQuery时突变的“低挂果实”：

import { useMutation, useQueryClient } from 'react-query'
 
 const queryClient = useQueryClient()
 
 // When this mutation succeeds, invalidate any queries with the `todos` or `reminders` query key
 const mutation = useMutation(addTodo, {
   onSuccess: () => {
     queryClient.invalidateQueries('todos')
   },
 })


// using the mutation
mutation.mutate({name})

此处记录：

现在，我想在“待办事项”的突变和重新提取运行时显示一个进度指示器。 我该怎么做

我正在寻找一个特定的微调器，它表示从用户角度添加todo的过程。我知道我可以以某种方式显示“两个微调器”（或基于不同状态的微调器），一个用于突变

isLoading

，然后一个用于refetch，基于查询的

isFetching

。。。但我想知道是否有一种“更简单”的方法

---

如果添加将在模式对话框中发生，并且我只想在突变和重新蚀刻发生后关闭对话框，我该怎么做？

onSuccess

将等待您返回一个承诺，而

invalidateQueries

将返回一个承诺，因此我认为（尽管不是100%确定）如果您：

---

变异将一直处于加载状态，直到失效结束。

谢谢，这很有效！我不知道

queryClient.invalidateQueries

正在返回承诺。。。

onSuccess: () => {
     return queryClient.invalidateQueries('todos')
},