[Parte 2] Dati da WordPress

[gabacode]

Parte 2: Gatsby e Wordpress

Per questo progetto, utilizzeremo WordPress come backend, per sfruttare al meglio le sue capacità come CMS, collegandolo a Gatsby tramite GraphQL. WordPress ha già di suo delle fantastiche REST API che si possono chiamare da qualsiasi frontend, ma può anche essere abilitato ad utilizzare GraphQL. Essenzialmente GraphQL utilizza dei nodi gerarchici, tramite i quali è possibile effettuare query molto specifiche, senza bisogno di dover configurarle dal lato del server. Detto in parole povere è molto piu efficiente e leggero, e spesso è accoppiato da interfacce grafiche che facilitano la struttura delle query desiderate. Proprio perchè le query devono essere specifiche, potrebbe rivelarsi meno flessibile delle REST API in alcuni ambiti. Tuttavia, Gatsby ci facilita la vita anche in quello, incorporando delle funzioni che facilitano l'accesso ai filtri tramite variabili, come vedremo in seguito.

A differenza di un normale portale WordPress, in cui il frontend è spesso sviluppato in PHP e ogni richiesta corrisponde ad una chiamata ad un database, essendo Gatsby un generatore di contenuti statici, effettua tutte le chiamate al database una sola volta in fase di build, e ulteriori volte solo quando un contenuto del database ha subito variazioni. Questo lo rende adatto a tutti quei portali in cui gli aggiornamenti non sono immediati (come ad esempio blogs, portfolios etc).

1. Wordpress

Installare i seguenti plugins:

• WPGraphQL
• WpGatsby

Possiamo notare che la IDE è stata attivata, dando già un'occhiata ai tipi di contenuti che le nuove query possono restituirci facilmente. All'interno dei settaggi per il plugin possiamo prendere nota dell'URL endpoint che utilizzeremo per le query, di default è solitamente https://dominio.com/graphql

2. Gatsby

Gatsby ha dei veri e propri "plugins" che si possono installare e configurare, ciò ci semplifica davvero molto il lavoro, accelerando lo sviluppo dell'applicazione che stiamo progettando.
Ritornando al nostro progetto, aggiungiamo qualche utile libreria tramite npm:

npm install gatsby-source-wordpress

Aggiungiamo il plugin al file gatsby-config.js che abbiamo creato precedentemente.

module.exports = {
  plugins: [
    {
      resolve: "gatsby-source-wordpress",
      options: {
        url: "https://dominio.com/graphql",
      },
    },
  ],
};

Se adesso reinseriamo il comando gatsby develop sul nostro terminale, vedremo che la console si è popolata di nuovi contenuti. Quelli sono i contenuti di WordPress che vengono scaricati da Gatsby e resi statici.

Gatsby offre una comoda IDE per esplorare le query che vogliamo fetchare tramite GraphQL, accessibile all'indirizzo http://localhost:8000/___graphql

In questo modo, spulciando le spunte sulla sinistra possiamo vedere ad esempio che possiamo cercare tutti i titoli e date dei post creati nell'anno 2019 con la seguente query:

query MyQuery {
  allWpPost(filter: {date: {gt: "2018", lt: "2020"}}) {
    nodes {
      title
      date
    }
  }
}

Piu informazioni sui filtri sono disponibili a questo indirizzo

3. In pratica

Adesso possiamo modificare la nostra home (index.js) cercando di tirarci, ad esempio, tutti i titoli e slug degli ultimi 10 post del blog.

query{
  allWpPost(limit: 10){
    nodes {
      title
      slug
    }
  }
}

Inseriamo la query e un semplice loop all'interno della home page:

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

// Questa è la nostra query
export const query = graphql`
  query{
    allWpPost(limit: 10){
      nodes {
        title
        slug
      }
    }
  }
`
// Questo è il component Home (la nostra homepage)
export default function Home({data}){
  
  // Dichiariamo l'array che vogliamo
  const posts = data.allWpPost.nodes
  
  return(
    <div>
      {
      // Per ogni post crea una div con un link
        posts.map(post => (
          <div>
            <a href={post.slug}>
              {post.title}
            </a>
          </div>
        ))
      }
    </div>
  )
}

• Nelle prime righe importiamo le librerie necessarie (graphql e React)
• Definiamo la query che ci interessa (che possiamo anche copiare dalla IDE)
• Creiamo una funzione che prende i dati dalla query e crea un loop per ogni risultato.

Il metodo .map è una specie di forEach: per ogni elemento contenuto all'interno di un array (nel nostro caso posts) seleziona una variabile arbitraria (post) e per ogni post restituisce una funzione. Nel nostro caso la funzione è una <div> che al suo interno contiene un link che porta allo slug del post, e ha come titolo il titolo del post.
Questa sintassi, un pò a metà tra HTML e Javascript, si chiama JSX. Quando vogliamo utilizzare javascript all'interno dell'html lo facciamo aprendo parentesi graffe { } e inserendo il codice javascript all'interno.

Come si può notare, tutta la query viene inserita all'interno dell'oggetto "data", e da lì i vari nodi si comportano come veri e propri oggetti JSON.

In caso di equivoci

Ogni tanto può capitare di perdersi tra le query e non capire bene in quale nodo siamo finiti 😰
In questo caso è molto utile utilizzare all'interno del codice HTML, l'utility JSON.stringify in questo modo:

<pre>{JSON.stringify(data, null, 4)}</pre>

che praticamente restituisce l'oggetto genitore che stiamo cercando di chiamare, lo formatta in maniera carina e con indentazione, e ci salva la giornata 😀