React+Hygraph数据获取异常：400错误及map未定义问题求助

问题概述 #

• 使用Apollo Client调用Hygraph API时，useQuery返回Response not successful: Received status code 400错误，Hygraph团队提示查询存在问题，但控制台能看到数据却无法在前端展示
• 出现Cannot read properties of undefined (reading 'map')错误，尝试过&&、可选链?.等调试手段仍无法解决

原代码参考 #

客户端组件代码 #

import React from 'react';
import '../main-comp/navigation.css';
import { useQuery, gql } from '@apollo/client'; 
import { BrowserRouter as Router, Link, Switch, Route } from 'react-router-dom';
import logo from '../assets/images/sbr-2020-logo.svg';
import Product from '../Product.js';


const myQuery = gql`
  {
    navigation {
      id
      title
      slug
    }
  }
`;

export default function App() {

  const { loading, error, data } = useQuery(myQuery);
  
  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;

  
  return (
    <div className='navigation'>
      <div className='full_width_container'>
        <div className='wrapper'>
        <Router>
          <React.Fragment>
            <nav>
              <div className='nav_groups logo'>
                <img src={logo} alt='main logo'/>
              </div>
              
              <ul className='nav_groups nav_unorder'>
                {data && data.navigation.map(({ id, title, slug }) => (
                  <li key={id}>
                    <Link to={`/products/${slug}`}>
                      {title}
                    </Link>
                  </li>
                ))}
              </ul>

              <Switch>
                <Route path="/products/:slug">
                  <Product products={data && data.navigation} />
                </Route>
              </Switch>

              <div className='nav_groups'>
                <p>six</p>
              </div>
            </nav>
          </React.Fragment>
        </Router>
      </div>
    </div>
  </div>

  );
}

Apollo Client配置（index.js） #

const client = new ApolloClient({
  uri: 'https://api-us-east-1.hygraph.com/v2/clb3o5dwz01xl01ui9wsachqg/master',
  cache: new InMemoryCache(),
});

原因分析 #

1. 400状态码错误：

   • Hygraph API需要身份认证，当前客户端未携带API密钥，导致请求被拦截，虽然网络请求可能返回部分数据，但Apollo将400状态判定为错误，阻断了数据渲染流程
   • GraphQL查询字段可能不符合Hygraph schema定义，比如navigation应为复数navigations（集合类型），单个navigation可能返回对象而非数组，既触发查询错误，也导致后续map报错

2. map读取undefined错误：

   • 若data.navigation是对象而非数组，调用map直接报错；即使是数组，路由切换或组件重新渲染时，data可能短暂处于undefined状态，单纯的&&无法完全覆盖所有场景
   • 错误处理逻辑过于绝对，一旦useQuery返回error就直接渲染错误提示，忽略了部分情况下data可能已返回的情况

修复方案 #

1. 添加Hygraph API认证 #

Hygraph的只读API密钥需加入请求头，修改Apollo Client配置：

import { ApolloClient, InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  uri: 'https://api-us-east-1.hygraph.com/v2/clb3o5dwz01xl01ui9wsachqg/master',
  cache: new InMemoryCache(),
  headers: {
    // 替换为你的Hygraph项目只读API密钥（从项目设置>API访问中获取）
    Authorization: `Bearer YOUR_HYGRAPH_READ_ONLY_KEY`,
  },
});

2. 修正GraphQL查询字段 #

确认Hygraph schema中集合名称，若为复数则调整查询：

const myQuery = gql`
  {
    navigations { # 改为复数形式，匹配Hygraph中的集合类型
      id
      title
      slug
    }
  }
`;

3. 完善数据安全访问逻辑 #

• 给data设置默认值，避免undefined：

const { loading, error, data = { navigations: [] } } = useQuery(myQuery);

• 使用可选链+空值合并替代&&，确保安全调用map：

<ul className='nav_groups nav_unorder'>
  {data?.navigations?.map(({ id, title, slug }) => (
    <li key={id}>
      <Link to={`/products/${slug}`}>
        {title}
      </Link>
    </li>
  ))}
</ul>

• 调整错误处理，保留数据渲染可能性：

if (loading) return <p>Loading...</p>;
if (error) {
  console.error('查询错误详情:', error);
  // 不直接返回错误页面，继续尝试渲染已有数据
}

4. 路由组件数据传递优化 #

传递products时确保为数组类型：

<Route path="/products/:slug">
  <Product products={data?.navigations || []} />
</Route>

同时在Product组件内部也要对products做空值检查，避免内部报错。

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