4

Tengo este error me sale de vez en cuando, no siempre y dentro de las peticiones, la informacion si esta definida pero react asume que es undefined, no se si sea error de versiones o algo parecido

import React from 'react'
import CourseItem from '../microcomponents/CouseItem'
import { useQuery, gql } from "@apollo/client";
import './styles/CoursesList.css'
import Loading from '../microcomponents/Loading';
import { Redirect } from 'react-router-dom';

const COURSES = gql`
query Courses{
    courses{
        id
        name
    }
}`;

function CoursesList (){
  const { loading, error, data } = useQuery(COURSES)
  if(loading){
    return <Loading/>
  }
  if (error) {
    return <Redirect to="/" />
  }
  return(
        <ul className="CoursesList">
          {data.courses.map((course) => {
        return (
          <CourseItem key={course.id} title={course.name} link={course.id}/>)
        })}
        </ul>
        )
    }

export default CoursesList

Estas son mis dependencias, antes no me presentaba este error, pero no se si es debido a una mala implementacion de mi parte o solo las dependencias incorrectas.

  "dependencies": {
    "@apollo/client": "^3.3.21",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "graphql": "^15.3.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-icons": "^3.11.0",
    "react-relay": "^10.0.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^3.4.3"
  }

2 respuestas 2

2

Comentas que la respuesta está definida, y se supone que estás recibiendo algo en data, pero es probable que no sea la información esperada y solo necesitas una condición adicional para depurar:

function CoursesList (){
  const { loading, error, data } = useQuery(COURSES)
  if(loading){
    return <Loading/>
  }
  if (error) {
    return <Redirect to="/" />
  }
  // ¿data no tiene la propiedad courses?
  if(!data.hasOwnProperty('courses')) {
      // No hay cursos, hay que tratar de saber porqué
      return <div>{JSON.stringify(data)}</div>
  }
  return(
        <ul className="CoursesList">
          {data.courses.map((course) => {
        return (
          <CourseItem key={course.id} title={course.name} link={course.id}/>)
        })}
        </ul>
        )
}

Con esto podrías averiguar lo que está pasando y buscar la forma de solucionarlo. Ten en cuenta que solo es para depuración y debes evitarlo en producción, tal vez, cambiando un mensaje como "Información no disponible por el momento".

2

Ya encontré el error, esta en la dependencia "@apollo/client": "^3.3.21". Esta version genera un error en el cual se cumple esta condición que no deberia de cumplirse en ningún caso de la petición.

if(data === undefined && !loading && !error){
  console.log('tenemos un problema')
}

la ultima version compatible previa al error es la version 3.3.8

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.