I'm currently working on a small Next.js application and I attempted to fetch data from an API (). My goal is to display a collection of Anime covers.
In order to achieve this, I had to implement GraphQL. Initially, I wanted to display the names of some animes. To get hands-on experience with GraphQL in Next.js, I followed a tutorial on this particular page. Everything worked smoothly in the tutorial, but when I tried using the AniList API, I faced difficulties. Despite trying to log as much data as possible, I couldn't get it exactly as I desired.
While logging using console.log(medias), I did successfully log the necessary information. However, when it came to displaying each value, I got stuck. If you have any suggestions, I would greatly appreciate the help.
Here's the code snippet:
import { useQuery, gql } from "@apollo/client";
const QUERY = gql`
query GetFirstsThree{
Page(page: 1, perPage: 3) {
media {
id
coverImage {
medium
}
title {
userPreferred
}
}
}
}
`;
export default function AnimList() {
const { data, loading, error } = useQuery(QUERY);
if (loading) {
return <h2>Loading...</h2>;
}
if (error) {
console.error(error);
return null;
}
const medias = data.Page.media;
return (
<div className="mainGrid">
<h1>Hello World</h1>
{medias.map((value) => {
<div key={value.id} className="card">
<h3>
{value.title.userPreferred}
</h3>
</div>
})}
</div>
);
}