Cannot read properties of undefined (reading 'map')

924 views Asked by At

I have tried using debug methods such as && and ?, as well as checking for undefined, but none of these have helped me resolve the issue. If anyone could provide some insight as to why this might be happening and how I can fix it, I would greatly appreciate it.

Where building the backend is Hygraph.

I'm trying to fetch data from Hygraph API endpoint but the give 400 error message and team at Hygraph told that something wrong with my query but every time checked in the terminal or console the the data I can see the data not been display on the front-end.

on the client-side:

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>

  );
}

This file is in the index.js

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

The actual error from useQuery is:

Response not successful: Received status code 400

1

There are 1 answers

5
Melchia On BEST ANSWER

The error comes from your query.       "message": "input:1: Field "navigation" argument "where" of type "NavigationWhereUniqueInput!" is required, but it was not provided.\n"

From the schema it states that it has the following required arguments where, stage and locales.

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

Here an example of a working. I just used a random id if you don't know where to locate an id for this component will be at Content Section in Hygraph.com:

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