Verwenden Sie apollo-cache-persist mit React Native

Blog

Verwenden Sie apollo-cache-persist mit React Native

apollo3-cache-persist

Einfache Persistenz für alle Apollo Client 3.0 Cache-Implementierungen, einschließlich InMemoryCache und Hermes .

Unterstützt Web und React Native. Alle Speicheranbieter anzeigen.

Grundlegende Verwendung

Um zu beginnen, übergeben Sie einfach Ihren Apollo-Cache und ein zugrunde liegender Speicheranbieter zu |_+_|.

Standardmäßig wird der Inhalt Ihres Apollo-Cache sofort wiederhergestellt (asynchron, siehe So speichern Sie Daten vor dem Rendern ) und wird bei jedem Schreibvorgang in den Cache beibehalten (mit einem kurzen Entprellintervall).

Freiwilligenarbeit als Datenwissenschaftler

Beispiele

Reagieren Sie gebürtig
persistCache
Netz
import AsyncStorage from '@react-native-community/async-storage'; import { InMemoryCache } from '@apollo/client/core'; import { persistCache } from 'apollo3-cache-persist'; const cache = new InMemoryCache({...}); // await before instantiating ApolloClient, else queries might run before the cache is persisted await persistCache({ cache, storage: AsyncStorage, }); // Continue setting up Apollo as usual. const client = new ApolloClient({ cache, ... });

Zusatzoptionen

|_+_| und der Konstruktor für |_+_| akzeptieren Sie die folgenden Optionen:

import { InMemoryCache } from '@apollo/client/core'; import { persistCache } from 'apollo3-cache-persist'; const cache = new InMemoryCache({...}); // await before instantiating ApolloClient, else queries might run before the cache is persisted await persistCache({ cache, storage: window.localStorage, }); // Continue setting up Apollo as usual. const client = new ApolloClient({ cache, ... });

Erweiterte Nutzung

Verwenden von |_+_|

Anstatt |_+_| zu verwenden, können Sie ein |_+_| instanziieren, wodurch Sie die Persistenz feingranular steuern können.

|_+_| akzeptiert dieselben Optionen wie |_+_| und gibt ein Objekt mit den folgenden Methoden zurück:

persistCache

Benutzerdefinierte Auslöser

Um das Persistenz-Timing zu steuern, stellen Sie dem |_+_| . eine Funktion bereit Möglichkeit.

Der benutzerdefinierte Trigger sollte ein Argument akzeptieren (eine |_+_|-Rückruffunktion) und eine Funktion zurückgeben, die aufgerufen werden kann, um den Trigger zu deinstallieren.

apis zur Verwendung für Projekte

Die TypeScript-Signatur für diese Funktion lautet wie folgt:

CachePersistor

Dieser benutzerdefinierte Trigger wird beispielsweise alle 10 Sekunden bestehen bleiben:

persistCache( function ): Promise;

Speicheranbieter

Die folgenden Speicheranbieter arbeiten „out of the box“, ohne zusätzliche Abhängigkeiten:

  • |_+_| auf React Native
  • CachePersistor im Internet
  • persistCache im Internet
  • CachePersistor im Internet
  • CachePersistor im Web und auf Mobilgeräten

|_+_| verwendet dieselbe Speicheranbieter-API wie persistCache , damit Sie auch die Anbieter nutzen können hier gelistet , einschließlich:

Wenn Sie React Native verwenden und ein |_+_| über 2 MB müssen Sie einen dateisystembasierten Speicheranbieter verwenden, wie z (persist: () => void) => (() => void) . // This code is for illustration only. // We do not recommend persisting on an interval. const trigger = persist => { // Call `persist` every 10 seconds. const interval = setInterval(persist, 10000); // Return function to uninstall this custom trigger. return () => clearInterval(interval); }; unterstützt nicht Einzelwerte über 2 MB auf Android.

Häufige Fragen

Warum ist der Auslöser „Hintergrund“ nur für React Native verfügbar?

Ganz einfach, denn mobile Apps sind anders als Web-Apps.

Mobile Apps werden selten beendet, bevor sie in den Hintergrund übergehen. Dazu trägt auch bei, dass eine App in den Hintergrund gerückt wird, wenn der Nutzer nach Hause zurückkehrt, die Multitasking-Ansicht aktiviert oder einem Link zu einer anderen App folgt. Es gibt fast immer die Möglichkeit, durchzuhalten.

Im Web, wir könnten Unterstützen Sie einen „Hintergrund“-Trigger mit dem Seitensichtbarkeits-API ; Daten würden jedoch verloren gehen, wenn der Benutzer die Registerkarte/das Fenster direkt schließt. Angesichts dieser Prävalenz dieses Nutzerverhaltens und der wesentlich besseren Leistung des „Write“-Triggers im Web haben wir einen „Hintergrund“-Trigger im Web weggelassen.

Wie warte ich, bis der Cache wiederhergestellt ist, bevor ich meine App rendere?

