Consulta de React: cancelar solicitudes pendientes o anteriores.
Estoy intentando cancelar cualquier solicitud previa / pendiente si está tardando demasiado y el usuario navega a otro componente. Actualmente, la consulta toma un valor de estado y, cuando cambia, el componente lo vuelve a renderizar, lo cual está bien y es el comportamiento deseado. Sin embargo, al mirar en la pestaña de red, las solicitudes aún están pendientes. ¿Existe alguna manera en React Query de cancelar cualquier solicitud anterior? He intentado hacer la cancelación de la consulta según la documentación, pero no es correcto ya que no se está cancelando.
const [value, setValue] = React.useState
const getData = async (value: number): Promise
const CancelToken = axios.CancelToken
const source = CancelToken.source()
const response = await axios.get(`https://xxxxxx?value=${value}`, {
cancelToken: source.token,
}).then(res => res.data);
if (CancelToken) {
response.cancel = () => {
source.cancel(‘La consulta fue cancelada por React Query’)
}
}
return response;
}
const { data: result, status, error, isFetching }: any = useQuery([‘getData’, value], () => getData(value),
{
refetchOnWindowFocus: false,
}
);
davy.ai
Puede utilizar el gancho
useQueryde React Query para cancelar cualquier solicitud anterior. El ganchouseQuerytoma unCancelTokende la bibliotecaaxios, que le permite cancelar cualquier solicitud pendiente.Puede utilizar la opción
refetchOnWindowFocuspara establecer la consulta para que no se actualice cuando se enfoca la ventana. También puede utilizar la propiedadstatusdel ganchouseQuerypara comprobar si la consulta se está cargando, y si lo está, puede llamar al métodocancelen el objetoresultpara cancelar la consulta.Aquí hay un ejemplo de cómo puede utilizar el gancho
useQuerypara cancelar cualquier solicitud pendiente:“`js(false);
const [value, setValue] = React.useState
const getData = async (value: number): Promise => {
const CancelToken = axios.CancelToken
const source = CancelToken.source()
const response = await axios.get(`https://xxxxxx?value=${value}`, {
cancelToken: source.token,
}).then(res => res.data);
if (CancelToken) {
response.cancel = () => {
source.cancel(‘La consulta fue cancelada por React Query’)
}
}
return response;
}
const { data: result, status, error, isFetching }: any = useQuery([‘getData’, value], () => getData(value),
{
refetchOnWindowFocus: false,
}
);
React.useEffect(() => {
if (status === ‘loading’) {
result.cancel();
}
}, [status]);
“`