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

4
votes

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:

error screen shot

5
reactjsgraphqlreact-hooksapollo-clientreact-functional-component
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
apollographql.com/docs/react/api/react/hooks/#example-2 apollographql.com/docs/react/data/queries/#executing-a-query – xadm
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
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
if(data) console.log(posts); before return – xadm

5 Answers

3
votes

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

use this code like this

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

1
votes

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);
0
votes
const { loading, data: { getPosts: posts } = {} } = useQuery(FETCH_POSTS_QUERY)

This should solve the problem

0
votes

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>