|_+_| (sowie |_+_|) gibt eine Zusage zurück, die aufgelöst wird, sobald der Cache wiederhergestellt wurde, auf die Sie vor dem Rendern Ihrer App warten können.

Diese Bibliothek ist wie Apollo Client Framework-unabhängig; Da jedoch viele Leute nachgefragt haben, finden Sie hier ein Beispiel dafür, wie Sie dies in React handhaben können. PRs mit Beispielen aus anderen Frameworks sind willkommen.

Reagieren
AsyncStorage
Reagiere mit Hooks
window.localStorage
Verwenden der synchronen Speicher-API

|_+_| -Methode ist asynchron, um produktionsbereiten Speicherschnittstellen zu entsprechen, die nur asynchrone APIs anbieten.

td ameritrade API-Tutorial

apollo-cache-persist bietet Alternative |_+_| -Methode, die nur bei kleinen Cache-Größen und synchronem Speicheranbieter (z. B. window.localStorage) verwendet werden sollte. |_+_| eignet sich am besten für Demoanwendungen, da es das UI-Rendering blockiert, bis der Cache wiederhergestellt ist.

window.sessionStorage

|_+_| funktioniert durch Instanziieren von Unterklassen von |_+_|, |_+_| und |_+_| die eine Methode zum synchronen Wiederherstellen des Cache implementieren.

php sucht mehrdimensionales Array nach Wert
Ich muss sicherstellen, dass bestimmte Daten nicht gespeichert werden. Wie filtere ich meinen Cache?

Dies ist leider noch nicht möglich. Sie können den Cache nur vollständig beibehalten und wiederherstellen.

Diese Bibliothek hängt von der |_+_| und |_+_| Methoden, die auf der Cache-Schnittstelle in Apollo Client 2.0 definiert sind. Die von diesen Methoden zurückgegebene und verbrauchte Nutzlast ist undurchsichtig und unterscheidet sich von Cache zu Cache. Daher können wir die Ausgabe nicht zuverlässig transformieren.

Alternativen wurden empfohlen in #2 , einschließlich der Verwendung von Logik in Ihrer Benutzeroberfläche, um potenziell veraltete Informationen zu filtern. Außerdem ist die |_+_| Möglichkeit und Methoden auf |_+_| Bereitstellung von Einrichtungen, um das Wachstum des Caches zu verwalten.

Um die vollständige Kontrolle über den Cache-Inhalt zu erhalten, können Sie eine Hintergrundaufgabe einrichten, um den Cache regelmäßig so zurückzusetzen, dass er nur die wichtigsten Daten Ihrer App enthält. (Im Web können Sie einen Service-Mitarbeiter verwenden; auf React Native gibt es localForage .) Die Hintergrundaufgabe würde mit einem leeren Cache beginnen, die wichtigsten Daten von Ihrer GraphQL-API abfragen und dann bestehen bleiben. Diese Strategie hat den zusätzlichen Vorteil, dass der Cache beim Start Ihrer App mit neuen Daten geladen wird.

Schließlich ist es erwähnenswert, dass sich die Apollo-Community in der Anfangsphase der Entwicklung feinkörniger Cache-Steuerelemente befindet, einschließlich der Möglichkeit, Anweisungen und Metadaten zu verwenden, um die Cache-Richtlinie auf Schlüsselbasis zu steuern, sodass sich die Antwort auf diese Frage irgendwann ändern wird .

Ich hatte eine Breaking-Schema-Änderung. Wie migriere oder bereinige ich meinen Cache?

Aus den gleichen Gründen wie in der vorherigen Antwort ist es nicht möglich, Ihre persistenten Cache-Daten zu migrieren oder zu transformieren. Durch die Verwendung der Methoden auf |_+_| , ist es einfach, den Cache bei Änderungen am Schema zurückzusetzen.

Instanziieren Sie einfach ein |_+_| und nur |_+_| . anrufen wenn sich das Schema der App nicht geändert hat. (Sie müssen Ihre Schemaversion selbst verfolgen.)

Hier ist ein Beispiel, wie das aussehen könnte:

Ionic storage
Ich sehe Fehler auf Android.

Konkret dieser Fehler:

apollo3-cache-persist

Dies ist das Ergebnis einer Beschränkung von 2 MB pro Schlüssel von |_+_| auf Android. Stellen Sie ein kleineres |_+_| . ein oder zu einem anderen Speicheranbieter wechseln, z. B. redux-persist oder redux-persist-node-storage .

vier Säulen von oop
Cache bleibt bestehen und Benutzerkontext ändert sich

In einigen Fällen wie der Benutzerabmeldung möchten wir den Anwendungscache löschen. Um dies mit Apollo Cache Persist effektiv zu tun, verwenden Sie bitte |_+_| -Methode, die schließlich die Persistenzschicht zurücksetzt.

Download-Details:

Autor: apollographql

Quellcode: https://github.com/apollographql/apollo-cache-persist

#reagieren-nativ #reagieren #mobile-apps