Im trying to save my articles object from my graphql server to the state, but its giving me this error "too many re-renders" when I try to save them to the state
I checked with a console.log on the client and the method getNews() is giving me the correct output object with my x50 article object, but when I try to save it to the state, it crashes
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;I am not entirely familiar with @apollo/client, but useQuery like all hooks, should be in the root of your component.
You could probably do without the state and effect, something like this:
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;