Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – why vite makes my react app empty page when the data fetch fails, and I have element to render on error?

why vite makes my react app empty page when the data fetch fails, and I have element to render on error?

I don’t get the real cause, but It only works if the code is all perfect.

It will get rid of all the UI, even if there is misspelled HTML tag on the source code

API fetch fails, empty page,,,
undefined variable used, empty page,,,
iteration on non-array variable used, empty page

NOT EVEN THE NAVBAR AND OTHER LAYOUTS RENDERD,

Why is this happening?

LOOK

import { Link } from "react-router-dom";
import { useQuery, gql } from "@apollo/client";


const REVIEWS = gql`
  query GetReviews{
    reviews {
    data {
      id,
      attributes{
        title
        rating
        body
      }
    }
  }
  }
`

export default function Homepage() {

  const { isLoading, error, data } = useQuery(REVIEWS)

  if (isLoading) return <p className="text-center text-orange-600 text-xl">Loading...</p>;
**** if (error) return <p className="text-center text-orange-600 text-xl">Error: {error}</p>;

  return (
    <div className="w-3/4 mx-auto bg-slate-300 p-5 pt-2 mt-3 rounded-md">
      <h5 className="mx-auto font-bold text-5xl text-white px-24 rounded-2xl bg-blue-600 text-center mb-5 w-fit">Reviews</h5>

      {data&&data.reviews.data.map(review => (
        <div key={review.id} className="max-w-3/4 rounded overflow-hidden shadow-lg bg-slate-600 mb-5">
          <p className="text-white bg-pink-600 w-fit p-5 rounded-xl text-3xl mb-2">{review.attributes.rating}</p>
          <div className="px-6 py-4">
            <div className=" text-white font-bold text-xl mb-2">{review.attributes.title}</div>
            <p className="text-white text-base">{review.attributes.body[0].children[0].text.substring(0,400)}...</p>
            <Link to={`/details/${review.id}`} className="text-green-500 text-base">Read More</Link>
          </div>
        </div>
      ))}
    </div>
  );
}

If the server isnot running, the DOM will show nothing,
But It was supposed to render the code marked with **** above

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I get it now, I tried to render the error object, and the whole object is not allowed to be rendered by react.

    this error makes my app blank page error.message fixes the issue THANK YOU


  2. 0

    If the Error {error} is not printed, it’s possible that your data is being fetched successfully, however, you’re accessing it incorrectly.

    Check your browser’s Dev Tools (Ctrl + Shift + I) and check the errors logged in the Console tab.

    Please check if data is in the right format and that the below accesses are not leading to any undefined access:

    data.reviews.data
review.attributes.rating
review.attributes.title
review.attributes.body[0]...

    Either the data, reviews or some attribute might be undefined/missing.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search