Data Fetching in React: tre metodi

Nell'Architettura dei Microservizi un principio fondamentale è come recuperare dati da un'API, attività imprescindibile in un applicativo moderno in React. Come fare? Ci sono diversi metodi per ottenere il medesimo risultato, citando uno dei maestri della moderna didattica, quale usare, sono scelte private...
Vediamo i metodi nel dettaglio.

Data-fetching in React

Premessa iniziale, non introduciamo troppa complessità a livello di state-management e lasciamo da parte per ora strumenti come Redux o useContext, tornerò sull'argomento perché sicuramente merita approfondimento; in questi esempi ci limitiamo a salvare localmente in un generico State i dati con la classica array-destructoring.

const [data, setData] = useState(null);

useEffect

Dato che stiamo per creare un side-effect, si usa useEffect! Di solito quando devo usare useEffect, lo scrivo direttamente in questo modo:

useEffect(() => {

}, [])

La considero la sua forma base, la funzione e l'array di dipendenza (vuota) già bell e pronta all'uso, in modo da essere eseguito al primo render (e basta).
In altri casi, potrebbe essere necessario invece inserire elementi nelle dipendenze ma anche qui, teniamo la cosa semplice per ora.

Veniamo finalmente ai diversi metodi

Uso di fetch vs uso di axios

Il primo modo consiste nell'utilizzare il metodo fecth(), metodo nativo in JavaScript (quindi nessuna libreria da aggiungere all'applicativo) e la conseguente catena di promises che genera:

useEffect(() => {
    fetch(`${url}`)
        .then((res) => res.json())
        .then((apiData) => {
            setData(apiData.message);
        })
}, [])

In pratica fetch ritorna una promise, trasformiamo res in dati json, ritorniamo un'ulteriore promise in cui trasferiamo i dati json allo state che ci interessa.
In alternativa si può usare la libreria Axios, molto popolare e semplice da utilizzare.

npm install axios

Ricodiamoci di importare axios nel documento

import axios from 'axios';

e possiamo finalmente ristrutturare il codice precedente come segue:

useEffect(() => {
    axios.get(`${url}`)
        .then((res) => {
            setData(res.data.message);
        })
}, [])

Come si noterà immediatamente, vi è un passaggio in meno, non è necessario rendere i dati json poiché così già vengono restituiti in axios, inoltre i dati sono accessibili nell'oggetto response (qui 'res') nella proprietà "data".

Vediamo ora le tre alternative di cui parlavo all'inizio, proseguendo sull'onda dell'entusiasmo che Axios genera fin dai suoi primi utilizzi, per quanto poi nella pratica invece tenda sempre a non usarlo per non aggiungere un package, una dipendenza e in estrema ration, una vulnerabilità (non sto dicendo che usare axios sia pericoloso, torneremo sul tema non temere).

try / catch

https://designcode.io/react-hooks-handbook-fetch-data-from-an-api