Perché la gestione delle API è cruciale in React?

Un’applicazione React senza dati è come una vetrina vuota. Che si tratti di caricare profili utente, post di un blog o dati di prodotto, la capacità di comunicare con un server in modo efficiente è non negoziabile. La sfida non è solo “come” recuperare i dati, ma come farlo gestendo stati di caricamento, errori e aggiornamenti della UI in modo pulito e scalabile.

In questo scenario, due paradigmi dominano: REST, l’approccio collaudato e onnipresente, e GraphQL, l’alternativa flessibile che sta guadagnando sempre più terreno. Vediamo come implementarli al meglio in un’applicazione React.

L’approccio Classico: API REST con Fetch e Custom Hooks

Le API REST (Representational State Transfer) sono lo standard de facto da anni. Si basano su un’architettura client-server stateless dove le risorse sono accessibili tramite URL (endpoint) specifici, utilizzando i metodi HTTP standard (GET, POST, PUT, DELETE).

Esempio Pratico: Fetch in un Componente React

Il modo più diretto per chiamare un’API REST è usare l’hook useEffect e la funzione nativa `fetch`. Qui gestiamo manualmente gli stati di caricamento ed errore.

import React, { useState, useEffect } from 'react';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchUser = async () => {
      try {
        setLoading(true);
        const response = await fetch(`https://api.example.com/users/${userId}`);
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        const data = await response.json();
        setUser(data);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchUser();
  }, [userId]); // Riesegue l'effetto se userId cambia

  if (loading) return <div>Caricamento...</div>;
  if (error) return <div>Errore: {error}</div>;

  return (
    <div>
      <h1>{user?.name}</h1>
      <p>Email: {user?.email}</p>
    </div>
  );
}

export default UserProfile;
		

Migliorare la Riusabilità con Custom Hooks

La logica precedente funziona, ma si ripete in ogni componente. Creare un custom hook come `useFetch` centralizza la logica e pulisce i componenti.

// hooks/useFetch.js
import { useState, useEffect } from 'react';

export function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      // ... logica fetch identica a prima ...
    };
    fetchData();
  }, [url]);

  return { data, loading, error };
}

// Nel componente:
// const { data: user, loading, error } = useFetch(`https://api.example.com/users/${userId}`);
		

La Rivoluzione Flessibile: API React GraphQL

GraphQL è un linguaggio di query per API sviluppato da Facebook. La sua forza sta nel permettere al client di richiedere esattamente i dati di cui ha bisogno, né più né meno, risolvendo i problemi di over-fetching e under-fetching tipici di REST.

Invece di avere endpoint multipli, GraphQL ne espone generalmente uno solo. Il client invia una “query” che descrive la forma dei dati desiderati.

Integrazione con Apollo Client

La libreria Apollo Client è lo standard per l’integrazione di GraphQL in React. Fornisce hook potenti che gestiscono automaticamente fetching, caching, loading ed error states.

• Caching Intelligente: Apollo Client normalizza e salva in cache i dati, riducendo le chiamate di rete superflue.
• Gestione Stato Semplificata: Gli hook come `useQuery` e `useMutation` forniscono tutto il necessario.
• Developer Experience Superiore: Grazie agli strumenti di debug e alla forte tipizzazione.

Esempio Pratico: `useQuery` di Apollo

Dopo aver configurato l’ApolloProvider, l’uso nel componente è incredibilmente pulito.

import React from 'react';
import { gql, useQuery } from '@apollo/client';

const GET_USER_PROFILE = gql`
  query GetUser($userId: ID!) {
    user(id: $userId) {
      id
      name
      email
      posts {
        title
      }
    }
  }
`;

function UserProfile({ userId }) {
  const { loading, error, data } = useQuery(GET_USER_PROFILE, {
    variables: { userId },
  });

  if (loading) return <div>Caricamento...</div>;
  if (error) return <div>Errore: {error.message}</div>;

  return (
    <div>
      <h1>{data.user.name}</h1>
      <p>Email: {data.user.email}</p>
      <h3>Post:</h3>
      <ul>
        {data.user.posts.map(post => <li key={post.id}>{post.title}</li>)}
      </ul>
    </div>
  );
}

export default UserProfile;
		

Nota come con una sola query otteniamo sia i dati dell’utente che i titoli dei suoi post, senza chiamate aggiuntive. Questa è la potenza di GraphQL.

Conclusione: Quale Scegliere?

La scelta tra REST e GraphQL dipende dal progetto. REST è perfetto per API semplici e ben definite. È robusto, maturo e l’ecosistema è vastissimo. GraphQL brilla in applicazioni complesse con requisiti dati variabili, specialmente su mobile dove la banda è preziosa.

Indipendentemente dalla scelta, l’obiettivo in React è lo stesso: astrarre la logica di data-fetching dai componenti UI. Adottare una solida architettura per la gestione delle API React GraphQL o REST con custom hooks e servizi dedicati è il passo fondamentale per creare un’applicazione scalabile, performante e piacevole da manutenere.

Inizia a sperimentare con entrambi gli approcci nel tuo prossimo progetto per capire quale si adatta meglio al tuo stile di sviluppo e alle esigenze del prodotto.