reactjs - TypeError : Cannot read property 'getPosts' of undefined - useQuery hook, react 功能组件

Question

我确实尝试过搜索相同的问题，但所有这些问题都是有角度的或不相关的，
我正在尝试制作 使用 MongoDB、Express、React、Node、Graphql 和 Apollo 的社交应用 ，我正在关注 freecodecamp 的视频:Link to the video
在该视频中一切正常，但在他部署的版本中，他遇到了与我相同的错误

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
我的代码: 我正在删除指向我的 github 存储库的链接 包含整个项目: Link to githubrepo
Stack Overflow 抛出了太多的缩进问题，所以我在上面链接了我的 github 因为
代码太多

我正在使用语义 UI 进行样式设置

我正在使用 graphql 从 MongoDB 获取帖子

用于渲染数据的 Apollo Client

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

Answer 1

使调试更简单，而不是:

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

做:

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

“不是当数据”，“不总是”？？？奇怪......只有在 data 时才能定义“帖子”存在......当未定义时访问它会失败，总是......你必须检查'数据'
您可以/应该仅在以下情况下呈现项目(帖子):

!loading

和

data != undefined - if(data)或 (data && 在 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>
 )}