Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Projeto] Problema ao carregar dados de uma requisição GraphQL em um componente React + Astro

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: Printscreen mostrando o resultado do código na tela ("Loading...")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!

1 resposta
solução!

Olá Kellyson. Tudo bem?

Já que a função fetchProducts está funcionando corretamente, mas os dados não estão sendo exibidos no componente Header. Você pode tentar algumas dessas sugestões:

  1. Verifique a Resposta da API: Certifique-se de que a API está retornando os dados esperados. Você pode fazer isso adicionando um console.log logo após a linha onde você define const data = json.data.allProducts; para verificar o que está sendo retornado pela API.

  2. Estado Inicial: O estado inicial de headerData é um array vazio. Se a API estiver retornando um objeto em vez de um array, isso pode causar problemas. Verifique se o retorno da API corresponde ao que você espera manipular no estado.

  3. Dependências do useEffect: Embora não seja comum para este caso específico, se você estiver usando variáveis ou funções dentro do useEffect que podem mudar ao longo do tempo, você deve incluí-las nas dependências do useEffect. No seu caso, como fetchProducts é importado de outro arquivo e não deve mudar, isso provavelmente não é o problema.

  4. Erro no Fetch: Pode haver um erro no fetch que não está sendo capturado. Você pode adicionar um console.log dentro do bloco catch para ver se algum erro está sendo gerado e não sendo notado.

  5. Atualização do Estado: Às vezes, atualizações de estado em React podem ser assíncronas e não refletir imediatamente. No entanto, isso não explicaria o comportamento de "Loading..." permanente. Ainda assim, você pode adicionar um console.log(headerData) após a chamada setHeaderData(products); para verificar se o estado está sendo atualizado conforme esperado.

  6. Revisão do Código: Como uma medida de precaução, reveja o código para garantir que não há erros tipográficos ou lógicos que possam ter sido perdidos.

Se após essas verificações o problema persistir, uma boa prática é simplificar o problema. Tente usar dados estáticos para preencher headerData temporariamente e veja se eles são renderizados. Se funcionar com dados estáticos, o problema pode estar na comunicação com a API ou na manipulação dos dados recebidos.

Qualquer coisa manda aqui de novo. Bons estudos!