Thomas Tastet

Développeur Freelance

à propos

Je te donne plein de conseils utiles au métier de développeur et de temps en temps plus.

Mise à jour de mon starter Gatsby

/ Partager

Bonjour tout le monde, récemment j'ai mis en open source sur mon Github un starter GatsbyJs utilisant Prismic pour le back office, si je vous reparle de ça aujourd'hui c'est parce que le plugin que j'utilise pour connecter les deux ensemble vient de passer en 3.0.0

Cette version apporte son lot de nouveautés qui vous permettront d'optimiser vos temps de builds.

Parmi les nouveautés, on retrouve celle qui pour moi fait toute la force de cette nouvelle version : le choix des images qui resteront chez Prismic et celles qui seront téléchargées en local pour un traitement spécifique.

On aurait facilement et à tort envie de ne faire confiance qu'à son code et se dire que toutes les images ont le devoir d'êtres téléchargées en local pour être upload avec les fichiers de builds.

Parce que oui, vous serez maintenant dépendant de 2 uptimes, celui de votre site où sont hébergées les données le concernant, mais aussi l'uptime de Prismic ici.

Prismic étant un service assez qualitatif, j'aurai tendance à leur faire confiance pour l'uptime de mes ressources.

Pour ce qui est des fonctionnalités disponibles pour les images qui ne seront pas téléchargées en local, les plus importantes sont conservées, voir mêmes simplifiées.

Voici un exemple de code avant et après la 3.0.0 pour la fonctionnalité "fluid" :

Avant
{
  allPrismicPage {
    edges {
      node {
        id
        data {
          imageFieldName {
            localFile {
                childImageSharp {
                    fluid(maxWidth: 1000, maxHeight: 800) {
                        ...GatsbyPrismicImageFluid
                    }
                }
            }
          }
        }
      }
    }
  }
}
Après
{
  allPrismicPage {
    edges {
      node {
        id
        data {
          imageFieldName {
            fluid(maxWidth: 1000, maxHeight: 800) {
              ...GatsbyPrismicImageFluid
            }
          }
        }
      }
    }
  }
}

En revanche, les limites de cette solutions résident là où il est nécessaire d'appliquer un traitement supplémentaire à l'image, par exemple dans notre projet les images ont un lazyload SVG.

Cette image demande a être créée après une analyse de l'image d'origine et donc, le téléchargement en local est obligatoire.

C'est pour cela que cette nouvelle version nous propose non pas un paramètre de téléchargement simple, mais une fonction qui nous permettra de faire le tri entre les images à télécharger et celles qui ne le seront pas.

Cela peut paraître assez simple comme nouveauté, mais elle est de taille car elle permet de gagner un temps non négligeable dans le processus de build en limitant le nombre d'images à télécharger et à traiter, sur les gros sites.

Note: Pour le starter, nous allons changer le système et passer sur des images normales sans SVG pour la nouveauté suivante, donc le code qui va suivre ne sera pas mit dans la config.

Voici un extrait de la doc qui montre comment s'organise le téléchargement dans les paramètres du plugin :

gatsby-config.js
plugins: [
  {
    resolve: 'gatsby-source-prismic',
    options: {
      shouldDownloadImage: ({ node, key, value }) => {
        // Return true to download the image or false to skip.
        return true
      },
    },
  },
]

Maintenant, vous comprendrez facilement que le code actuel du site est à revoir car toutes les images se reposent sur un traitement local, nous allons donc devoir veiller à ce que les query que nous exécuterons soient bien formatées comme indiquées dans l'exemple plus haut.

Pour ceux qui voudraient voir les modifications apportées entre les anciennes query et les nouvelles vous avez le lien ici du commit correspondant à ces modifications.

Pour tester notre code nous aurons donc besoin de mettre à jour le plugin avec :

npm install --save gatsby-source-prismic@3.0.0

La seconde nouveauté qui pour moi est non négligeable est la prise en charge simplifié du système de preview.

L'une des raisons de l'abandon des images lazyload SVG au profit des images sur Prismic est aussi liée à ce système, pour pouvoir prévisualiser à 100% ce que nous sommes entrain d'éditer, avec les images donc, nous avons besoin qu'elles soient cherchées sur Prismic et non pas dans les images de la build car elles ne seront pas disponibles ce qui est normal 😄.

Maintenant, si vous avez testé Prismic, même sans avoir un code qui tourne à côté, vous avez déjà dû remarquer ce petit oeil en haut à droite qui est le bouton de preview.

Cela vous permettra comme son nom l'indique, de visualiser ce que vous êtes en train de créer / modifier.

Nous allons donc voir comment ajouter un système de preview à notre starter.

Pas besoin ici d'ajouter une option au plugin dans le fichier "gatsby-config.js", en revanche nous allons créer dans le dossier "src/pages" un fichier nommé : "preview.js".

C'est ici que nous allons créer notre système de prévisualisation.

Je vous mets le code en dessous mais avant dans les grandes lignes voici ce que nous allons faire :

  1. Importer les templates
  2. Changer le repositoryName en mettant le vôtre bien sûr 😉
  3. Conditionner quelle template est à appeler, pour ça vérifiez quel objet est à votre disposition avec "prevData." suivi de l'objet qui vous intéresse

Bref, voici celui que l'on va utiliser pour le starter avec quelques commentaires :

preview.js
import React, { useEffect, useState } from "react"
import { usePrismicPreview } from "gatsby-source-prismic"

import PageTemplate from "../templates/page"

// Note that the `location` prop is taken and provided to the `usePrismicPreview` hook.
const PreviewPage = ({ location }) => {
  const [prevData, setData] = useState(null)
  const { isPreview, previewData, path } = usePrismicPreview({
    // The repositoryName value from your `gatsby-config.js`.
    repositoryName: "new-york",
  })

  // This useEffect runs when values from usePrismicPreview update. When
  // preview data is available, this will save the data globally and redirect to
  // the previewed document's page.
  useEffect(() => {
    // If this is not a preview, skip.
    //   null = Not yet determined if previewing.
    //   true = Preview is available.
    //   false = Preview is not available.
    if (isPreview === false) return

    // Save the preview data to somewhere globally accessible. This could be
    // something like a global Redux store or React context.
    //
    // We'll just put it on window.
    setData(previewData)
    window.__PRISMIC_PREVIEW_DATA__ = previewData
  }, [isPreview, previewData, path, setData])

  // Tell the user if this is not a preview.
  if (isPreview === false) return <div>Not a preview!</div>

  return prevData ? (
    prevData.prismicPage ? (
      <PageTemplate data={prevData} />
    ) : (
      <div>error..</div>
    )
  ) : (
    <div>Loading preview...</div>
  )
}

export default PreviewPage

Maintenant que cela est fait, nous allons paramétrer la preview depuis Prismic.

Pour cela dans votre projet, rendez-vous dans les options de celui-ci, puis dans l'onglet "Previews".

"Create a preview", vous rentrerez les informations concernant votre site, puis dans le link resolver vous remplirez avec "/preview" qui correspond au nom du fichier sans l'extension que l'on a créé dans le dossier "pages"

Maintenant il ne vous reste plus qu'à tester par vous-même le code 😉.

Bien sûr il y a eu d'autres changements avec cette nouvelle version mais rien qui ne peut améliorer ou qui affecte le starter que je vous ai publié 😄

Je vous mets comme à mon habitude les liens utiles en dessous de l'article si jamais l'envie vous prend de creuser cette update 👍.