L'équipe de Gatsby JS vient d'annoncer la release officielle de la nouvelle API Route basée sur les fichiers.

C'est un gros changement dans le développement d'un site Gatsby JS. On peut désormais créer des collections de fichiers sans coder la moindre ligne dans le fichier "gatsby-node.js".

Le système est basé sur le nom des fichiers. On utilise des valeurs contenues dans les types pour spécifier l'url de la page.

Gatsby JS est capable tout seul de retrouver la valeur GraphQL dans un type et de générer autant de page que de résultat.

À l'instar de Next JS qui demande de générer les pages statiques via la fonction "getStaticPaths" ou Nuxt JS qui utilise les liens qu'il trouve en générant le site. Gatsby JS utilise le data GraphQL qu'il trouve pour générer les pages.

Des routes statiques et dynamiques

En plus d'avoir un système plus simple et qui permet d'écrire moins de code. Ce nouveau système de Route permet de générer également des routes dynamiques.

En utilisant les "Brackets" ([]), vous pouvez créer des pages "vides", sans contenu. Et ensuite, charger le contenu avec les méthodes classiques des components React JS.

Très utile pour avoir du contenu qui demande un accès sécurisé ou pour éventuellement créer un système de preview dynamique.

  // fichier statique
{restApiPosts.title}.jsx

// fichier dynamique
[id].jsx

Exemple de code

Voici un exemple de code simple qui utilise les 2 routes (statique et dynamique).

Le code source : https://github.com/ipatate/gat...
Le live : https://lively-field-0696c8503...

Présentation en vidéo de File System Route API

Je vous présente en vidéo le fonctionnement de cette nouvelle API.

Un site statique Gatsby JS avec un mode preview

J'ai fait un exemple de projet avec un mode preview qui fonctionne sur les pages déjà générées et sur des pages inexistantes.

Grâce aux routes dynamiques, on peut avoir une preview d'une page qui n'a pas été encore compilée.

Le code source : https://github.com/ipatate/gat...

La vidéo :

Craft CMS 3.5 en mode headless