Apollo-cache: normalisatie en updates

InMemoryCache slaat elk object op met een cachesleutel die uit __typename en id bestaat: User:1, Post:42. Wanneer een query een User met id "1" retourneert, wordt die één keer onder deze sleutel opgeslagen, ongeacht in hoeveel verschillende query's deze voorkomt.

Elke volgende query die dezelfde User:1 ophaalt, leest uit de ene cachevermelding, zodat alle componenten dezelfde gegevens zien.

Wanneer een mutatie een bijgewerkt User:1-object retourneert, schrijft Apollo het naar de cachevermelding User:1. Elke actieve query waarin User:1 voorkwam, geeft de bijgewerkte velden automatisch weer in de gebruikersinterface zonder extra code.

Dit automatisch doorgeven is het belangrijkste voordeel van een genormaliseerde cache ten opzichte van een documentcache (een cache op basis van query's).

Lees het huidige gecachte resultaat van een query: cache.readQuery({ query: GET_USERS }) retourneert het gegevensobject alsof useQuery het had geretourneerd. Geeft null terug als de query niet in de cache staat.

Gebruik readQuery binnen updatefuncties van mutaties om de huidige lijst te lezen voordat je die wijzigt.

cache.writeQuery({ query: GET_USERS, data: { users: updatedUsers } }) schrijft rechtstreeks naar de cache en activeert opnieuw renderen in alle componenten die GET_USERS lezen. Er wordt geen netwerkaanvraag gedaan.

Combineer readQuery en writeQuery om onveranderlijke cache-updates te implementeren: lezen, een nieuwe array maken en terugschrijven.

cache.modify({ id: cache.identify(user), fields: { name: () => 'New Name' } }) wijzigt rechtstreeks de velden van een specifieke gecachte entiteit. Je hoeft niet eerst een query te lezen wanneer je de cache-ID van de entiteit kent.

Het fields-object koppelt veldnamen aan modifierfuncties die de huidige waarde ontvangen en de nieuwe waarde retourneren.

Geef een updatefunctie door aan useMutation: useMutation(ADD_POST, { update(cache, { data: { addPost } }) { cache.modify({ id: cache.identify(user), fields: { posts: existingPosts => [...existingPosts, addPost] } }); } }).

Hiermee voeg je het nieuwe bericht toe aan de gecachte berichtenarray van de gebruiker en werk je alle componenten bij die de berichtenlijst van de gebruiker weergeven.

cache.evict({ id: 'User:1' }) verwijdert de User:1-vermelding uit de cache. Elke actieve query waarin User:1 voorkwam, rendert opnieuw zonder die entiteit in het resultaat.

Roep na het verwijderen van vermeldingen cache.gc() aan om objecten te verwijderen die niet meer bereikbaar zijn vanuit hoofdquery's. Hiermee voorkom je geheugenlekken in langlopende toepassingen.

cache.gc() doorloopt de cachegrafiek vanaf alle actieve query's en verwijdert entiteiten die niet meer bereikbaar zijn. Je kunt dit veilig periodiek aanroepen of na mutaties in groepen die veel entiteiten verwijderen.

Entiteiten waarnaar actieve useQuery-hooks verwijzen, worden nooit door garbage collection opgeruimd; alleen verweesde entiteiten die geen deel meer uitmaken van een queryresultaat worden verwijderd.

Als je een enkele entiteit opvraagt (GET_USER op basis van id) die al als onderdeel van een lijstquery in de cache staat, kan Apollo die uit de cache lezen zonder een extra netwerkverzoek, met behulp van veldbeleid: keyArgs- en read-functies in het typebeleid.

De read-functie retourneert een cachereferentie: return toReference({ __typename: 'User', id: args.id }), waarmee je Apollo vertelt om uit de bestaande User:id-cachevermelding te lezen.

Als je entiteiten een ander veld dan id als unieke sleutel gebruiken, bijvoorbeeld slug of uuid, configureer je dit in het typebeleid: new InMemoryCache({ typePolicies: { Post: { keyFields: ['slug'] } } }).

Apollo gebruikt dan Post:my-post-slug als cachesleutel in plaats van een id-veld te vereisen, zodat normalisatie voor niet-standaard schema's behouden blijft.

refetchQueries: [{ query: GET_USERS }] in de opties van useMutation activeert een nieuwe netwerkaanvraag nadat de mutatie is voltooid. Dit is eenvoudiger, maar veroorzaakt altijd een netwerkaanvraag.

De updatefunctie wijzigt de cache lokaal en vermijdt de extra netwerkronde. Gebruik refetchQueries wanneer de logica voor het bijwerken van de cache te complex is om te schrijven of wanneer door de server berekende velden lokale cache-updates onbetrouwbaar maken.

InMemoryCache normaliseert entiteiten op basis van __typename+id, waardoor automatische updates tussen query's mogelijk zijn. Lees en schrijf de cache met cache.readQuery, cache.writeQuery en cache.modify. Verwijder entiteiten met cache.evict, gevolgd door cache.gc. Configureer aangepaste sleutelvelden via typePolicies voor primaire sleutels die niet op id zijn gebaseerd.

Gebruik updatefuncties van mutaties voor efficiënte lokale cache-updates; gebruik refetchQueries wanneer door de server berekende velden lokale updates onbetrouwbaar maken.