Tengo una función ( startLoad() ) que se ejecuta cada vez que algunos de mis datos cambian (es decir dataMayChange ). Dentro de este método, quiero ejecutar algunas consultas GraphQL (es decir, fireQuery1, fireQuery2, ...). Cada vez que mi dataMayChange cambia, quiero dejar de ejecutar startLoad y ejecutarlo nuevamente desde el principio. De esta manera, quiero evitar las consultas anteriores antes de que mis datos MayChange hayan cambiado para ser despedidos.
Aquí está mi código:
React.useEffect(() => { startLoad() // eslint-disable-next-line }, [dataMayChange]) const startLoad = async() => { await fireQuery1 await fireQuery2 await fireQuery3 await fireQuery4 }¿Alguien tiene una idea de cómo puedo lograr este comportamiento?
Lo que está buscando es una bandera o señal que pueda proporcionar a startLoad para indicarle que se detenga, y una devolución de llamada de limpieza en useEffect .
Puede hacer una bandera o señal a medida, o usar AbortController . Aquí hay un ejemplo de esto último, pero el rollo propio se vería bastante similar:
React.useEffect(() => { const controller = new AbortController(); startLoad(controller.signal); return () => { // This function is called when the data is changing and the // effect callback is about to be re-run controller.abort(); }; // eslint-disable-next-line }, [dataMayChange]); const startLoad = async (signal) => { await fireQuery1; if (signal.aborted) { return; } await fireQuery2; if (signal.aborted) { return; } await fireQuery3; if (signal.aborted) { return; } await fireQuery4; }; Eso es bastante repetitivo, probablemente quieras poner tus acciones en una matriz y recorrerla. Es difícil demostrar que, dado que fireQuery1 , etc., son obviamente solo marcadores de posición conceptuales, pero por ejemplo:
const startLoad = async (signal) => { const tasks = [doThis, doThat, doTheOther, doSomethingElse]; for (const task of tasks) { if (signal.aborted) { return; } await task(); // You can even keep track of its result to pass to the next if relevant, etc. } }; Si alguna de esas acciones involucra cosas (como fetch ) que admiten AbortController / AbortSignal , también puede pasar la señal a esas cosas.