I am experiencing the same issue mapping a graphql query using Apollo Client. ex below
const REVIEWS = gql`
query GetReviews {
reviews {
data {
id
attributes {
title
rating
body
}
}
}
}
`;
export default function Homepage() {
const { loading, error, data } = useQuery(REVIEWS);
if (loading) return <p>Loading...</p>;
if (error) return <p>Error :(</p>;
console.log(data);
return (
<div>
{data.data.reviews.map((review) => (
<div key={review.attributes.id} className="review-card">
<div className="rating">{review.attributes.rating}</div>
<h2>{review.attributes.title}</h2>
<small>console list</small>
<p>{review.attributes.body.substring(0, 200)}...</p>
<Link to={`/details/${review.id}`}>Read more</Link>
</div>
))}
</div>
);
}