如何在所有并行查询成功后执行操作"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.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)