Данные извлекаются из HyGraph с помощью клиента Apollo, но браузер или React не отображают данные.

Question

Я использую HyGraph для создания основного раздела работ на веб-сайте моего портфолио с помощью клиента Apollo. Данные извлекаются (я использовал серию журналов консоли и использую ?, чтобы проверить, доступна ли константа перед сопоставлением.) Я проверил элементы в инспекторе, однако по какой-то причине они появляются.

Ниже приведены фрагменты кода.

Работает.jsx

      import Tilt from "react-parallax-tilt";
import { motion } from "framer-motion";

import { useEffect, useState } from "react";
import { useQuery, gql } from "@apollo/client";

import { styles } from "../styles";
import { github } from "../assets";
import { SectionWrapper } from "../hoc";
import { projects } from "../constants";
import { fadeIn, textVariant } from "../utils/motion";
import { LOAD_PROJECTS } from "../GraphQL/Queries";

const ProjectCard = ({
  index,
  name,
  description,
  tags,
  image,
  source_code_link,
  tagsColor
}) => (
  <motion.div variants={fadeIn("up", "spring", index * 0.5, 0.75)}>
    <Tilt
      options={{
        max: 45,
        scale: 1,
        speed: 450,
      }}
      className="bg-tertiary p-5 rounded-2xl sm:w-[360px] w-full"
    >
      <div className="relative w-full h-[230px]">
        <img
          src={image}
          alt={name}
          className="w-full h-full object-cover rounded-2xl"
        />
        <div className="flex justify-end absolute inset-0 card-img_hover m-3 gap-2">
          <div
            onClick={() => window.open(source_code_link, "_blank")}
            className="black-gradient w-10 h-10 rounded-full  flex justify-center items-center cursor-pointer"
          >
            <img
              src={github}
              alt="github"
              className="w-1/2 h-1/2 object-contain"
            />
          </div>
        </div>
      </div>
      <div className="mt-5">
        <h3 className="text-white font-bold text-">{name}</h3>
        <p className="mt-2 text-secondary text-[14px]">{description}</p>
      </div>
      <div className="mt-4 flex flex-wrap gap-2">
        {tags.map((tag) => (
          <p key={tag} className={`text-[14px] ${tagsColor}`}>
            #{tag.name}
          </p>
        ))}
      </div>
    </Tilt>
  </motion.div>
);

const Works = () => {
  const { error, loading, data } = useQuery(LOAD_PROJECTS);
  const [projectsAPI, setProjectsAPI] = useState([]);

  useEffect(() => {
    if (data) {
      console.log(data.projects.length);
      setProjectsAPI(data.projects);
    }
  }, [data]);

  return (
    <>
      <motion.div variants={textVariant()}>
        <p className={styles.sectionSubText}>My Woork</p>
        <h2 className={styles.sectionHeadText}>Projects</h2>
      </motion.div>
      <div className="w-full flex">
        <motion.p
          variants={fadeIn("", "", 0.1, 1)}
          className="mt-3 text-secondary text-[17px] max-w-3xl leading-[30px]"
        >
          This section showcases a selection of my notable projects,
          demonstrating my expertise in web development, game development, and
          XR Development. These projects highlight my ability to deliver
          high-quality solutions, collaborate effectively with cross-functional
          teams, and leverage various technologies to create innovative and
          user-centric applications.
        </motion.p>
      </div>

      <div className="mt-20 flex flex-row gap-7">
        {projectsAPI?.map((project) => {
          console.log(project);
          console.log(project.tags.split(","))
          return (
            <ProjectCard
              key={project.id}
              index={project.id}
              name={project.name}
              description={project.description}
              tags={project.tags.split(",")}
              image={project.image.url}
              source_code_link={project.source_code_link ? project.source_code_link : `https://github.com` }
              tagsColor={project.tagsColor}
            />
            // <img className=" w-[600] h-96" src={project.image.url}></img>
          );
        })}
      </div>
    </>
  );
};

export default SectionWrapper(Works, "work");

Приложение.jsx

      import { BrowserRouter } from "react-router-dom";
import {
  About,
  Contact,
  Experience,
  Feedbacks,
  Hero,
  Navbar,
  Tech,
  Works,
  StarsCanvas,
} from "./components";

import {
  ApolloClient,
  HttpLink,
  InMemoryCache,
  ApolloProvider,
  from,
} from "@apollo/client";

import { onError } from "@apollo/client/link/error";

const errorLink = onError(({ graphqlErrors, networkError }) => {
  if (graphqlErrors) {
    graphqlErrors.map(({ messages, location, path }) => {
      alert(`Graphql error ${messages}`);
    });
  }
});

const link = from([
  errorLink,
  new HttpLink({
    uri: "<HERE I AM PASSING MY HYGRAPH ENDPOINT",
  }),
]);

const client = new ApolloClient({
  cache: new InMemoryCache(),
  link: link,
});

function App() {
  return (
    <BrowserRouter>
      <div className="relative z-0 bg-primary">
        <div className="bg-hero-pattern bg-cover bg-no-repeat bg-center">
          <Navbar />
          <Hero />
        </div>
        <About />
        <Experience />
        <Tech />
        <ApolloProvider client={client}>
          <Works />
        </ApolloProvider>
        <Feedbacks />
        <div className="relative z-0">
          <Contact />
          <StarsCanvas />
        </div>
      </div>
    </BrowserRouter>
  );
}

export default App;

Данные в инспекторе появляются

Я подозреваю, что браузер сначала отображает страницу, а затем получение данных завершается. Я получаю данные из самого Works.js. Это может быть что-то совсем простое или что-то со стилем, но я только начал с React, поэтому не совсем уверен, буду всегда благодарен за любые подсказки :)

Я попробовал обойти это, сохранив данные в локальном файле, и каким-то образом это сработало и отобразилось.