Estoy usando nextjs y apollo por primera vez y simplemente estoy tratando de usar .map para iterar sobre los resultados de la base de datos.
Aquí está mi código de componente:
import { gql, useQuery } from "@apollo/client" import Link from "next/link" import ErrorMessage from "../layout/ErrorMessage" export const ALL_COURSES_QUERY = gql` query getCourses($limit: Int, $field: String!, $order: Order!) { courses(limit: $limit, sort: { field: $field, order: $order }) { courseFeed { id title videos { title } creator { id lastName } sections { title } ratings { id } deletedAt } pageInfoCourse { nextPageCursor hasNextPage } } } ` export const allCoursesQueryVars = { limit: 10, field: "title", order: "ASC", } export default function CourseList() { const { loading, error, data } = useQuery(ALL_COURSES_QUERY, { variables: allCoursesQueryVars, }) if (error) return <ErrorMessage message="Error loading courses." /> const { courses } = data console.log(courses) // see output below return ( <section> <ul> {courses.map((course) => ( // this does not work <li key={course.id}> <Link href={{ pathname: "/courses/[slug]", query: { slug: course.slug }, }}> <a>{course.title}</a> </Link> <p>{course.creator}</p> </li> ))} </ul> </section> ) }salida de la consola
{ __typename: 'CourseFeed', courseFeed: [ { __typename: 'Course', id: '607c1f1201509f26b866cbba', title: 'Kurs Eins', videos: [Array], creator: [Object], sections: [Array], ratings: [Array], deletedAt: null } ], pageInfoCourse: { __typename: 'PageInfoCourse', nextPageCursor: null, hasNextPage: false } }Mensaje de error
TypeError: cursos.mapa no es una función
Me gustaría iterar sobre la matriz courseFeed para usar los objetos del curso en mi página. Estaría muy agradecido por cualquier tipo de ayuda!!
En los datos que ha proporcionado, está tratando de mapear los courses como si fuera una matriz, pero claramente no lo es. courses es un objeto que contiene una propiedad courseFeed que es una matriz. Esto debería funcionar:
<ul> {courses.courseFeed.map((course) => ( {/* More stuff */} </ul>Editar
Ha indicado en los comentarios que está obteniendo un Error: Objects are not valid as a React child cuando aplica la corrección anterior.
Ese mensaje de error te dice exactamente cuál es el problema. course.creator no es un elemento React, cadena o indefinido. Es un object (que podemos ver en el mensaje de registro que publicó en la pregunta), que React no puede usar como elemento secundario, lo que significa que la línea
<p>{course.creator}</p>es inválido.
Aunque el mensaje de registro en su pregunta no nos da ninguna pista sobre la estructura de ese objeto, el mensaje de error en sus comentarios sí lo hace. object with keys {__typename, id, lastName} . Supongo que probablemente desee mostrar el apellido del creador, por lo que deberá modificar esa línea para
<p>{course.creator.lastName}</p>