Blog

L'utilisation de Drupal avec Gatsby est un excellent moyen d'obtenir un site de qualité associé à une excellente expérience de développement moderne et profiter de tous les avantages de JAMstack, tels que la performance, l'évolutivité et la sécurité.
Nous expliquons en quelques étapes comment utiliser Gatsby avec Drupal en mode découplé : 

Étape 1 : configurer Drupal

Il vous suffit simplement d'installer et configurer le module API JSON pour Drupal8

-> composer require drupal/jsonapi

Il ne nous reste plus qu'à nous assurer d'accorder aux utilisateurs anonymes l'autorisation de lecture sur l'API. Pour ce faire, accédez à la page des autorisations et cochez la case "Utilisateurs anonymes" en bas de l'autorisation "Accéder à la liste des ressources de l'API JSON".
Après cela, vous devriez être prêt.

Étape 2 : installer GatsbyJS

Pour installer gatsby exécuter : npm install --global gatsby-cli et vous pouvez ensuite créer un nouveau projet,
comme ceci: npm install --global gatsby-cli

Cette commande clone simplement le dépôt de démarrage par défaut de Gatsby, puis installe ses dépendances à l'intérieur

Une fois terminé, vous disposez des bases d'un site Gatsby opérationnel. Mais cela ne nous suffit pas! Nous devons d'abord lié Drupal et Gatsby.

Étape 3 : Lié GatsbyJS et Drupal

Pour cette partie, nous utiliserons le plugin gatsby-source-drupal pour Gatsby. Tout d'abord, nous devons l'installer:

cd yoursitename

npm install --save gatsby-source-drupal

Une fois cela fait, il nous suffit d'ajouter un tout petit peu de configuration pour que Gatsby connaisse l'URL de notre site Drupal. Pour ce faire, éditez le fichier gatsby-config.js et ajoutez ce petit extrait à la section "plugins":

plugins: [

  {

    resolve: `gatsby-source-drupal`,

    options: {

      baseUrl: `http://YOURSITE.COM`,

    },

  },

]

C'est toute la configuration nécessaire, et maintenant nous sommes prêts à exécuter Gatsby et à lui faire consommer des données Drupal.

Étape 4 : Exécutez Gatsby

Exécutez ceci pour faire fonctionner Gatsby:
gatsby develop

Vous pouvez maintenant afficher gatsby-starter-default dans le navigateur.

 http: // localhost: 8000 /

Étape 5 : Récupérer les données de Drupal avec GraphQL

Affichez GraphQL pour explorer les données et le schéma de votre site

http: // localhost: 8000 / ___ graphql

Étape 6: Affichage des données Drupal sur le site Gatsby

Dans votre base de code, consultez src/pages/index.js et vous devriez voir du contenu. Supprimez tout ce qu'il contient et remplacez-le par ceci :

const SecondPage = ({data}) => (

  <Layout>

    <h1>{ data.allRecipes.edges[0].node.title }</h1>

  </Layout>

)

export default SecondPage

export const query = graphql`

  query {

    allRecipes {

      edges {

        node {

          title

        }

      }

    }

  }

Étape 7: Build du site

Exécutez simplement "gatsby build" et il exportera un site statique réel que vous pourrez déployer où vous le souhaitez, comme Netlify.

Nous avons pu profiter de cette architecture pour créé le site de l'agence web Fullwave.