Handling errors in useEffect when fetching data from an API

Question

I have a react app that is fetching data from a GraphQL API. I'm doing this inside a useEffect hook. What is the best way to implement error handing? For now I just want to console log any returned errors.

I tried using try.. catch, but any errors returned from the API are not being console logged. What is the correct way of using try/catch in useEffect? Or what would be a better way of doing this?

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
  );
}

I love it when my code comes back to haunt me :)

Andy
– Andy

2021-10-31 11:57:59 +00:00
Commented Oct 31, 2021 at 11:57 — Andy
– Andy, Commented Oct 31, 2021 at 11:57
I've seen this code before. Isn't it Link

DecPK
– DecPK

2021-10-31 12:02:11 +00:00
Commented Oct 31, 2021 at 12:02 — DecPK
– DecPK, Commented Oct 31, 2021 at 12:02

Serhii · Accepted Answer · 2021-10-31 11:57:39Z

1

You should cover with try-catch the exact line which may cause a problem, not a useEffect nor getData, so try this instead:

async function getData() {
  try {
    const resp = await contactAPI();
    setProducts(resp.data.data.products);
  } catch (err) {
    console.err("there was an error:", err);
  }
}

answered Oct 31, 2021 at 11:57

Serhii

4393 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Handling errors in useEffect when fetching data from an API

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related