Apollo-Cache: Normalisierung und Aktualisierungen

InMemoryCache speichert jedes Objekt unter einem Cache-Schlüssel, der sich aus __typename und id zusammensetzt: User:1, Post:42. Wenn eine Abfrage einen User mit der id "1" zurückgibt, wird er unabhängig davon, wie viele verschiedene Abfragen ihn enthalten, nur einmal unter diesem Schlüssel gespeichert.

Jede nachfolgende Abfrage, die denselben User:1 abruft, liest aus diesem einzigen Cache-Eintrag. Dadurch sehen alle Komponenten dieselben Daten.

Wenn eine Mutation ein aktualisiertes User:1-Objekt zurückgibt, schreibt Apollo es in den Cache-Eintrag User:1. Jede aktive Abfrage, die User:1 enthält, übernimmt die aktualisierten Felder automatisch in der Benutzeroberfläche, ohne dass zusätzlicher Code erforderlich ist.

Diese automatische Weitergabe ist der wichtigste Vorteil eines normalisierten Caches gegenüber einem Dokument-Cache (nach Abfrageschlüssel).

Liest das aktuelle Cache-Ergebnis einer Abfrage: cache.readQuery({ query: GET_USERS }) gibt das Datenobjekt zurück, als hätte useQuery es zurückgegeben. Gibt null zurück, wenn sich die Abfrage nicht im Cache befindet.

Verwenden Sie readQuery innerhalb von Mutation-Update-Funktionen, um die aktuelle Liste vor ihrer Änderung zu lesen.

cache.writeQuery({ query: GET_USERS, data: { users: updatedUsers } }) schreibt direkt in den Cache und löst dadurch in allen Komponenten, die GET_USERS lesen, erneute Render-Vorgänge aus. Es wird keine Netzwerkanfrage gestellt.

Kombinieren Sie readQuery und writeQuery, um unveränderliche Cache-Aktualisierungen zu implementieren: lesen, ein neues Array erzeugen und zurückschreiben.

cache.modify({ id: cache.identify(user), fields: { name: () => 'New Name' } }) ändert direkt die Felder einer bestimmten im Cache gespeicherten Entität. Wenn Sie die Cache-ID der Entität kennen, müssen Sie nicht zuerst eine Abfrage lesen.

Das fields-Objekt ordnet Feldnamen Modifizierungsfunktionen zu, die den aktuellen Wert erhalten und den neuen Wert zurückgeben.

Übergeben Sie useMutation eine update-Funktion: useMutation(ADD_POST, { update(cache, { data: { addPost } }) { cache.modify({ id: cache.identify(user), fields: { posts: existingPosts => [...existingPosts, addPost] } }); } }).

Dadurch wird der neue Beitrag an das im Cache gespeicherte posts-Array des Benutzers angehängt. Alle Komponenten, die die Beitragsliste des Benutzers anzeigen, werden aktualisiert.

cache.evict({ id: 'User:1' }) entfernt den Eintrag User:1 aus dem Cache. Jede aktive Abfrage, die User:1 enthielt, wird mit einer Ergebnisliste, in der diese Entität fehlt, erneut gerendert.

Rufen Sie nach dem Entfernen von Einträgen cache.gc() auf, um alle Objekte zu entfernen, die von Root-Abfragen aus nicht mehr erreichbar sind. Dadurch werden Speicherlecks in langlebigen Anwendungen vermieden.

cache.gc() durchläuft den Cache-Graphen, beginnend bei allen aktiven Abfragen, und entfernt alle Entitäten, die nicht mehr erreichbar sind. Der Aufruf kann regelmäßig oder nach Batch-Mutationen, die viele Entitäten löschen, sicher ausgeführt werden.

Entitäten, auf die aktive useQuery-Hooks verweisen, werden niemals durch die Garbage Collection entfernt. Entfernt werden nur verwaiste Entitäten, die nicht mehr Teil eines Abfrageergebnisses sind.

Wenn Sie eine einzelne Entität (GET_USER nach id) abfragen, die bereits als Teil einer Listenabfrage im Cache gespeichert ist, kann Apollo sie mithilfe von Feldrichtlinien ohne erneuten Netzwerkaufruf aus dem Cache lesen: keyArgs und read-Funktionen in der Typ-Richtlinie.

Die read-Funktion gibt eine Cache-Referenz zurück: return toReference({ __typename: 'User', id: args.id }), und weist Apollo damit an, aus dem vorhandenen Cache-Eintrag User:id zu lesen.

Wenn Ihre Entitäten ein anderes Feld als id als eindeutigen Schlüssel verwenden, etwa slug oder uuid, konfigurieren Sie es in der Typ-Richtlinie: new InMemoryCache({ typePolicies: { Post: { keyFields: ['slug'] } } }).

Apollo verwendet dann Post:my-post-slug als Cache-Schlüssel, statt ein id-Feld vorauszusetzen. So bleibt die Normalisierung auch bei nicht standardmäßigen Schemas erhalten.

refetchQueries: [{ query: GET_USERS }] in den Optionen von useMutation löst nach Abschluss der Mutation eine erneute Netzwerkanfrage aus. Das ist einfacher, stellt aber immer eine Netzwerkanfrage.

Die update-Funktion ändert den Cache lokal und vermeidet den Netzwerkaufruf. Verwenden Sie refetchQueries, wenn die Cache-Aktualisierungslogik zu komplex zum Schreiben ist oder serverseitig berechnete Felder lokale Cache-Aktualisierungen unzuverlässig machen.

Welches Standardformat verwendet InMemoryCache zum Speichern von Entitäten als Cache-Schlüssel?

InMemoryCache normalisiert Entitäten anhand von __typename+id und ermöglicht dadurch automatische Aktualisierungen über Abfragen hinweg. Lesen und schreiben Sie im Cache mit cache.readQuery, cache.writeQuery und cache.modify. Entfernen Sie Entitäten mit cache.evict und anschließendem cache.gc. Konfigurieren Sie benutzerdefinierte Schlüsselfelder über typePolicies, wenn der Primärschlüssel nicht id ist.

Verwenden Sie Mutation-Update-Funktionen für effiziente lokale Cache-Aktualisierungen und refetchQueries, wenn serverseitig berechnete Felder lokale Aktualisierungen unzuverlässig machen.