Невозможно прочитать свойства неопределенного (чтение «карты»)

Question

Я пробовал использовать методы отладки, такие как && и ?, а также проверять наличие неопределенных значений, но ни один из них не помог мне решить проблему. Если кто-то может дать некоторое представление о том, почему это может происходить и как я могу это исправить, я был бы очень признателен.

Где создание бэкэнда — это Hygraph.

Я пытаюсь получить данные из конечной точки API Hygraph, но сообщение об ошибке дает 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>

  );
}

Этот файл находится в index.js

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

Фактическая ошибка отuseQueryявляется:

Ответ не удался: получен код состояния 400

Answer 1

Ошибка возникает из-за вашего запроса.<img alt=' "message": "input:1: Поле "navigation" аргумент "where" типа "NavigationWhereUniqueInput!" требуется, но он не был предоставлен.\n" ' src="https://i.stack.imgur.com/ahADd.png"/>

Из схемы указано, что она имеет следующие обязательные аргументыwhere,stageиlocales.

      navigation(
where: NavigationWhereUniqueInput!
stage: Stage! = PUBLISHED
locales: [Locale!]! = [en]
): Navigation

Вот пример рабочего. Я просто использовал случайный идентификатор, если вы не знаете, где найти идентификатор для этого компонента, он будет в разделе контента на Hygraph.com:

      query getNavigation {
  navigation(where: {id: "abc123"}, stage: PUBLISHED, locales: [en]) {
    id
    title
    slug
  }
}