Estou enfrentando dificuldades ao tentar carregar dados de uma requisição GraphQL em um componente React usando Astro. A função fetchProducts parece estar retornando os dados corretos quando testada isoladamente, mas quando tento usar esses dados no componente Header, eles nunca são populados e a mensagem "Loading..." nunca sai da tela.
Aqui está a estrutura do meu código:
// src/utils/graphql.js
const fetchProducts = async () => {
try {
const response = await fetch("https://graphql.datocms.com/", {
method: "POST",
headers: {
"Content-Type": "application/json",
Accept: "application/json",
Authorization: `Bearer ${import.meta.env.DATOCMS_API_KEY}`,
},
body: JSON.stringify({
query: `query {
allProducts {
title
description
}
}`,
}),
});
const json = await response.json();
const data = json.data.allProducts;
return data;
} catch (error) {
console.error("Error fetching products:", error);
return [];
}
};
export default fetchProducts;
// src/components/Header.jsx
import React, { useState, useEffect } from "react";
import fetchProducts from "../../utils/graphql";
export const Header = () => {
const [headerData, setHeaderData] = useState([]);
useEffect(() => {
const fetchData = async () => {
try {
const products = await fetchProducts();
setHeaderData(products);
} catch (error) {
console.error("Error fetching header data:", error);
}
};
fetchData();
}, []);
return (
<>
<header>
{headerData.length > 0 ? (
headerData.map((product, index) => (
<div key={index}>
<p>Title: {product.title}</p>
<p>Description: {product.description}</p>
</div>
))
) : (
<p>Loading...</p>
)}
</header>
</>
);
};
export default Header;
Resultado na tela: Link do repositório: https://github.com/kellysondias/morpheus
Já verifiquei a importação de fetchProducts e não encontrei erros. Além disso, adicionei logs de depuração e percebi que a função fetchData é chamada, mas headerData nunca é populado com os dados retornados pela função fetchProducts.
Alguém tem alguma sugestão de como posso resolver esse problema? Agradeço antecipadamente pela ajuda!