在“React-Query”中所有并行查询成功后如何执行操作答案

【问题标题】：How to perform action after all parallel queries are successful in "React-Query"在“React-Query”中所有并行查询成功后如何执行操作
【发布时间】：2021-08-01 16:36:42
【问题描述】：

在 React-Query 中，我们可以使用 useQueries 钩子来执行并行查询（主要是使用 Promise.all）：https://react-query.tanstack.com/guides/parallel-queries

每个查询都有一组我们可以使用的选项，其中一个是onSuccess，可以如下使用：

const data = useQueries([{
    queryKey: 1,
    queryFn: () => axios.get(...),
    onSuccess: data => ... do something,
  },
  {
    queryKey: 2,
    queryFn: () => axios.get(...),
    onSuccess: data => ... do something,
  },
])

但我真正需要的是只有在所有查询都成功时才能执行操作。主要是：

Promise.all(fn).then(...)

然后使用该数据运行函数。

我想出了一些类似的东西

1 - 将所有成功的查询推送到useState()

onSuccess: (data) => setData((prevData) => [...prevData, data])

并设置一个useEffect：

useEffect(() => {
// run function
}, [data])

但这不起作用，因为每次查询成功时都会触发。可能会因为无限循环而中断。

2 - 为一切成功创造条件：

 if (data.every(num => num.isSuccess === true)) {
    // do something
  }

这可能有效，但对我来说看起来很笨拙。想知道是否有更好、性能更高的方法。

【问题讨论】：

标签： javascript reactjs react-hooks react-query

【解决方案1】：

想知道是否有更好、性能更高的方法。

我认为没有。 useQueries 非常笼统和无主见。对于某些用例，显示例如一个加载微调器，直到所有请求都完成，对于其他人来说，在一个请求完成后立即显示数据更有意义。这就是为什么检查 data.every 或 data.some 似乎是个好主意。

对于渲染东西，这很容易，对于实际的副作用，没有专门为此的回调，所以我认为你需要：

const allSuccess = data.every(num => num.isSuccess === true)

React.useEffect(() => {
  if (allSuccess) {
    // do your side-effect here
  }
}, [allSuccess])

根据您的用例，检查 data !== undefined 而不是 isSuccess 可能更有意义。如果后台重新获取失败，查询将进入error 状态，但缓存中仍会有（陈旧的）数据。因此，当一切都完成时，只运行效果“一次”，我会这样做：

const allSuccess = data.every(num => num.data !== undefined)

【讨论】：