TypeError: Cannot read property 'getPosts' of undefined - useQuery hook, react Functional Components

Question

I did try searching for the same question but all of those were of either angular or unrelated,

I am trying to make a Social app using MongoDB, Express, React, Node, Graphql with Apollo, I am following a video from freecodecamp : Link to the video In that video everything worked fine but in his deployed version he is having the same error as mine

react_devtools_backend.js:2450 TypeError:

Cannot read property 'getPosts' of undefined

at ae (Home.js:14) at Jo (react-dom.production.min.js:3274)

link to the deployed app

My Code: I am dropping a link to my github repo containing the whole project : Link to github repo

Stack Overflow was throwing too many indentation issues so i have linked my github above as there is too much of code

• I'm using semantic-ui for styling
• I'm using graphql the fetch posts from MongoDB
• Apollo Client for rendering data

This is the error I am getting in the Home.js: Screen Shot of the error:

Answer 1

Make it simpler to debug, instead:

const { loading, data: { getPosts: posts } } = useQuery(FETCH_POSTS_QUERY);

do:

const { data, loading, error } = useQuery(FETCH_POSTS_QUERY);
if(data) {
  console.log(data);
  const { getPosts: posts } = data;
}
if(error) {
  console.log(error);
  return "error"; // blocks rendering
}

this works but not when data is there and not always

"not when data", "not always"??? weird ... 'posts' can be defined only if data exists ... accessing it when undefined will fail, always ... you must check 'data'

You can/should render items (posts) ONLY when:

• !loading

AND

• data != undefined - if(data) or (data && in JSX

   {loading && <h1>Loading posts..</h1>}
   {data && (
     <Transition.Group>
       {posts &&
         posts.map((post) => (
           <Grid.Column key={post.id} style={{ marginBottom: 20 }}>
             <PostCard post={post} />
           </Grid.Column>
         ))}
     </Transition.Group>
   )}