Précédent

Suivant

Exercice - Ajouter des données à votre application Gatsby

Effectué

Les fonctionnalités d’interrogation de Gatsby vous permettent de créer un site statique à partir de données collectées sur de nombreuses sources différentes.

Ici, vous créez une requête pour capturer des données dans un fichier de configuration et les afficher dans une page.

Ajouter des données à votre composant

La fonctionnalité de traitement de données dans Gatsby est puissante. Gatsby peut interroger des données de pratiquement toutes les sources : fichiers, données statiques et même de données de points de terminaison API et de bases de données. Pour interroger les données, nous utilisons GraphQL.

gatsby-config.js est le fichier où vous stockez les métadonnées de votre site ainsi que les configurations des plug-ins dans un objet JavaScript. Cet objet JavaScript contient une propriété appelée siteMetadata. Cette propriété et ses valeurs sont lues dans le graphe de données pendant le processus de génération et sont stockées dans un nœud appelé site. Vous verrez comment fonctionne l’interrogation des données en créant un composant About pour rechercher le titre et la description.

Voici ce à quoi ressemble la propriété siteMetadata :

siteMetadata: {
  title: `Gatsby Default Starter`,
  description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
  author: `@gatsbyjs`,
}

Nous pouvons construire une requête en fonction de ce qui précède, lire les données et les passer à un composant pour les afficher.

Démarrer le serveur de développement

Démarrez le serveur de développement en tapant la commande suivante à la racine de votre projet :

gatsby develop

Vous devez maintenant avoir deux routes opérationnelles :

• http://localhost:8000/, où s’affiche votre application
• http://localhost:8000/___graphql, où s’affiche le graphe de données intégré avec GraphQL

Créer une requête

Accédez à http://localhost:8000/___graphql dans votre navigateur afin d’obtenir de l’aide pour créer la requête.

Dans l’image ci-dessus, vous pouvez voir la section Explorateur dans le volet gauche. Vous pouvez utiliser l’Explorateur pour accéder aux détails de notre graphe et trouver les données dont vous avez besoin. Dans le volet du milieu, vous voyez comment est écrite la requête à mesure que vous effectuez des sélections à gauche. À droite, vous voyez le résultat de l’exécution de la requête. Vous pouvez exécuter la requête en cliquant sur le bouton de lecture dans la section du milieu.

Revenez dans l’éditeur VS Code et localisez le fichier about.js dans le répertoire pages/. Remplacez son contenu par le code suivant :

import React from 'react';
import { Link, graphql } from 'gatsby';

export default ({ data }) => (
  <React.Fragment>
    <h2>{data.site.siteMetadata.title}</h2>
    <div>{data.site.siteMetadata.description}</div>
    <Link to="/">Back to home</Link>
  </React.Fragment>
)

export const query = graphql `
  query {
    site {
      siteMetadata {
        author,
        description,
        title
      }
    }
  }
`

Ici, vous appelez la fonction graphql en utilisant la requête comme argument et en l’attribuant à la variable query. Son nom doit bien être query, pour que Gatsby sache la traiter et place le résultat dans le composant au moment de la génération.

Au moment de la génération, Gatsby entre le résultat de la requête dans la propriété data du composant, comme indiqué ci-dessous, où vous pouvez le référencer dans le JSX de votre composant.

Enregistrez le fichier et accédez à http://localhost:8000/about pour voir les éléments suivants :

Vous avez ajouté des données à votre composant à l’aide d’une requête GraphQL ! Vous avez également utilisé l’outil de requête GraphQL et le serveur de développement Gatsby dans le processus.

Continuer