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:

READ DOCS! 'data' CAN be undefined when in loading state ... `if(loading) { return "loading" };` before main return (and destructuring or any acces to deeper 'data' property) prevents this kind of errors — xadm, Nov 12 '20 at 09:47
Can you please help me with the code, like can you post the code as answer? — Gayatri Dipali, Nov 12 '20 at 11:18
https://www.apollographql.com/docs/react/api/react/hooks/#example-2 https://www.apollographql.com/docs/react/data/queries/#executing-a-query — xadm, Nov 12 '20 at 11:23
I followed the docs now i am rendering the code conditionally but still facing the same error — Gayatri Dipali, Nov 12 '20 at 12:02
ehhhh, look at network tab - response contains error - bad data, bad results ... `error` can be derived from hook, too and should block rendering like loading — xadm, Nov 12 '20 at 12:08
nothing like that everything has a status code of 304 and no error — Gayatri Dipali, Nov 12 '20 at 12:11
should be 200 for POST, always ... "Cannot return null for non-nullable field Post.username." 54-th item is nulled ... render jsoned 'posts' (or insert 'debugger' before return) to check it ... disable minification, it's hard to check where points error displayed in console — xadm, Nov 12 '20 at 12:34
code please, I am a beginner and hence it's for me to understand what you are trying to say — Gayatri Dipali, Nov 12 '20 at 12:38
in debugger? 'data' can be undefined at first (run - F5), later, after response (and 2nd rendering) it will be filled with data this should show array 'posts' (if no error) — xadm, Nov 12 '20 at 12:58
no use same error I think I should just **drop this project**, anyways **I am really sorry** to waste such a huge time of yours @xadm and thanks for bearing me for such a long time. — Gayatri Dipali, Nov 12 '20 at 13:11

xadm · Accepted Answer · 2020-11-12T13:55:00.180

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

**Thanks your debugging trick worked** now I am able to get know what actually the error is, I am getting network errors that is the issue by the line in which you wrote return error — Gayatri Dipali, Nov 12 '20 at 13:41

score 2 · Answer 2 · answered Jan 19 '21 at 21:49

2

use this code like this

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

answered Jan 19 '21 at 21:49

Miles Ryker Odazie

21
1

usable ... for one depth level only – xadm Jan 19 '21 at 22:23
Some people might need a bit more explanation on [object destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#object_destructuring) to better understand your answer. – Jacob Smit Jan 20 '21 at 00:16
it's needed to define data as an object. sets the default as an empty object which was the old behaviour. – Miles Ryker Odazie Jan 21 '21 at 13:42
old? HOCs? ... if you're refactoring to hooks then you can use new behaviour (undefined `data`) - you can use `if(!data)` as general not-ready condition, not relying on some, deeper (also undefined) prop – xadm Jan 21 '21 at 14:19

Joseph D. · Answer 3 · 2020-11-12T07:15:23.627

1

You need to define the query operation like:

export const FETCH_POSTS_QUERY = gql`
  query GetPosts {
    getPosts {
      // fields
    }
  }
`

Alternatively, you can make use of alias to easily reference them.

export const FETCH_POSTS_QUERY = gql`
  query GetPosts {
    posts: getPosts {
      // fields
    }
  }
`

const {
  loading,
  data: { posts } // uses alias directly. no need to rename
} = useQuery(FETCH_POSTS_QUERY);

edited Nov 12 '20 at 07:15

answered Nov 12 '20 at 07:01

Joseph D.

11,804
3
34
67

Now i am getting this error : `TypeError: Cannot read property 'posts' of undefined` – Gayatri Dipali Nov 12 '20 at 07:09
@GayatriDipali, updated the answer to explicitly show a complete gql statement. – Joseph D. Nov 12 '20 at 07:15
it worked for me just for one minute and now it's throwing the same error – Gayatri Dipali Nov 12 '20 at 07:29
It may be unrelated to `Home.js`. Maybe `SinglePost.js`? – Joseph D. Nov 12 '20 at 07:31

score 1 · Answer 4 · edited Jun 07 '21 at 02:38

1

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

This should solve the problem

edited Jun 07 '21 at 02:38

Pawara Siriwardhane

1,873
10
26
38

answered Jun 06 '21 at 17:40

Samiul

21
1

score 0 · Answer 5 · answered Jun 17 '21 at 03:31

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>

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

5 Answers5

Linked