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)

在“反应查询”中所有并行查询成功后如何执行操作

1 个答案: