Tengo una aplicación de reacción que obtiene datos de una API de GraphQL. Estoy haciendo esto dentro de un gancho useEffect
. ¿Cuál es la mejor manera de implementar el manejo de errores? Por ahora, solo quiero registrar en la consola cualquier error devuelto.
Intenté usar try.. catch
, pero los errores devueltos por la API no se registran en la consola. ¿Cuál es la forma correcta de usar try/catch en useEffect
? ¿O cuál sería una mejor manera de hacer esto?
async function contactAPI() { return await axios({ url: 'https://graphqlexample.com/products/api', method: 'post', data: { query: ` QUERY GOES HERE ` } }) } function App() { const [products, setProducts] = useState([]); try { useEffect(() => { async function getData() { const resp = await contactAPI(); setProducts(resp.data.data.products); } getData(); }, []); } catch (err) { console.log("there was an error:", err); } return ( // JSX GOES HERE ); }
Debe cubrir con try-catch la línea exacta que puede causar un problema, no useEffect
ni getData
, así que intente esto en su lugar:
async function getData() { try { const resp = await contactAPI(); setProducts(resp.data.data.products); } catch (err) { console.err("there was an error:", err); } }