Gatsby es un potente generador de sitios estáticos basado en React que permite a los desarrolladores crear sitios web y aplicaciones rápidos y escalables. Uno de los aspectos clave de la creación de sitios web eficaces es mostrar datos de forma eficiente a los usuarios. En Gatsby, la visualización de datos se puede lograr utilizando una combinación de GraphQL, componentes de React y fuentes de datos de terceros, como CMS sin cabeza, API y archivos locales.

En este artículo, exploraremos el proceso de obtención y visualización de datos en una aplicación Gatsby, centrándonos en los principios clave, las estrategias y las mejores prácticas para representar datos de manera efectiva.

1. Comprender la capa de datos de Gatsby

La capa de datos de Gatsby se basa en GraphQL, que actúa como un lenguaje de consulta que permite a los desarrolladores solicitar exactamente los datos que necesitan. Gatsby se integra profundamente con GraphQL, lo que facilita la extracción de datos de varias fuentes, como archivos Markdown, archivos JSON o API externas, y mostrarlos dentro de los componentes de React.

Los pasos para mostrar datos en Gatsby normalmente incluyen:

• Obteniendo datos de una fuente externa o interna
• Estructuración de los datos mediante consultas GraphQL
• Mostrar los datos usando componentes de React

2. Configurar consultas GraphQL en Gatsby

Gatsby viene con una capa GraphQL incorporada que le permite acceder a sus fuentes de datos fácilmente. Puede utilizar consultas GraphQL para extraer datos de:

• Archivos locales como Markdown o JSON
• Plataformas CMS como Contentful, Strapi o WordPress
• API y bases de datos

Ejemplo 1: consulta de datos de Markdown

Supongamos que está creando un blog y ha escrito sus publicaciones en archivos Markdown. Puede consultar los archivos Markdown utilizando el complemento gatsby-transformer-remark de Gatsby y mostrar el contenido en sus componentes de React.

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

Luego puedes renderizar las publicaciones de blog recuperadas en tu componente usando JSX:

const Blog = ({ data }) => (
  

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

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

Ejemplo 2: consulta de datos desde CMS (contenido)

Si estás utilizando un CMS sin cabeza como Contentful, puedes consultar tus datos instalando el complemento gatsby-source-contentful, que integra Gatsby con la API de Contentful. A continuación se muestra un ejemplo de cómo obtener publicaciones de blog de Contentful:

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

Ahora puedes renderizar los datos de forma similar a como lo harías con Markdown:

const Blog = ({ data }) => (
  

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

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

3. Representación de datos externos a través de API

Si bien las fuentes de datos estáticas de Gatsby (por ejemplo, Markdown, CMS) son excelentes, puede haber casos en los que necesites obtener datos externos dinámicamente desde las API. Puede utilizar el gancho useEffect en React para recuperar datos y mostrarlos en el lado del cliente. Por ejemplo, así es como puedes recuperar datos de una API externa como un punto final REST o un servicio 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. Optimización de la visualización de datos con Gatsby

Gatsby ofrece varias formas de optimizar la visualización de datos y mejorar el rendimiento:

Paginación

Al mostrar grandes conjuntos de datos, es esencial paginar los datos para mejorar los tiempos de carga de la página y hacer que el contenido sea más manejable. La API createPages de Gatsby se puede utilizar para generar páginas paginadas dinámicamente.

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

  return (
    

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

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

      
  );
};

Carga diferida

Lazy loading es una técnica que difiere la carga de recursos no esenciales, mejorando el rendimiento. Por ejemplo, gatsby-image de Gatsby puede optimizar imágenes y React.lazy o las importaciones dinámicas pueden diferir la carga de componentes.

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

Generación de sitios estáticos

El proceso de compilación de Gatsby preprocesa las páginas en HTML estático, lo que mejora significativamente el rendimiento. Sin embargo, también le permite recuperar e inyectar contenido dinámico en tiempo de ejecución mediante la representación del lado del cliente.

5. Visualización de datos con Gatsby

La visualización eficaz de datos a veces implica visualizaciones como cuadros y gráficos. Puede integrar bibliotecas de visualización de datos, como Chart.js o D3.js, en su proyecto Gatsby para representar representaciones visuales de datos.

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
    
);

Conclusión

Mostrar datos en Gatsby es un proceso flexible y eficiente, gracias a su integración con GraphQL y su arquitectura basada en React. Ya sea que esté obteniendo datos de archivos locales, CMS o API, Gatsby proporciona una base sólida para crear aplicaciones web de alto rendimiento con capacidades de visualización de datos enriquecidas. Al implementar paginación, carga diferida y otras técnicas de optimización, puede asegurarse de que su sitio Gatsby siga siendo rápido y receptivo, incluso cuando maneja grandes conjuntos de datos.