Tengo un proyecto React usando Graphql y Mongo. Al hacer una consulta, intento registrar los datos devueltos en la consola a través de la notación de puntos y devuelve "indefinido".
No puedo entender ¿Por qué?
Mi componente:
import { useQuery } from "@apollo/client"; import React, { useEffect } from "react"; import { GET_USER_SETTINGS } from "../graphql/getUserTimeSetting"; const UserAuthSettings = ({ isAuthenticated, toggle, user = { name: "" } }) => { const { data, loading, error } = useQuery(GET_USER_SETTINGS, { variables: { userName: user.name }, options: { awaitRefetchQueries: true, }, }); console.log(data.userTimeSetting); if (loading) return <div>Submitting...</div>; if (error) return <div>{error.message}</div>; return null; }; export default UserAuthSettings;Bien, encontré la respuesta.
Para usar o "consumir" los datos con los ganchos de Apollo/cliente, debe hacerlo una vez que se asegure de que existen los datos.
En otras palabras, el bloque de código
if (loading) return <div>Submitting...</div>; if (error) return <div>{error.message}</div>;debe venir antes de mi console.log (datos); de lo contrario, la consulta aún está en vuelo y reaccionar no pudo verificar la existencia de los datos. De ahí el error.
Fantástico, conmovedor.