Gatsby est un puissant générateur de sites statiques basé sur React qui permet aux développeurs de créer des sites Web et des applications rapides et évolutifs. L’un des aspects clés de la création de sites Web efficaces est l’affichage efficace des données aux utilisateurs. Dans Gatsby, l'affichage des données peut être obtenu à l'aide d'une combinaison de composants GraphQL, React et de sources de données tierces telles que des CMS sans tête, des API et des fichiers locaux.

Dans cet article, nous explorerons le processus de récupération et d'affichage des données dans une application Gatsby, en nous concentrant sur les principes clés, les stratégies et les meilleures pratiques pour un rendu efficace des données.

1. Comprendre la couche de données de Gatsby

La couche de données de Gatsby est construite autour de GraphQL, qui agit comme un langage de requête permettant aux développeurs de demander exactement les données dont ils ont besoin. Gatsby s'intègre profondément à GraphQL, ce qui facilite l'extraction de données à partir de diverses sources telles que des fichiers Markdown, des fichiers JSON ou des API externes et leur affichage dans les composants React.

Les étapes pour afficher les données dans Gatsby incluent généralement :

• Récupération de données à partir d'une source externe ou interne
• Structuration des données à l'aide de requêtes GraphQL
• Affichage des données à l'aide des composants React

2. Configuration des requêtes GraphQL dans Gatsby

Gatsby est livré avec une couche GraphQL intégrée qui vous permet d'accéder facilement à vos sources de données. Vous pouvez utiliser des requêtes GraphQL pour extraire des données de :

• Fichiers locaux tels que Markdown ou JSON
• Plateformes CMS comme Contentful, Strapi ou WordPress
• API et bases de données

Exemple 1 : interrogation de données Markdown

Supposons que vous créez un blog et que vous ayez rédigé vos articles dans des fichiers Markdown. Vous pouvez interroger les fichiers Markdown à l'aide du plugin gatsby-transformer-remark de Gatsby et afficher le contenu dans vos composants React.

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

Vous pouvez ensuite restituer les articles de blog récupérés dans votre composant à l'aide de JSX :

const Blog = ({ data }) => (
  

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

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

Exemple 2 : interrogation de données à partir d'un CMS (Contentful)

Si vous utilisez un CMS sans tête comme Contentful, vous pouvez interroger vos données en installant le plugin gatsby-source-contentful, qui intègre Gatsby à l'API de Contentful. Voici un exemple de récupération d'articles de blog à partir de Contentful :

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

Vous pouvez désormais restituer les données de la même manière qu'avec Markdown :

const Blog = ({ data }) => (
  

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

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

3. Rendu de données externes via des API

Bien que les sources de données statiques de Gatsby (par exemple, Markdown, CMS) soient excellentes, il peut y avoir des cas où vous devez récupérer dynamiquement des données externes à partir des API. Vous pouvez utiliser le hook useEffect dans React pour récupérer des données et les afficher côté client. Par exemple, voici comment récupérer des données à partir d'une API externe comme un point de terminaison REST ou un service 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. Optimiser l'affichage des données avec Gatsby

Gatsby propose plusieurs façons d'optimiser l'affichage des données et d'améliorer les performances :

Pagination

Lors de l'affichage de grands ensembles de données, il est essentiel de paginer les données pour améliorer les temps de chargement des pages et rendre le contenu plus gérable. L'API createPages de Gatsby peut être utilisée pour générer des pages paginées de manière dynamique.

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

  return (
    

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

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

      
  );
};

Chargement paresseux

Le chargement paresseux est une technique qui diffère le chargement des ressources non essentielles, améliorant ainsi les performances. Par exemple, l'image gatsby de Gatsby peut optimiser les images, et les importations React.lazy ou dynamiques peuvent différer le chargement des composants.

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

Génération de sites statiques

Le processus de création de Gatsby pré-rend les pages en HTML statique, améliorant considérablement les performances. Cependant, il vous permet également de récupérer et d'injecter du contenu dynamique au moment de l'exécution à l'aide du rendu côté client.

5. Visualisation des données avec Gatsby

L'affichage efficace des données implique parfois des visualisations telles que des tableaux et des graphiques. Vous pouvez intégrer des bibliothèques de visualisation de données, telles que Chart.js ou D3.js, dans votre projet Gatsby pour restituer des représentations visuelles de données.

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

Conclusion

L'affichage des données dans Gatsby est un processus flexible et efficace, grâce à son intégration avec GraphQL et son architecture basée sur React. Que vous récupériez des données à partir de fichiers locaux, de CMS ou d'API, Gatsby fournit une base solide pour créer des applications Web hautes performances dotées de riches capacités d'affichage de données. En mettant en œuvre la pagination, le chargement différé et d'autres techniques d'optimisation, vous pouvez garantir que votre site Gatsby reste rapide et réactif, même lors de la gestion de grands ensembles de données.