En React-Query podemos usar el enlace useQueries para realizar consultas paralelas (principalmente como usar Promise.all): https://react-query.tanstack.com/guides/parallel-queries
Cada consulta tiene un conjunto de opciones que podemos usar, una de ellas es onSuccess y se puede usar de la siguiente manera:
const data = useQueries([{ queryKey: 1, queryFn: () => axios.get(...), onSuccess: data => ... do something, }, { queryKey: 2, queryFn: () => axios.get(...), onSuccess: data => ... do something, }, ])Pero lo que realmente necesito es poder realizar una acción solo cuando todas las consultas sean exitosas. Mayormente como:
Promise.all(fn).then(...)y usar esos datos para ejecutar una función después.
Se me ocurrieron algunas cosas como
1 - empujando todas las consultas exitosas a un estado de useState()
onSuccess: (data) => setData((prevData) => [...prevData, data])y configura un useEffect:
useEffect(() => { // run function }, [data])Pero esto no funcionará porque se activará cada vez que una de las consultas tenga éxito. Probablemente se romperá debido a un bucle infinito.
2 - Hacer una condición para cuando todos tengan éxito:
if (data.every(num => num.isSuccess === true)) { // do something }Esto podría funcionar, pero me parece torpe. Me pregunto si hay un método mejor y más eficaz por ahí.
Me pregunto si hay un método mejor y más efectivo por ahí.
No creo que haya useQueries de uso, es muy genérico y sin opinión. Para algunos casos de uso, tiene sentido mostrar, por ejemplo, un indicador de carga hasta que finalicen todas las solicitudes, y para otros tiene más sentido mostrar los datos tan pronto como se complete una solicitud. Es por eso que consultar con data.every o data.some parece una buena idea.
Para renderizar cosas, esto es bastante fácil, para los efectos secundarios reales no hay una devolución de llamada específica para eso, así que creo que necesitarías:
const allSuccess = data.every(num => num.isSuccess === true)
React.useEffect(() => {
if (allSuccess) {
const data = useQueries([{ queryKey: 1, queryFn: () => axios.get(...), onSuccess: data => ... do something, }, { queryKey: 2, queryFn: () => axios.get(...), onSuccess: data => ... do something, }, ])
}
}, [allSuccess])Según su caso de uso, podría tener más sentido buscar data !== undefined en lugar de isSuccess. Si falla una recuperación en segundo plano, la consulta pasará al estado de error , pero aún tendrá datos (obsoletos) en la memoria caché. Entonces, ejecutar el efecto "una vez" cuando todo se completa haría esto:
const allSuccess = data.every(num => data !== undefined === true) React.useEffect(() => { if (allSuccess) { // do your side-effect here } }, [allSuccess])