Type Error when destructuring elements In ReactJS

That kind of destructuring is not gonna work, because at the time when it happens data is still undefined. So you’ll need to wait for it to load.

  const { loading, data } = useQuery(FETCH_POSTS);

  return loading ? (
    <h1>Loading...</h1>
  ) : (
    data.getPosts.map((post) => (
      <Grid.Column key={post.id}>
        <PostCard post={post} />
      </Grid.Column>
    ))
  );