userData? about classsed-graphql-mern-apollo

[cannicombustiva]

I solved the problem avoiding destructuring:
const { loading, data } = useQuery(FETCH_POSTS_QUERY);

and then:
<Grid.Row> {loading ? ( <h1>Loading Posts...</h1> ) : ( data.getPosts.map(post => ( <Grid.Column key={post.id}> <PostCard post={post} /> </Grid.Column> )) )} </Grid.Row>

if we get data from destructuring at the beginning of the component, it' s like to write something like:
const allQuery = useQuery(); const loading = allQuery.loading; const posts = allQuery.data.getPosts.posts;

Now what do we get if 'data' in the last line is undefined? getPosts of undefined;

[daksharajkamal]

Just create a variable and fetch that data in that variable and I'll solve your error.

function Home() {
let posts = "";
const { loading, data } = useQuery(FETCH_POSTS_QUERY);
if (data) {
posts = data.getPosts;
}
return (

<Grid.Row className="page__title">

Recent Posts

</Grid.Row>
<Grid.Row>
{loading ? (

Loading...

) : (
posts &&
posts.map((post) => (
<Grid.Column key={post.id} style={{ marginBottom: 20 }}>

</Grid.Column>
))
)}
</Grid.Row>

);
}

[jhaji2911]

to solve this I think you'll have to pass Home() an empty object as an argument and then assign it to the destructured data :
function Home(arg = {}) {

const {user} = useContext(AuthContext);
 const {loading, data:{getPosts : posts}=arg} = useQuery(FETCH_QUERY);

[vincedesigns]

Please help!

[lacykerel]

Hi Vince I eventually figured out how to resolve my issue. I would check to make sure posts is available in the data object that you're destructuring

[michaelpaulcuccia]

I am at this juncture - TypeError: Cannot read property 'getPosts' of undefined
and really have no idea what or why this is happening since I am following a tutorial to LEARN how to do this.
Any help would be appreciated.

[kholub1989]

Same problem - TypeError: Cannot read property 'getPosts' of undefined

[kholub1989]

Finally, I got it.

The problem with TypeError: Cannot read property 'getPosts' of undefined
is in the CLIENT side dependencies with the new version "@apollo/react-hooks": "^4.0.0", somehow it returns first undefined and after an Object.
The solution is using the oldest version "@apollo/react-hooks": "0.1.0-beta.7", or using @apollo/client.

[HSEKOL1025]

use {useEffect and useState } to solve this..

const {loading, data}= useQuery(FETCH_POSTS_QUERY);
const [Posts, setPosts] = useState([]);

useEffect(() => {
    if(loading === false && data){
        setPosts(data.getPosts);
        
    }
}, [loading, data])

all the posts are now in Posts array.

[louay007]

how find solution i need it !!