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](https://www.youtube.com/watch?v=n1mdAPFq2Os)
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](https://gracious-shannon-271ede.netlify.app/)

**My Code:** **I am dropping a link to my github repo** containing the whole project : [Link to github
repo](https://github.com/lorstenoplo/merng-app)

**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:**

[![error screen shot](https://i.stack.imgur.com/oVOIj.png)](https://i.stack.imgur.com/oVOIj.png)

Answer: 
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>
 )}

```
THIS WILL WORK

write data.getPosts inside the grid

const { loading ,data , error } = useQuery(FETCH\_POSTS\_QUERY);

if (error) return `Error! ${error.message}`;

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

```