Configurare Apollo Client in React

Installi @apollo/client e graphql. Il pacchetto graphql è una dipendenza peer richiesta da Apollo Client per analizzare i documenti di query con il tag template gql.

Nei progetti TypeScript, entrambi i pacchetti includono le proprie definizioni dei tipi, quindi non sono necessari pacchetti @types.

Istanziare ApolloClient con una cache e un link. La configurazione più semplice è: new ApolloClient({ cache: new InMemoryCache(), uri: '/graphql' }). La forma abbreviata uri crea internamente un HttpLink.

Per un controllo maggiore, costruisca manualmente la catena di link e la passi all'opzione link invece di uri.

Avvolga l'applicazione React in ApolloProvider con la prop client: ApolloProvider client={client}. In questo modo l'istanza di Apollo Client è disponibile a tutti i componenti discendenti tramite il context di React.

Ogni chiamata a useQuery e useMutation nell'albero dei componenti usa automaticamente questo client senza dover passare prop attraverso tutti i livelli.

InMemoryCache è la cache predefinita di Apollo Client. Normalizza i dati recuperati in base al tipo e all'ID, memorizzando ogni entità con una chiave di cache univoca, ad esempio User:1. Quando una query recupera User:1, tutte le letture successive di quell'entità ricevono i dati aggiornati.

Grazie a questa normalizzazione, l'aggiornamento di un utente in una mutation aggiorna automaticamente ogni risultato di query che include quell'utente, senza codice aggiuntivo.

HttpLink gestisce il trasporto HTTP da Apollo Client al server GraphQL. Lo configuri con uri e, facoltativamente, fetch, headers e credentials.

Per i casi d'uso avanzati, i link split instradano operazioni diverse verso endpoint diversi: le subscription passano tramite WebSocket (WebSocketLink), mentre query e mutation passano tramite HTTP (HttpLink).

Importi setContext da @apollo/client/link/context. Crei un link di autenticazione: const authLink = setContext((_, { headers }) => ({ headers: { ...headers, authorization: 'Bearer ' + getToken() } })). Lo concateni prima di HttpLink: authLink.concat(httpLink).

Il link setContext viene eseguito prima di ogni richiesta e aggiunge dinamicamente le intestazioni di autenticazione a ogni operazione.

Componga i link usando ApolloLink.from([authLink, errorLink, httpLink]) oppure authLink.concat(httpLink). I link sono middleware: ciascun link elabora l'operazione e la passa a next(). L'ultimo link della catena invia la richiesta HTTP effettiva.

Catene comuni: link di autenticazione (aggiunge le intestazioni) + link degli errori (gestisce gli errori) + link HTTP (invia la richiesta).

Importi onError da @apollo/client/link/error. Il link degli errori intercetta globalmente gli errori GraphQL e gli errori di rete. Lo utilizzi per reindirizzare a una pagina di accesso in caso di errori UNAUTHENTICATED o per visualizzare un toast di errore globale in caso di problemi di rete.

Il link degli errori deve comparire prima del link HTTP nella catena, ma può chiamare forward(operation) per riprovare la richiesta.

cache-first (predefinita): restituisce immediatamente i dati presenti nella cache; esegue un refetch in background se sono obsoleti. network-only: recupera sempre i dati dal server e aggiorna la cache. cache-and-network: restituisce immediatamente la cache e avvia il recupero dei dati, aggiornando l'interfaccia quando arriva la risposta. cache-only: legge esclusivamente dalla cache e genera un errore se i dati non sono memorizzati. no-cache: recupera sempre i dati e non li scrive mai nella cache.

Scelga in base ai requisiti di aggiornamento dei dati: i dashboard usano spesso cache-and-network; i moduli del profilo utente usano network-only.

Imposti la fetchPolicy predefinita in defaultOptions di InMemoryCache: new ApolloClient({ defaultOptions: { watchQuery: { fetchPolicy: 'cache-and-network' } } }). Le singole chiamate a useQuery possono sovrascrivere questa impostazione per ogni query.

Impostare una predefinita globale adeguata riduce il codice ripetitivo necessario per specificare fetchPolicy in ogni chiamata a un hook.

L'estensione del browser Apollo Client DevTools aggiunge un pannello Apollo agli Chrome DevTools. Mostra tutte le query memorizzate nella cache e i relativi dati attuali, consente di esplorare la cache normalizzata e permette di eseguire nuovamente le query dal pannello DevTools.

La installi dal Chrome Web Store e inizializzi il client con devtools: { enabled: true }, l'impostazione predefinita in modalità di sviluppo.

Nella catena di link di Apollo Client, dove deve essere posizionato errorLink rispetto a httpLink?

Installi @apollo/client e graphql, crei un ApolloClient con InMemoryCache e una catena di link e avvolga l'applicazione in ApolloProvider. La catena di link compone authLink (aggiunge i token), errorLink (gestisce globalmente gli errori) e httpLink (gestisce il trasporto HTTP). La fetch policy stabilisce la priorità tra cache e rete; InMemoryCache normalizza le entità in base a tipo+id.

L'estensione del browser Apollo DevTools semplifica l'ispezione della cache e il debugging.