Gatsby est un generateur de site static, et un élément maitre dans l'univers de la JAMSTACK react.

Jamstack is an architecture designed to make the web faster, more secure, and easier to scale [...] The core principles of pre-rendering, and decoupling, enable sites and applications to be delivered with greater confidence and resilience than ever before.

Avant de commencer lire ces quelques pages

• Gatsby Core Philosophy
• Guides des conceptes
• les nouvelles options de rendu (SSR et DSG) Gatsby v4 le Static Site Generation (SSG) est le mode de rendu par défaut (build time pre-rendering)

Pages

Il existe 4 façon de créer des pages avec Gatsby

• src/pages : en créant un composant React (avec un export par default) dans ce dossier
• File System Route API : permet de créer des collection route et client-only route grâce au Graphql data layer de Gatsby et de générer des pages en utilisant des placeholders (des crochets [ et ]) dans les noms de dossiers/fichiers (comme dans Nextjs)
• gatsby-node.js : en implementant l'API createPages
• Plugins : certains plugins peuvent créer des pages (elles utilisent également l'API createPages)

Data

Avec Gatsby les données qui alimentent les pages peuvent provenir de requêtes POST (REST ou Graphql) :

• au runtime (classique pour les app Front)
• ou au build time

Cela permet de qualifier les pages générées par Gatsby d'hybrides.

L'API Graphql (infos graphql) permet d'interroger la couche de données de Gatsby ainsi que de limit, skip, sort, filter, format le résultat de sa requête.

Différents types de Query

Gatsby permet de requêter des données dans :

• des pages
• des composants
• le fichier gatsby-node.js.

Le requêtage s'effectue grâce à des requêtes de type page query ou de static query selon le type de composants dans lequel on se trouve (page ou non).

Page Query

Il faut utiliser des requêtes de type Page Query pour interroger le Data Layer de Gatsby dans les pages Gatsby, c'est à dire dans :

• composants React présents dans le dossier src/pages
• pages créées automatiquement lors de l'appel de createPage dans le fichier gatsby-node.js avec l'utilisation de l'option component qui va designer le composant qui sera considéré comme page

La pageQuery est un [Tagged template](## Tagged templates) qui va retourner des données disponibles via la props data du composant. GraphQL arguments for variables in your queries.

Guide

Static Query

Utilisable dans un composant, l'utilisation d'une Static Query se fait via le hook useStaticQuery (ou à l'ancienne 😋 avec le composant StaticQuery).

You can only have one StaticQuery per page: in order to include the data you need from multiple sources, you can use one query with multiple root fields. It cannot take variables as arguments.

Guide

Ne pas mélanger

Dans un fichier donné (page ou composant) n'est pas possbile de :

1. mélanger les 2 types de Queries
2. d'avoir plusieurs query par composant, il est possible d'utiliser une requêtes avec plusieurs root fields

Sourcing via un plugin

Pour sourcer notre application en données via un source plugin, il faut:

1. d'abord l'installer npm i gatsby-source-xxxx puis l'ajouter au fichier de config gatsby-config.js
2. écrire une static query qui va réccupérer de la données au buid time :

import { graphql, useStaticQuery } from "gatsby"

const IndexPage = () => {
  const gatsbyRepoData = useStaticQuery(graphql`
    query {
      github {
        repository(name: "gatsby", owner: "gatsbyjs") {
          id
          nameWithOwner
          url
        }
      }
    }
  `)

_{exemple tiré de la doc officielle: https://www.gatsbyjs.com/docs/conceptual/data-fetching/} 3. lors du build, la requête graphql est exécutée et remplacée pour générer un fichier JSON 4. toujours lors du build, le JSON est dynamiquement importé dans le JSX

Liens

voir complément d'infos dans:

• Build Time and Client Runtime Data Fetching
• Adding App and Website Functionality)
• Understanding React Hydration guide
• the process of fetching data at build time and creating pages from the data is covered in more depth in the tutorial as well as the docs for creating pages from data programmatically.

Routing

Routing par défaut

Tout composant situé dans src/pages sera accessible via son nom de fichier slugisé Une page index.js situé dans un sous dossier sera accessible via le nom du dossier src/pages/blog/index.js sera accessible via /blog.

Gatsby’s File System Route API

Tous les composants situés dans /pages (et dessous) seront routés automatiquement. Par ex les pages dynamiques du type src/pages/blog/{mdx.slug}.js seront accessible via l'url /blog/xxx.

2 exemples de routing : - src/pages/products/{Product.name}.js (collection route) - src/pages/products/[name].js (client-only route, fallback)

Slugs

Avec le plugin gatsby-plugin-mdx Gatsby génère automatiquement des noeuds slug avec le nom du fichier sans l'extension.

Si on souhaite générer les slugs nous meme, Gatsby “slugify” automatiquement toutes les routes: ex I ♥ Dogs sera automatiquement converti en i-love-dogs.

Tips

Faire le tuto officiel.

• gatsby clean permet de vider le cache. Utile après déplacement de fichiers ou renommages par ex. Relancer ensuite le script npm
• gatsby info

Debug dans VSCode

https://www.gatsbyjs.com/docs/debugging-the-build-process/#vs-code-debugger-auto-config