Cannot read properties of undefined (reading 'map')

Question

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

score 1 · Accepted Answer · edited Dec 24 '22 at 18:04

1

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
  }
}

edited Dec 24 '22 at 18:04

Perceptor Dev

53
7

answered Dec 23 '22 at 21:32

Melchia

22,578
22
103
117

See if I understand what you are stating is that arguments that I have stated below need to have this arguments of `where`, `stage, and `locales` – Perceptor Dev Dec 23 '22 at 22:14
When I tested my API Playground Hygraph but getting a null saying that there no data be display but this how I got this display in my schema. – Perceptor Dev Dec 23 '22 at 22:31
1

As I already stated in my answer, I used a random id. You need to use an existing id. Check your Hygraph console. – Melchia Dec 23 '22 at 22:35
Just want let know figure out but still need to figure out what is going on with my code still having the same error message with Cannot read properties of undefined (reading 'map'). – Perceptor Dev Dec 24 '22 at 20:14
Just check the with console.log I have find that we are not getting undefined from doing an ` console.log(data.navigation);` and ` console.log(data);` – Perceptor Dev Dec 25 '22 at 00:29

Cannot read properties of undefined (reading 'map')

1 Answers1