Cache di Apollo: normalizzazione e aggiornamenti

InMemoryCache memorizza ogni oggetto usando una chiave di cache composta da __typename e id: User:1, Post:42. Quando una query restituisce un User con id "1", l'oggetto viene memorizzato una sola volta con questa chiave, indipendentemente dal numero di query diverse che lo includono.

Qualsiasi query successiva che recupera lo stesso User:1 legge dalla singola voce della cache, garantendo che tutti i componenti visualizzino gli stessi dati.

Quando una mutation restituisce un oggetto User:1 aggiornato, Apollo lo scrive nella voce della cache User:1. Ogni query attiva che include User:1 riflette automaticamente i campi aggiornati nell'interfaccia, senza codice aggiuntivo.

Questo aggiornamento automatico è il principale vantaggio di una cache normalizzata rispetto a una cache basata su documenti (con chiavi di query).

Legge il risultato corrente memorizzato nella cache di una query: cache.readQuery({ query: GET_USERS }) restituisce l'oggetto dati come se fosse stato restituito da useQuery. Restituisce null se la query non è presente nella cache.

Utilizzi readQuery all'interno delle funzioni di aggiornamento delle mutation per leggere l'elenco corrente prima di modificarlo.

cache.writeQuery({ query: GET_USERS, data: { users: updatedUsers } }) scrive direttamente nella cache, attivando il re-render di tutti i componenti che leggono GET_USERS. Non viene effettuata alcuna richiesta di rete.

Combini readQuery e writeQuery per implementare aggiornamenti immutabili della cache: legga, crei un nuovo array e lo riscriva.

cache.modify({ id: cache.identify(user), fields: { name: () => 'New Name' } }) modifica direttamente i campi di una specifica entità nella cache. Non è necessario leggere prima una query quando si conosce l'ID della cache dell'entità.

L'oggetto fields associa i nomi dei campi a funzioni di modifica che ricevono il valore corrente e restituiscono il nuovo valore.

Passi una funzione update a useMutation: useMutation(ADD_POST, { update(cache, { data: { addPost } }) { cache.modify({ id: cache.identify(user), fields: { posts: existingPosts => [...existingPosts, addPost] } }); } }).

Questa operazione aggiunge il nuovo post all'array dei post memorizzato nella cache dell'utente, aggiornando tutti i componenti che mostrano l'elenco dei post dell'utente.

cache.evict({ id: 'User:1' }) rimuove la voce User:1 dalla cache. Qualsiasi query attiva che include User:1 viene nuovamente renderizzata senza quell'entità nel risultato.

Dopo aver rimosso le voci, chiami cache.gc() per eliminare gli oggetti che non sono più raggiungibili dalle query radice. In questo modo si evitano perdite di memoria nelle applicazioni a esecuzione prolungata.

cache.gc() percorre il grafo della cache partendo da tutte le query attive e rimuove le entità non più raggiungibili. È sicuro chiamarla periodicamente o dopo mutation in batch che eliminano molte entità.

Le entità a cui fanno riferimento hook useQuery attivi non vengono mai sottoposte a garbage collection: vengono eliminate solo le entità orfane che non fanno più parte di alcun risultato di query.

Se esegue una query per una singola entità (GET_USER per id) già memorizzata nella cache come parte di una query di elenco, Apollo può leggerla dalla cache senza un round trip di rete, utilizzando le field policy: keyArgs e le funzioni read nella type policy.

La funzione read restituisce un riferimento alla cache: return toReference({ __typename: 'User', id: args.id }), indicando ad Apollo di leggere dalla voce esistente della cache User:id.

Se le entità usano un campo diverso da id come chiave univoca (ad esempio slug o uuid), lo configuri nella type policy: new InMemoryCache({ typePolicies: { Post: { keyFields: ['slug'] } } }).

Apollo usa quindi Post:my-post-slug come chiave della cache invece di richiedere un campo id, mantenendo la normalizzazione per gli schemi non standard.

refetchQueries: [{ query: GET_USERS }] nelle opzioni di useMutation attiva un nuovo recupero dalla rete al termine della mutation. È più semplice, ma comporta sempre una richiesta di rete.

La funzione update modifica la cache localmente ed evita il round trip di rete. Utilizzi refetchQueries quando la logica di aggiornamento della cache è troppo complessa da scrivere o quando i campi calcolati dal server rendono inaffidabili gli aggiornamenti locali.

Qual è il formato predefinito della chiave della cache utilizzato da InMemoryCache per memorizzare le entità?

InMemoryCache normalizza le entità usando __typename+id, consentendo aggiornamenti automatici tra query. Legga e scriva nella cache con cache.readQuery, cache.writeQuery e cache.modify. Rimuova le entità con cache.evict seguito da cache.gc. Configuri campi chiave personalizzati tramite typePolicies per chiavi primarie diverse da id.

Utilizzi le funzioni di aggiornamento delle mutation per una gestione efficiente della cache locale; utilizzi refetchQueries quando i campi calcolati dal server rendono inaffidabili gli aggiornamenti locali.