类型错误：无法读取未定义的属性“getPosts” - useQuery 挂钩，反应功能组件

我确实尝试过寻找同样的问题，但所有这些问题要么是有角度的，要么是无关的，

我正在尝试做一个使用 MongoDB、Express、React、Node、Graphql 和 Apollo 的社交应用程序，我正在关注 freecodecamp 的视频：视频链接 https://www.youtube.com/watch?v=n1mdAPFq2Os在该视频中，一切正常，但在他的部署版本中，他遇到了与我相同的错误

react_devtools_backend.js:2450 类型错误:

无法读取未定义的属性“getPosts”

在 ae (Home.js:14) 在乔 (react-dom.生产.min.js:3274)

链接到已部署的应用程序 https://gracious-shannon-271ede.netlify.app/

My Code: 我正在删除我的 github 存储库的链接包含整个项目：链接到github 回购协议 https://github.com/lorstenoplo/merng-app

Stack Overflow 引发了太多缩进问题，所以我在上面链接了我的 github因为 代码太多

• 我正在使用语义 UI 进行样式设置
• 我正在使用 graphql 从 MongoDB 获取帖子
• 用于渲染数据的 Apollo 客户端

这是我在 Home.js 中遇到的错误：错误的屏幕截图：

使调试更简单：

常量{ 加载中， 数据：{ getPosts：帖子 } } = 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
}

这有效，但当数据存在且并不总是存在时则无效

“不是当数据”，“不是总是”？？？奇怪......只有在以下情况下才能定义“帖子”data存在...未定义时访问它会失败，总是...您必须检查“数据”

您只能/应该仅在以下情况下渲染项目（帖子）：

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