[Parte 3] Generiamo pagine dinamicamente

[gabacode]

Parte 3: Generiamo pagine dinamicamente

Dopo essere riusciti a chiamare le prime query e popolare la nostra homepage con dei contenuti, è arrivato il momento di creare una pagina per ogni blog post, categoria, evento, o qualsiasi altra entità presente sul nostro CMS.

Per riuscire in questo intento dobbiamo stabilire un template "contenitore" per ogni entità, e decidere quali proprietà dell'entità vogliamo mostrare. In questo esempio creeremo una pagina per ogni articolo del blog, mostrandone il titolo, e il contenuto in HTML.

Creiamo un nuovo template in /src/templates/post.js con il seguente contenuto:

/src/templates/post.js

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

export default function Post({ data }) {
    const post = data.allWpPost.nodes[0]
    return (
        <div>
            <h2>{post.title}</h2>
            <div dangerouslySetInnerHTML={{ __html: post.content }} />
        </div>
    )
}
export const query = graphql`
    query($slug: String!){
        allWpPost(filter: { slug: { eq: $slug } }) {
            nodes {
                slug
                title
                content
            }
        }
    }
`

Il contenuto del template è molto simile a quello che abbiamo scritto sulla home (index.js), ma ci sono delle differenze chiave. Prima di tutto, in questo caso non c'è un loop, ma andiamo a selezionare l'index [0] dell'array perchè in realtà vogliamo mostrare un singolo post alla volta.

All'interno della nostra query c'è anche una variabile $slug corrispondente ad una stringa, e questa variabile va a filtrare la nostra query, in modo che il post visualizzato sia equivalente (eq) al valore della variabile $slug

Ma da dove arriva questa variabile, esattamente?

La risposta si trova nel file gatsby-node.js, il file piu importante che andremo a creare per la generazione di nodi e contenuti dinamici.

./gatsby-node.js

const path = require(`path`)

exports.createPages = ({ graphql, actions }) => {
    const { createPage } = actions;

    const posts = graphql(`
        query {
            allWpPost{
                nodes {
                    slug
                }
            }
        }
    `)
    .then(result => {
        result.data.allWpPost.nodes.forEach(node => {
            createPage({
                path: `/${node.slug}`,
                component: path.resolve(`./src/templates/post.js`),
                context: {
                    slug: node.slug
                },
            });
        })
    })
 
    return Promise.all([posts])
};

In questo file la magia di Gatsby ci permette di fare una query e prendere tutti gli slugs presenti su allWpPost (il nodo relativo a tutti i post su WordPress), e per ogni slug creare una pagina con un determinato path (in questo caso potrebbe essere anche /blog/${node.slug}, "montarne" il contenuto su un determinato template, e passare la variabile $slug al componente tramite context. Ecco svelato l'arcano! Infine, una promessa di contenuto viene restituita dalla funzione.

In javascript una promessa non è debito, il metodo .then viene eseguito se e solo se la promessa viene mantenuta (cioè se l'esito della query è positivo). E' un modo flessibile per utilizzare modalità asincrone nella gestione dei flussi dati, ogni qual volta che c'è memoria di mezzo, input/output o semplicemente qualche lag, è importante gestire il tutto con una promessa asincrona.

Questo procedimento permette di generare una pagina per ogni articolo di post, su un indirizzo stabilito nel parametro path (es. https://tuosito.com/blog/nome-articolo-slug).

Adesso, se riproviamo a lanciare gatsby develop, la nostra nuova funzione scaricherà tutti gli slug e contenuti che trova su WordPress, montando ciascuna pagina ad un indirizzo statico definito (il path), dal cui template possiamo filtrare i contenuti a nostro piacimento. Per modificare il layout dei blog post, basterà semplicemente modificare il file /src/templates/post.js

Bello, vero? 😀

Funziona, ma si vede male, non siamo piu negli anni '90!

Adesso che abbiamo accesso ad un minimo di contenuti, possiamo cominciare a dare una stilizzata al tutto, nella prossima parte.