Dado que la consulta de reacción se basa en gran medida en el enfoque declarativo , el manejo de errores que veo en todos los ejemplos se parece a esto:
function Todos() { const { isLoading, isError, data, error } = useQuery('todos', fetchTodoList) if (isLoading) { return <span>Loading...</span> } if (isError) {//If there is an error, render different JSX return <span>Error: {error.message}</span> } return ( <ul> {data.map(todo => ( <li key={todo.id}>{todo.title}</li> ))} </ul> ) }Pero, ¿qué pasa si solo quiero mostrar una alerta, en caso de error? O tal vez, estoy usando alguna interfaz de manejo de errores, que tiene un disparador imperativo. Algo como esto:
if (isError) alert(`An error has occurred: ${error.message}`)En este caso, recibo dos alertas . Algo hace que el componente se vuelva a renderizar, lo que por supuesto conduce a un manejo de errores "duplicados".
¿Por qué es esto importante para mí? Porque es posible que mi lógica de manejo de errores no se base en la representación de algún JSX específico dentro de mi componente, sino en algún disparador manual de una sola vez. La alerta es solo un ejemplo básico.
¡Cualquier sugerencia será muy apreciada!
¿Has intentado usar la devolución de llamada onError ?
Se parece a esto :
const useTodos = () => useQuery(['todos'], fetchTodos, { // ⚠️ looks good, but is maybe _not_ what you want onError: (error) => toast.error(`Something went wrong: ${error.message}`), }) Verá, la devolución de llamada onError en useQuery se llama para cada Observer , lo que significa que si llama a useTodos dos veces en su aplicación, obtendrá dos notificaciones de error, aunque solo una solicitud de red falla