Création dynamique de page avec GatsbyJs

Create page API

Gatsby Js vous permet de créer dynamiquement des pages à partir de template et de données pouvant provenir de différentes sources.

Configuration

Installez le gatsby starter hello world

> gatsby new gatsby-starter-hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world

Créer le fichier gatsby-node.js à la racine du dossier.

Configuration de la création de page automatisée

Dans gatsby-node.js, ajoutez l'export pour le createPages

exports.createPages = ({ actions }) => {
  // ...
}

Destructurez le createPage action depuis l'objet action pour pouvoir l'utiliser et ajouter des données.

exports.createPages = ({ actions }) => {
  const { createPage } = actions
  // ajoutez ici les données que vous voulez
  const dogData = [
    {
      name: "Fido",
      breed: "Sheltie",
    },
    {
      name: "Sparky",
      breed: "Corgi",
    },
  ]
}

Bouclez les données et insérez le chemin, le template et le context (données qui seront passées via la propriété pageContext et récupérable dans le template) pour créer une page pour chaque objet du tableau.

exports.createPages = ({ actions }) => {
  const { createPage } = actions
  const dogData = [
    {
      name: "Fido",
      breed: "Sheltie",
    },
    {
      name: "Sparky",
      breed: "Corgi",
    },
  ]
  dogData.forEach(dog => {
    createPage({
      path: `/${dog.name}`,
      component: require.resolve(`./src/templates/dog-template.js`),
      context: { dog },
    })
  })
}

Créez un composant React qui servira de template pour vos pages crées via le createPage

Ajoutez le fichier dans un dossier templates src/templates/dog-template.js

import React from "react"
export default function DogTemplate({ pageContext: { dog } }) {
  return (
    <section>
      {dog.name} - {dog.breed}
    </section>
  )
}

Lancez l'environnement de développement de gatsby et vous pouvez naviguez via les chemins des pages que vous avez crées et voir les données s'afficher. (exemple: http://localhost:8000/Fido)

> gatsby develop