Too many re-renders. React limits the number of renders

Question

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;

Answer 1

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;