Estoy desarrollando una pequeña aplicación next.js e intenté obtenerla de una API ( https://anilist.gitbook.io/anilist-apiv2-docs/ ). Porque quiero mostrar un conjunto de portadas de Anime.

Para hacerlo tuve que usar graphQl. Primero me gustaría lograr mostrar el nombre de algunos animes. Para practicar el uso de graphQl en next.js seguí el tutorial de esta página . Todo salió bien. No tuve ningún problema, así que probé con la API de anilist pero no tuve éxito. Traté de registrar datos lo más profundo que pude, pero no como quería.

Cuando inicio sesión haciendo console.log(medias) , logro registrar la información deseada. Pero cuando se trata de aplicar esto para mostrar cada valor, doy la vuelta. Si tienes una idea te lo agradezco. Gracias por ayudar =)

Este es el código:

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