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

【问题标题】：How to show spinner during mutation and refetching?如何在突变和重新获取期间显示微调器？
【发布时间】：2021-05-29 22:26:02
【问题描述】：

React Query 中最简单的突变方案是调用突变，然后使查询无效。
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})

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

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

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

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

【问题讨论】：

标签： reactjs react-query

【解决方案1】：

如果你返回一个 Promise，onSuccess 将等待，而invalidateQueries 返回一个 Promise，所以我认为（虽然不是 100% 肯定）如果你：

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

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

【讨论】：

谢谢，这行得通！我不知道 queryClient.invalidateQueries 正在返回一个 Promise ...