Estoy tratando de cancelar cualquier solicitud anterior/pendiente, si tardan demasiado y el usuario navega a otro componente, actualmente la consulta toma un valor de estado, y cuando cambia, el componente se vuelve a procesar, lo cual está bien y el comportamiento deseado. . Sin embargo, mirando en la pestaña de la red, las solicitudes aún están pendientes. ¿Hay alguna forma en la consulta de reacción para cancelar cualquier solicitud anterior? Intenté cancelar la consulta según los documentos, pero no es correcto ya que no se cancela.
const [value, setValue] = React.useState<boolean>(false); const getData = async (value: number): Promise<any> => { 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('Query was cancelled by React Query') } } return response; } const { data: result, status, error, isFetching }: any = useQuery(['getData', value], () => getData(value), { refetchOnWindowFocus: false, } );No puede adjuntar .cancel a una promesa en funciones asíncronas porque las funciones asíncronas siempre devolverán una nueva Promesa sin la función de cancelación que adjuntó. Si desea adjuntar funciones de cancelación, es mejor usar el encadenamiento de promesas en lugar de funciones asíncronas.
Aún mejor, react-query admite la cancelación ahora al proporcionar un AbortSignal listo para usar, que solo necesita adjuntar a su solicitud.
con axios 0.22+ y react-query v3.30+, puede hacer:
const query = useQuery('key', ({ signal }) => axios.get('/xxxx', { signal, }) ) con eso, react-query cancelará la solicitud de red de su consulta si la consulta no se usa o si llama a queryClient.cancelQueries('key') , por ejemplo, cuando el usuario hace clic en un botón.
Debe arrojar un error basado en la respuesta en su getData(). React-Query detectará ese error y activará el evento onError.