Gatsby é um poderoso gerador de sites estáticos baseado em React que permite aos desenvolvedores construir sites e aplicativos rápidos e escalonáveis. Um dos principais aspectos da construção de sites eficazes é a exibição eficiente de dados aos usuários. Em Gatsby, a exibição de dados pode ser obtida usando uma combinação de GraphQL, componentes React e fontes de dados de terceiros, como CMSs headless, APIs e arquivos locais.

Neste artigo, exploraremos o processo de busca e exibição de dados em um aplicativo Gatsby, concentrando-nos nos principais princípios, estratégias e práticas recomendadas para renderizar dados de maneira eficaz.

1. Compreendendo a camada de dados de Gatsby

A camada de dados de Gatsby é construída em torno de GraphQL, que atua como uma linguagem de consulta que permite aos desenvolvedores solicitar exatamente os dados de que precisam. Gatsby se integra profundamente ao GraphQL, facilitando a extração de dados de várias fontes, como arquivos Markdown, arquivos JSON ou APIs externas, e exibi-los nos componentes React.

As etapas para exibir dados em Gatsby normalmente incluem:

• Buscando dados de uma fonte externa ou interna
• Estruturando os dados usando consultas GraphQL
• Exibindo os dados usando componentes React

2. Configurando consultas GraphQL em Gatsby

Gatsby vem com uma camada GraphQL integrada que permite acessar facilmente suas fontes de dados. Você pode usar consultas GraphQL para extrair dados de:

• Arquivos locais como Markdown ou JSON
• Plataformas CMS como Contentful, Strapi ou WordPress
• APIs e bancos de dados

Exemplo 1: consultando dados de Markdown

Suponha que você esteja construindo um blog e tenha escrito suas postagens em arquivos Markdown. Você pode consultar os arquivos Markdown usando o plugin gatsby-transformer-remark de Gatsby e exibir o conteúdo em seus componentes React.

export const query = graphql`
  query BlogPostQuery {
    allMarkdownRemark {
      edges {
        node {
          frontmatter {
            title
            date
          }
          excerpt
        }
      }
    }
  }
`

Você pode então renderizar as postagens do blog obtidas em seu componente usando JSX:

const Blog = ({ data }) => (
  

    {data.allMarkdownRemark.edges.map(({ node }) => (
      

        
{node.frontmatter.title}
        
{node.excerpt}
        {node.frontmatter.date}
      
    ))}
  
)

Exemplo 2: consulta de dados do CMS (conteúdo)

Se estiver usando um CMS headless como o Contentful, você pode consultar seus dados instalando o plug-in gatsby-source-contentful, que integra Gatsby à API do Contentful. Aqui está um exemplo de busca de postagens de blog do Contentful:

export const query = graphql`
  query ContentfulBlogPostQuery {
    allContentfulBlogPost {
      edges {
        node {
          title
          publishedDate(formatString: "MMMM Do, YYYY")
          body {
            childMarkdownRemark {
              excerpt
            }
          }
        }
      }
    }
  }
`

Agora você pode renderizar os dados da mesma forma que faria com Markdown:

const Blog = ({ data }) => (
  

    {data.allContentfulBlogPost.edges.map(({ node }) => (
      

        
{node.title}
        
{node.body.childMarkdownRemark.excerpt}
        {node.publishedDate}
      
    ))}
  
)

3. Renderização de dados externos por meio de APIs

Embora as fontes de dados estáticos de Gatsby (por exemplo, Markdown, CMS) sejam ótimas, pode haver casos em que você precise buscar dados externos dinamicamente de APIs. Você pode usar o gancho useEffect no React para buscar dados e exibi-los no lado do cliente. Por exemplo, veja como você pode buscar dados de uma API externa, como um endpoint REST ou serviço GraphQL:

import React, { useEffect, useState } from "react";

const DataDisplay = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    // Fetch data from an external API
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(result => setData(result))
      .catch(error => console.error('Error fetching data:', error));
  }, []);

  return (
    

      {data.map(item => (
        

          
{item.name}
          
{item.description}
        
      ))}
    
  );
};

export default DataDisplay;

4. Otimizando a exibição de dados com Gatsby

Gatsby oferece várias maneiras de otimizar a exibição de dados e melhorar o desempenho:

Paginação

Ao exibir grandes conjuntos de dados, é essencial paginar os dados para melhorar o tempo de carregamento da página e tornar o conteúdo mais gerenciável. A API createPages de Gatsby pode ser usada para gerar páginas paginadas dinamicamente.

const Blog = ({ pageContext, data }) => {
  const { currentPage, numPages } = pageContext;

  return (
    

      {data.allMarkdownRemark.edges.map(({ node }) => (
        

          
{node.frontmatter.title}
          
{node.excerpt}
        
      ))}

      
  );
};

Carregamento lento

O carregamento lento é uma técnica que adia o carregamento de recursos não essenciais, melhorando o desempenho. Por exemplo, gatsby-image de Gatsby pode otimizar imagens, e React.lazy ou importações dinâmicas podem adiar o carregamento de componentes.

import { LazyLoadImage } from 'react-lazy-load-image-component';

Geração de site estático

O processo de construção de Gatsby pré-renderiza as páginas em HTML estático, melhorando significativamente o desempenho. No entanto, também permite buscar e injetar conteúdo dinâmico em tempo de execução usando renderização do lado do cliente.

5. Visualização de dados com Gatsby

A exibição eficaz de dados às vezes envolve visualizações como tabelas e gráficos. Você pode integrar bibliotecas de visualização de dados, como Chart.js ou D3.js, em seu projeto Gatsby para renderizar representações visuais de dados.

import { Line } from "react-chartjs-2";

const data = {
  labels: ['January', 'February', 'March', 'April', 'May'],
  datasets: [
    {
      label: 'Sales',
      data: [65, 59, 80, 81, 56],
      fill: false,
      backgroundColor: 'rgb(75, 192, 192)',
      borderColor: 'rgba(75, 192, 192, 0.2)',
    },
  ],
};

const MyChart = () => (
  

    
Sales Over Time
    
);

Conclusão

A exibição de dados em Gatsby é um processo flexível e eficiente, graças à sua integração com GraphQL e sua arquitetura baseada em React. Esteja você buscando dados de arquivos locais, CMSs ou APIs, Gatsby fornece uma base sólida para a construção de aplicativos da web de alto desempenho com recursos avançados de exibição de dados. Ao implementar paginação, carregamento lento e outras técnicas de otimização, você pode garantir que seu site Gatsby permaneça rápido e responsivo, mesmo ao lidar com grandes conjuntos de dados.