Perché GraphQL?
Con GraphQL, gli sviluppatori possono richiedere esattamente il set di dati di cui hanno bisogno, niente di più e niente di meno. Questo "chiedi ciò che ti serve" è una deviazione dal modello REST, dove si ricevono dati strutturati rigidamente che spesso includono informazioni non necessarie.
Ecco alcune caratteristiche distintive di GraphQL:
- Richieste Specifiche: Precisione nel richiedere specifici campi su oggetti.
- Aggregazione di dati: Possibilità di aggregare richieste da più sorgenti in un'unica chiamata.
- Efficienza di rete: Minimizza i dati trasmessi eliminando il sovraccarico.
- Sviluppo agile: Facilita lo sviluppo frontend grazie alla possibilità di modificare le query senza backend adjustments.
Per introdurre GraphQL e mostrarne alcune funzionalità, in questa guida useremo Strapi. Strapi è un CMS headless che supporta TypeScript e GraphQL in modo nativo.
Installazione di Strapi con TypeScript
npx create-strapi-app@latest nome-progetto --ts --quickstart
cd nome-progetto
Questo setup inizializza un progetto Strapi usando TypeScript, offrendo sia vantaggi in termini di sicurezza che delle pre-impostazioni avanzate che ne facilitano lo sviluppo e la manutenibilità.
Integrare GraphQL in Strapi
Posizionandoti nella directory corretta, come mostrano nell'esempio di codice precedente, proseguiamo installando il plugin di GraphQL
npm install @strapi/plugin-graphql
Successivamente all'installazione del plugin, è necessario configurarlo.
Aggiungi o modifica il file config/plugins.ts (crealo se non esiste) con il seguente codice:
// config/plugins.ts
const config = {
graphql: {
enabled: true,
},
};
export default config;
Questo plugin consentirà a Strapi di gestire le query e le mutations di GraphQL automaticamente.
Creazione di un Content-Type su Strapi
Strapi, gestisce i suoi contenuti attraverso il "Content-Types Builder", che può essere gestito sia attraverso il codice interagendo con la struttura di Strapi stessa, che attraverso la propria interfaccia.
In questo caso, attraverso il "Content Manager" dell'interfaccia, crea un nuovo content-type denominato Articles.
Successivamente, crea due field: Title e Content ( di tipo Text ). In questo modo, potremmo utilizzare questo Content-Type per le nostre query/mutations e gestire il nostro set di dati.
Query e Mutations in GraphQL
GraphQL si distingue in due operazioni fondamentali: query e mutations.
Query: Le query sono utilizzate per leggere o recuperare valori. Non modificano i dati, rendendole operazioni sicure e idempotenti (cioè, una query eseguita più volte produce lo stesso risultato senza effetti collaterali).
// graphql
query {
articles {
data {
attributes {
title
content
}
}
}
}
Mutations: A differenza delle query, le mutations sono usate per scrivere o modificare i dati. Ogni mutation può anche comportare effetti secondari (come inviare una notifica email dopo aver creato un articolo).
mutation {
createArticle(data: {title: "Introduzione a GraphQL", content: "Where art meets code"}) {
data {
id
attributes {
title
content
}
}
}
}
Il codice precedente, ci mostra come creare una nuova entity con un Title e un Content personalizzato.
Le mutations vengono utilizzate per creare, modificare ed eliminare set di dati direttamente connesse al nostro database.
Di seguito, l'esempio, mostra una mutation che effettua una update dell'articolo con ID 1.
// graphql
mutation {
updateArticle(id: 1, data: {title: "GraphQL aggiornato - artCode", content: "GraphQL e Strapi: un duo dinamico."}) {
data {
attributes {
title
content
}
}
}
}
Inoltre, grazie alle mutations, conoscendo l'id dell'entity che vogliamo eliminare, sarà semplice effettuare anche un operazione di DELETE della stessa.
Di seguito un esempio:
// graphql
mutation {
deleteArticle(id: 1) {
data {
id
}
}
}
Utilizzare GraphQL con Strapi, facilita enormemente la gestione delle API, permettendo operazioni CRUD dettagliate e specifiche attraverso una interfaccia semplice e potente.
Gli esempi di mutations forniti, illustrano come manipolare i dati efficacemente, rendendo le tue applicazioni più flessibili e performanti.
Ritornando al nostro esempio, una volta avviato Strapi, l'interfaccia sarà accessibile tramite l'indirizzo http://localhost:1337/admin
Nota bene: Strapi implementa un sistema avanzato e flessibile per la gestione degli utenti e dei permessi, che regola anche l'accesso agli endpoint. Per eseguire query o mutations su un content type specifico, è essenziale configurare le autorizzazioni appropriate nel pannello di controllo di Strapi.
Di seguito, un esempio di una fetch in Javascript per poter recuperare i dati attraverso GraphQL dal nostro Strapi:
// Definizione della query GraphQL
const query = `
query {
articles {
data {
attributes {
title
content
}
}
}
}
`;
// Funzione asincrona per eseguire la fetch request
async function fetchArticles() {
const options = {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({ query })
};
try {
const response = await fetch('http://localhost:1337/graphql', options);
const data = await response.json();
console.log(data);
return data;
} catch (error) {
console.error('Error fetching data: ', error);
}
}
// Chiamata della funzione
fetchArticles();
L'adozione di GraphQL e Strapi non solo ottimizza e semplifica la gestione delle API ma trasforma anche il modo in cui interagisci con i dati, rendendo ogni query precisa ed efficiente. Questa integrazione elimina la complessità e accelera lo sviluppo, permettendoti di concentrarti sulla creazione di funzionalità innovative piuttosto che sulla gestione dei dati.
Non vedi l'ora di sperimentare questa potente combinazione nei tuoi progetti? La tua prossima API potrebbe essere più semplice e performante di quanto immagini!
