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

Question

我确实尝试搜索相同的问题，但所有这些都是 angular 或不相关的，

我正在尝试使用 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

我的代码： 我正在将 link 放到我的 github 存储库 中，其中包含整个项目： Link 至 github 回购

Stack Overflow 引发了太多缩进问题，所以我 link编辑了上面的 github 代码太多

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

我正在使用 graphql 从 MongoDB
获取帖子
用于渲染数据的 Apollo 客户端

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

Answer 1

您需要像这样定义查询操作：

export const FETCH_POSTS_QUERY = gql`
  query GetPosts {
    getPosts {
      // fields
    }
  }
`

或者，您可以使用 alias 轻松引用它们。

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);

Answer 2

使调试更简单，而不是：

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

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

您 can/should 仅在以下情况下呈现项目（帖子）：

!loading

AND

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

Answer 3

像这样使用此代码

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

Answer 4

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

这应该可以解决问题

Answer 5

这会起作用

在网格内写data.getPosts

const { 加载 , 数据 , 错误 } = useQuery(FETCH_POSTS_QUERY);

if（错误）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>

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

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

reactjs

graphql

apollo-client

react-hooks

react-functional-component