Next.js Discord

Discord Forum

Revalidate with Error 500

Unanswered
Asiatic Lion posted this in #help-forum
Open in Discord
Asiatic LionOP
Hi, in the page.tsx I have a fetch request with a revalidate every 10s. The call expects some product information, but if the product isn't available anymore, the backend sends an 500 error back. I read in the documentation that if an error is thrown, the revalidate will get the old data. How can I force the revalidate to accept the new data. Or is it better to change the backend to send a different type error.

11 Replies

if you want to display a "no data" page, then do something like
try {
  const data = await getData();
  return <Render data={data} />;
} catch {
  // no data, backend sends 500
  return <NoData />;
}
then the server function itself won't throw and hence the "new data" <NoData /> is displayed
Asiatic LionOP
I am recieving a body with a 500 error:

{
"errorCode": 500,
"errorMessage": "Product not found or inactive"
}
joulev
yeah so you just handle it like normal
Asiatic LionOP
In dev envoirement it works, once i build it, it gets the existing data and if i disable the product it ignores the error and still shows the old data
joulev
how do you currently handle it?
Asiatic LionOP
export default async function ProductDetailPage( params:  { params: { id: string } }) {
  const data: ProductEndpoint = await fetchData(`/product/${params['params']['id']}`, 'GET', {}, '', 10);

  return (
    <Layout menu={true}>
      {!data['errorMessage'] ? (
        <div className={styles['category-product-detail-page-div']}>
          <div className={styles['main-image']}>
            <Image
              className={styles['main-image']}
              src={data['headerImageUrl']}
              alt="category_image"
              width={500}
              height={300}
              layout="responsive"
            />
          </div>
          <h2>{data['title']}</h2>
          <div className={styles['description-text']}>
            {htmlParser(data['description'])}
          </div>
          <ProductPageForm data={data} />
        </div>
      ) : (
        <div>
          <p>Product not found, go back</p>
          <Link href="/categories">
            <button className={styles['big-buttons']}>Back</button>
          </Link>
        </div>
      )}
    </Layout>
  )
}
export async function fetchData(url: string, method = 'GET', body?: object, token?: string, caches: number | false = 0 ) {

  const header: HeadersInit & { token?: string } = {
    "Content-Type": "application/json",
  }

  if (token !== '' && token) {
    header['token'] = token;
  }

  const fetchHeaders: RequestInit = {
    method: method,
    headers: header,
    next: { revalidate: caches }
  }

  if (method === 'POST') {
    fetchHeaders.body = JSON.stringify(body);
  }

  try {
    let res = await fetch('URL' + url, fetchHeaders);

    if(res.status === 500) {
      throw "something went wrong"
    }

    if (method === 'POST') {
      return res;
    }
    return await res.json();
  }
  catch(error: any) {
    return error
  }
}
i asked the backend guy to change it to an 404 error, Still not working