React Query - 所有请求完成后触发一次功能答案

【问题标题】：React Query - fire function once when all requests have been finishedReact Query - 所有请求完成后触发一次功能
【发布时间】：2021-04-27 11:06:29
【问题描述】：

我正在寻找有关如何在所有请求完成后触发函数的解决方案。

我正在使用 React Query 来管理外部数据状态和 useMutation 挂钩，因为我需要在选择更改时重新获取数据。

const fetcher1 = async () => await axios.get('XXX');
const fetcher2 = async () => await axios.get('XXX');

const { data, isLoading, mutate: fetchData1 } = useMutation(fetcher1)
const { data2, isLoading: isLoading2, mutate: fetchData2 } = useMutation(fetcher2)

function runWhenReady() {
 console.log("Ready!")
}

// re-fetch on select change and initial fetch
useEffect(() => {
 fetchData1();
 fetchData2();
}, [selectValueChanged])

我想观察请求状态的变化并在所有请求都未挂起时触发runWhenReady()。我想我需要等待例如 1s 做出决定。

谁能帮我准备实用程序来监控请求状态？谢谢！

【问题讨论】：

检查这个：stackoverflow.com/questions/31424561/…

标签： javascript reactjs react-query

【解决方案1】：

您可以查看 isSuccess 以查看成功请求何时发生。

const { data, isLoading, mutate: fetchData1, isSuccess: 1isSuccess } = useMutation(fetcher1)
const { data2, isLoading: isLoading2, mutate: fetchData2, isSuccess: 2isSuccess } = useMutation(fetcher2)


useEffect(() => {
  if(1isSuccess && 2isSuccess){
    runWhenReady();
  }
}, [1isSuccess, 2isSuccess]);

【讨论】：

【解决方案2】：

mutateAsync 和 Promise.allSettled 可能是您要查找的内容，因为 mutateAsync 返回一个可以链接在一起的正常承诺。请注意，您必须自己捕获错误，否则您会看到未处理的 Promise 拒绝。

const { data, isLoading, mutateAsync: fetchData1, isSuccess: 1isSuccess } = useMutation(fetcher1)
const { data2, isLoading: isLoading2, mutateAsync: fetchData2, isSuccess: 2isSuccess } = useMutation(fetcher2)

<button onClick={() => {
    Promise.allSettled([fetchData1(), fetchData2()])
        .then(results => runWhenReady())
        .catch(...)
} />

【讨论】：