ReactJS组件文件出现Undefined错误，求GraphQL代码排查帮助

我正在通过YouTube教程学习GraphQL与ReactJS，由于教程采用旧版本概念，我的代码并非完全复制教程内容。完整代码托管在GitHub仓库：akashkeshari94/GraphQL，目前遇到Undefined错误却无从排查，恳请帮忙找出问题所在。

相关代码如下：

import { gql } from 'apollo-boost';
import { graphql } from 'react-apollo';

const getBooksQuery = gql`
{
  books{
    name
    id
  }
}
`;

function BookList(props)  {
    console.log(props);
    return (
        <div>
            <ul id="book-list">
                <li>Book Name</li>
            </ul>
        </div>
    );
}

export default graphql(getBooksQuery)(BookList);

可能的问题及解决方向 #

1. Apollo Client配置缺失
   确保你的App根组件已经被ApolloProvider包裹，并且客户端正确指向了GraphQL服务端地址。如果没有配置Provider，查询无法发送，props里的data会是undefined。

2. 未处理查询的加载/错误状态
   使用graphql高阶组件时，查询结果会注入到props.data中，但查询在加载阶段时data.books是undefined，直接访问会报错。需要先判断状态：

   function BookList(props)  {
       const { data } = props;
       if (data.loading) return <div>加载中...</div>;
       if (data.error) return <div>错误：{data.error.message}</div>;
       
       return (
           <div>
               <ul id="book-list">
                   {data.books.map(book => (
                       <li key={book.id}>{book.name}</li>
                   ))}
               </ul>
           </div>
       );
   }
   

3. 旧版依赖兼容性问题
   apollo-boost和react-apollo已停止维护，建议迁移到新版@apollo/client，使用useQuery钩子替代高阶组件，API更稳定且不易出现注入问题：

   import { gql, useQuery } from '@apollo/client';
   
   const GET_BOOKS = gql`
     query GetBooks {
       books {
         name
         id
       }
     }
   `;
   
   function BookList() {
     const { loading, error, data } = useQuery(GET_BOOKS);
   
     if (loading) return <p>加载中...</p>;
     if (error) return <p>错误：{error.message}</p>;
   
     return (
       <div>
         <ul id="book-list">
           {data.books.map(book => (
             <li key={book.id}>{book.name}</li>
           ))}
         </ul>
       </div>
     );
   }
   

4. 服务端查询异常
   用GraphiQL或Postman测试你的books查询，确认服务端能正常返回数据。如果服务端没有返回books字段，前端自然会拿到undefined。

内容的提问来源于stack exchange，提问作者lucky