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
The error comes from your query.
From the schema it states that it has the following required arguments
where
,stage
andlocales
.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: