Handle errors of API call in getStaticProps in NextJS

Question

I have multiple API calls in the getStaticProps. I want handle errors for each API call individually. How can I do that?

export async function getStaticProps(context) {
  const fund = context.params.fund;

  const avggReturnsRes = await fetch(
    https://localhost:8000/avggaut/?name=${fund}
  );
  const avggReturnsResult = await avggReturnsRes.json();

  const navPlotRes = await fetch(
    https://localhost:8000/navplot/?name=${fund}
  );
  const navPlotResult = await navPlotRes.json();


  return {
    props: {
      fund: fund,
      avggReturnsResult: avggReturnsResult,
      navPlotResult: navPlotResult,
    },
  };
}

What do you want actually??

Rahul
– Rahul

2021-08-19 08:54:01 +00:00
Commented Aug 19, 2021 at 8:54 — Rahul
– Rahul, Commented Aug 19, 2021 at 8:54
What should happen if an error occurs during each API call?

juliomalves
– juliomalves

2021-08-19 17:46:24 +00:00
Commented Aug 19, 2021 at 17:46 — juliomalves
– juliomalves, Commented Aug 19, 2021 at 17:46

sairaj · Accepted Answer · 2021-08-19 08:57:45Z

wrap your fetch calls in a try-catch block and, generally if the first request fails then control directly jumps to catch block without executing the second fetch

export const getStaticProps = async () => {
  try {
    const res = await fetch('https://example.com');
    const data = await res.json()
    if (!data) {
      return { notFound: true };
    }
    return { props: { data } };
  } catch () {
    return { notFound: true };
  }
};

If you really want to separate each request you can put them in separate try-catch blocks, although there is no reason to do that since try-catch catches only one error at a time, nevertheless, you can do this


export const getStaticProps = async () => {
  // first requst
  try {
    const res = await fetch('https://url2.com');
    const data = await res.json()
    if (!data) {
      return { notFound: true };
    }
    return { props: { data } };
  } catch (err) {
    return { notFound: true };
  }

  // Second request
  try {
    const res = await fetch('https://url2.com');
    const data = await res.json()
    if (!data) {
      return { notFound: true };
    }
    return { props: { data } };
  } catch (err) {
    return { notFound: true };
  }
};

Collectives™ on Stack Overflow

Handle errors of API call in getStaticProps in NextJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related