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: 
use this code like this

const { loading, data: { posts } = {} } = useQuery(FETCH\_POSTS\_QUERY);
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>

```