如何在变异和重新获取期间显示微调器？

Question

React 查询中最简单的突变场景是调用突变，然后使查询无效。
ReactQuery 会在 mutation 后在后台重新获取数据，重新获取后 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})

记录在此处：https://react-query.tanstack.com/guides/invalidations-from-mutations

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

我正在寻找一个特定的微调器，它代表从用户角度添加待办事项的过程。我知道我可以以某种方式显示“两个微调器”（或基于不同状态的微调器），一个用于突变 isLoading，然后一个用于重新获取，基于查询的 isFetching .. .但我想知道是否有“更简单”的方法？

如果添加发生在模态对话框中，我想仅在更改和重新获取发生后关闭对话框，我该怎么做？

Answer 1

onSuccess 如果你 return 是一个 Promise，invalidateQueries return 是一个 Promise，那么我认为（尽管不是 100% 确定）如果你：

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

突变将保持加载状态，直到失效完成。

如何在变异和重新获取期间显示微调器？

How to show spinner during mutation and refetching?

reactjs

react-query