Articolo originale: https://www.freecodecamp.org/news/fetch-data-react/

In React esistono molti modi per recuperare i dati da un'API esterna. Ma quale dovresti usare per le tue applicazioni nel 2021?

In questo tutorial, esamineremo cinque dei modelli più comunemente utilizzati per recuperare i dati con React effettuando una richiesta HTTP a una API REST.

Non vedremo solo come recuperare i dati, ma anche come gestire al meglio il caricamento e lo stato di errore durante il recupero dei dati.

Iniziamo!

Per tutti questi esempi, utilizzeremo un endpoint della popolare API Placeholder JSON, ma puoi utilizzare una API che hai creato (come un'API Node con Express) o qualsiasi altra API pubblica.

1. Come recuperare i dati in React utilizzando l'API Fetch

Il modo più accessibile per recuperare i dati con React è utilizzare l'API Fetch.

L'API Fetch è uno strumento integrato nella maggior parte dei browser moderni sull'oggetto window (window.fetch) e ci consente di effettuare richieste HTTP molto facilmente utilizzando promesse JavaScript.

Per fare una semplice richiesta GET con fetch dobbiamo solo includere l'URL endpoint a cui vogliamo fare la nostra richiesta. Vogliamo fare questa richiesta una volta che il nostro componente React è stato montato.

Per fare ciò, facciamo la nostra richiesta all'interno dell'hook useEffect e ci assicuriamo di fornire un array di dipendenze vuoto come secondo argomento, in modo che la nostra richiesta venga effettuata solo una volta (supponendo che non dipenda da nessun altro dato nel nostro componente).

clip-1-fetch-min

Durante la prima callback  .then(), controlliamo se riceviamo la risposta corretta (response.ok). In tal caso, restituiamo la nostra risposta per passarla alla funzione successiva, quindi la richiamiamo come dati JSON, poiché sono i dati che otterremo dalla nostra API di Random User.

Se non è una risposta corretta, si presume che si sia verificato un errore durante la richiesta. Usando fetch, dobbiamo gestire noi stessi gli errori, quindi lanciamo un errore response affinché venga gestito dal nostro callback catch.

Qui nel nostro esempio stiamo mettendo i nostri dati relativi all'errore nello stato con setError. Se c'è un errore, restituiamo il testo "Error!".

Nota che puoi anche visualizzare un messaggio di errore dall'oggetto errore che abbiamo inserito nello stato usando error.message.

Usiamo la callback .finally() come funzione che viene sempre chiamata sia che la nostra promessa si è risolta con successo che non. In essa, abbiamo impostato loading su false, in modo da non vedere più il nostro testo di caricamento.

Quindi vediamo o i nostri dati sulla pagina se la richiesta è stata effettuata con successo, o in caso contrario, che c'è stato un errore nell'effettuare la richiesta .

2. Come recuperare i dati in React utilizzando Axios

Il secondo approccio per fare richieste con React consiste nell'usare la libreria axios.

In questo esempio, modificheremo semplicemente il nostro esempio Fetch installando prima axios usando npm:

npm install axios

Quindi lo importeremo nella parte superiore del file del nostro componente.

Ciò che axios ci consente di fare è utilizzare la stessa identica sintassi di promessa di fetch, ma invece di utilizzare il nostro primo callback per determinare manualmente se la risposta è corretta e in caso contrario,  generare un errore, axios si occupa di questo per noi.

Inoltre, ci consente in quel primo callback di ottenere i dati JSON da response.data.

La cosa conveniente dell'utilizzo di axios è che ha una sintassi molto più breve, cosa che ci consente di ridurre il codice, oltre a includere molti strumenti e funzionalità che mancano nella API fetch.

Tutte queste ragioni sono il motivo per cui è diventata la libreria HTTP di riferimento per gli sviluppatori React.

clip-2-assi-min

3. Come recuperare i dati in React utilizzando la sintassi async/await

In ES7 è diventato possibile risolvere le promesse utilizzando la sintassi async / await.

Il vantaggio di questo approccio è che ci consente di rimuovere le nostre callback .then(), .catch(), e .finally() e di recuperare semplicemente i nostri dati risolti in modo asincrono scrivendo del codice sincrono e tutto ciò senza promesse.

In altre parole, non dobbiamo fare affidamento sulle funzioni di callback quando utilizziamo async / await con React.

Dobbiamo essere consapevoli del fatto che quando usiamo useEffect, la funzione effetto (il primo argomento) non può essere trasformata in una funzione async.

Se diamo un'occhiata all'errore di linting che React ci dà se abbiamo usato Create React per costruire il nostro progetto, ci verrà detto che questa funzione non può essere asincrona per prevenire la race condition.

clip-3-asincrono-attendono-min

Di conseguenza, invece di rendere quella funzione asincrona, possiamo semplicemente creare nel nostro componente  una funzione asincrona separata, che possiamo chiamare in modo sincrono. Cioè, senza anteporre la parola chiave await .

In questo esempio, creiamo una funzione asincrona chiamata getData. Chiamandola in modo sincrono all'interno di useEffect, possiamo recuperare i nostri dati come ci aspetteremmo.

4. Come recuperare i dati in React utilizzando un hook React personalizzato (useFetch)

Nel tempo, potresti renderti conto che diventa un po' noioso e dispendioso in termini di tempo continuare a scrivere l'hook useEffect con tutto il suo boilerplate all'interno di ogni componente in cui desideri recuperare i dati.

Per ridurre il nostro codice riutilizzato, possiamo usare un hook personalizzato come un'astrazione speciale, che possiamo scrivere noi stessi da una libreria di terze parti (come se fossimo qui, usando la libreria react-fetch-hook).

Un hook personalizzato che effettua la nostra richiesta HTTP ci consente di rendere i nostri componenti molto più concisi. Tutto quello che dobbiamo fare è chiamare il nostro hook nella parte superiore del nostro componente.

clip-4-usefetch-min

In questo caso, otteniamo tutti i dati, il caricamento e lo stato di errore di cui abbiamo bisogno per poter utilizzare la stessa struttura per il nostro componente come prima, ma senza dover usare useEffect. Inoltre, non abbiamo più bisogno di scrivere imperativamente come risolvere la nostra promessa dalla nostra richiesta GET ogni volta che vogliamo fare una richiesta.

5. Come recuperare i dati in React utilizzando la libreria di Query React

L'uso di hook personalizzati è un ottimo approccio per scrivere richieste HTTP molto più concise per ottenere i nostri dati e tutti i relativi stati. Ma una libreria che porta davvero il recupero dei dati con gli hook al livello successivo è React Query.

React Query non solo ci consente di utilizzare hook personalizzati che possiamo riutilizzare tra i nostri componenti in modo conciso, ma ci offre anche una grande quantità di strumenti di gestione dello stato per essere in grado di controllare quando, come e con quale frequenza i nostri dati vengono recuperati .

In particolare, la query React ci fornisce una cache, che puoi vedere di seguito tramite React Query Devtools. Questo ci consente di gestire facilmente le richieste che abbiamo fatto in base al valore della chiave che specifichiamo per ogni richiesta.

Per le richieste seguenti, la nostra query per i nostri dati utente casuali è identificata dalla stringa 'random-user' (fornita come primo argomento per useQuery).

clip-5-reagire-query-min

Facendo riferimento a quella chiave, possiamo fare cose potenti come recuperare, convalidare o ripristinare le nostre varie query.

Se ci affidiamo alla nostra soluzione di hook personalizzata o useEffect, recupereremo i nostri dati ogni volta che il nostro componente viene montato. Fare questo nella maggior parte dei casi non è necessario. Se il nostro stato esterno non è cambiato, idealmente non dovremmo mostrare lo stato di caricamento ogni volta che visualizziamo il nostro componente.

React Query migliora notevolmente la nostra esperienza utente provando a servire prima i nostri dati dalla sua cache e quindi aggiornando i dati in background per visualizzare le modifiche se il nostro stato API è cambiato.

Ciò offre anche un arsenale di potenti strumenti per gestire meglio le nostre richieste in base a come i nostri dati cambiano attraverso la nostra richiesta.

Ad esempio, se la nostra applicazione ci ha consentito di aggiungere un utente diverso, potremmo voler recuperare quella query, una volta che l'utente è stato aggiunto. Se sappiamo che la query viene modificata molto frequentemente, potremmo voler specificare che dovrebbe essere aggiornata ogni minuto circa. O essere aggiornata ogni volta che l'utente clicca sulla la scheda della finestra.

In breve, React Query è la soluzione ideale non solo per effettuare richieste in modo conciso, ma anche per gestire in modo efficiente ed efficace i dati che vengono restituiti per le nostre richieste HTTP attraverso i componenti della nostra app.