Estoy tratando de guardar el objeto de mis artículos de mi servidor Graphql en el estado, pero me da este error "demasiadas renderizaciones" cuando trato de guardarlas en el estado.
Verifiqué con un archivo console.log en el cliente y el método getNews() me está dando el objeto de salida correcto con mi objeto de artículo x50, pero cuando trato de guardarlo en el estado, falla
import React from "react"; import Layout from "../components/Layout"; import Article from "../components/Article"; import { useState, useEffect } from "react"; import { gql, useQuery } from "@apollo/client"; const News = () => { const [articles, setArticles] = useState([]); const getNews = () => { const LATEST_NEWS = gql` query { getNews { title } } `; const { data } = useQuery(LATEST_NEWS); const myArticles = data.getNews; return myArticles; }; useEffect( () => { setArticles(getNews()) },[]) console.log(articles) return ( <> <Layout page="News" /> <h1 className="text-xl text-center text-gray-800 font-bold m-8"> The latest news about crypto! </h1> {/* <div className="grid grid-cols-1 gap-3 text-center m-8 md:grid-cols-3"> {articles.map((article) => ( <Article key={article.id} article={article} /> ))} </div> */} </> ); }; export default News;No estoy completamente familiarizado con @apollo/client, pero useQuery como todos los ganchos, debe estar en la raíz de su componente.
Probablemente podría prescindir del estado y el efecto, algo como esto:
import React from "react"; import { gql, useQuery } from "@apollo/client"; import Layout from "../components/Layout"; import Article from "../components/Article"; const LATEST_NEWS = gql` query { getNews { id title } } `; const News = () => { const { data } = useQuery(LATEST_NEWS); const articles = data.getNews; if (!articles) { return null; // Or loading, or something else } return ( <> <Layout page="News" /> <h1 className="text-xl text-center text-gray-800 font-bold m-8"> The latest news about crypto! </h1> <div className="grid grid-cols-1 gap-3 text-center m-8 md:grid-cols-3"> {articles.map((article) => ( <Article key={article.id} article={article} /> ))} </div> </> ); }; export default News;