我试过使用调试方法，如&&和？，以及检查未定义，但这些都不能帮助我解决这个问题。如果有人能提供一些见解，为什么会发生这种情况，我可以修复它，我会非常感谢。

其中构建后端是Hygraph。

我试图从Hygraph API端点获取数据，但给予400错误消息，Hygraph团队告知我的查询有问题，但每次在终端或控制台检查数据时，我都可以看到数据未显示在前端。

在客户端：

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>

  );
}

此文件位于索引.js中

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

useQuery的实际误差为：
响应不成功：接收状态代码400