Utiliser drupal comme source de données Gatsby

Installer le plugin drupal dans Gatsby

Tout d'abord assurez-vous d'avoir un site Drupal 8 ou 9 de prêt, avec le module JSON:API d'installé.

Un moyen sur de savoir si le module est opérationnel est de se rendre à l'adresse http://local.9.d9-test.com/jsonapi de votre site (Attention votre url est propre à votre projet, dans mon cas, je suis sur un vhost spécifique à drupal sur mon local). Si la page vous retourne un jeu de donnée json, c'est que c'est bon.

Maintenant, retournons dans votre projet gatsby.

Dans le dossier de votre projet, ouvrez votre terminal et lancez la commande suivante :

yarn add gatsby-source-drupal

Puis dans votre fichier gatsby-config.js

Ajouter dans le tableau de plugins l'entrée suivante :

{
    resolve: `gatsby-source-drupal`,
      options: {
        baseUrl: "http://local.9.d9-test.com/",
        apiBase: "jsonapi",
    },
}

en changeant la valeur de la clé "baseUrl" en fonction de l'url de votre site Drupal.

Relancer la commande yarn develop et rendez-vous dans la page http://localhost:8000/___graphql Vous devriez pouvoir accèder aux données du site drupal via des requêtes GraphQL.

Par exemple lancer la requête dans l'explorateur :

query {
    allNodePage {
      edges {
        node {
          title
          drupal_internal__nid
          body {
            value
          }
          path {
            alias
          }
        }
      }
    }
  }

Dans la partie droite de votre écran vous-y verrez les résultats de la requête au format json.

A partir de maintenant votre façon de requêter les données sera similaire à cet exemple.

Afficher les données du site Drupal dans une page générée par Gatsby

Avant de commencer cette étape, faites un node de type Page sur votre site drupal, et avec le module pathauto, donner lui l'alias "/home" et assurez-vous qu'il soit publié.

Nous nous servirons de ce chemin pour requêter en GraphQL pour récupérer les données de ce node dans Gatsby.

Vous remarquerez que lors du déploiement d'un projet Gatsby un dossier src contient les fichiers suivants

project    
│
└───src
   	│   
   	│   
   	│
   	└───pages
    │   │   404.js
    │  	│   index.js
    │   │   ...

Editer le fichier index.js autogénéré et remplacer le contenu par :

//projet/src/pages/index.js

import React from "react";
import { graphql } from "gatsby";

const IndexPage = ({ data }) => {
  return (
      <main>
        <title>{ data.nodePage.title }</title>
        <h1>{ data.nodePage.title }</h1>
        <div>{ data.nodePage.body.value }</div>
      </main>
  );
};
export default IndexPage;

export const data = graphql`
  query {
    nodePage(path: {alias: {eq: "/home"}}, status: {eq: true}) {
      body {
        value
      }
      title
    }
  }
`

Désormais votre http://localhost:8000/ charge les données de votre node drupal.

Récupérer les nodes Drupal et créer les pages dans Gatsby

Sources : https://www.gatsbyjs.com/docs/programmatically-create-pages-from-data/.

Pour créer plusieurs pages à partir des données il va falloir créer un fichier gatsby-node.js à la racine du projet.

Nous allons utiliser la méthode createPages de Gatsby.

Dans notre cas, nous nous concentrons sur le type de contenu News de notre site Drupal. (Il faut préalablement avoir créer un type de contenu "News" et avoir crée au moins un node avec ce type de contenu sur votre site Drupal).

// projet/gatsby-node.js

exports.createPages = async function ({ actions, graphql }) {
  const { data } = await graphql(`
    query {
      allNodeNews {
        edges {
          node {
            path {
              alias
            }
          }
        }
      }
    }
  `)
  data.allNodeNews.edges.forEach(edge => {
    const slug = edge.node.path.alias
    actions.createPage({
      path: slug,
      component: require.resolve(`./src/pages/news/new.js`),
      context: { slug: slug },
    })
  })
}

Puis dans src créez un dossier news dans lequel vous créerez un fichier new.js

// projet/src/pages/news/new.js

import React from "react";
import { graphql } from "gatsby";

// markup
const NewPage = ({ data }) => {

  return (
      <h1>{ data.nodeNews.title }</h1>
      <div>{ data.nodeNews.body.value }</div>
      <img src={ data.nodeNews.relationships.field_image.localFile.url } alt={ data.nodeNews.title }/>
  );
};
export default NewPage;

export const data = graphql`
  query ($slug: String = "") {
    nodeNews(path: {alias: {eq: $slug}}, status: {eq: true}) {
      body {
        value
      }
      relationships {
        field_image {
          localFile {
            url
          }
        }
      }
      drupal_internal__nid
      path {
        alias
      }
      title
    }
  }
`;

Dans cet exemple je me base sur l'alias pour générer mes nouvelles pages.

Vous devriez désormais accéder aux données d'un node drupal en interrogeant le même alias que celui que vous avez renseigné dans l'administration du node dans drupal.