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

Question

在 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
  }

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

Answer 1

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

我认为不存在。useQueries非常通用且没有主见。对于某些用例，在所有请求完成之前显示加载旋转器是有意义的，而对于其他用例，在一个请求完成后立即显示数据更有意义。这就是为什么检查data.everyordata.some似乎是个好主意。

对于渲染事物，这相当简单，对于实际的副作用，没有专门针对此的回调，所以我认为您需要：

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

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

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

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