"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

Wondering if theres a better and more performant method out there.

我认为没有。 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)

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

How to perform action after all parallel queries are successful in "React-Query"

javascript

reactjs

react-hooks

react-query