React Native Academy · leksjon

Bevare spørringshurtigbufferet med AsyncStorage

Leksjon 3 av 413 trinn

Bevare spørringshurtigbufferet med AsyncStorage er en gratis leksjon i React Native Academy på CoddyKit. Dette er leksjon 3 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i React Native Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i React Native Academy inneholder totalt 4 leksjoner.

Hvorfor lagre spørringshurtigbufferet?

Som standard finnes React Query-hurtigbufferet bare i minnet. Når appen lukkes og åpnes igjen, forsvinner alle hurtigbufrede data — brukeren ser lastingsindikatorer mens data hentes på nytt fra nettverket. Ved treg eller manglende forbindelse betyr dette en tom skjerm.

Vedvarende hurtigbuffer lagrer React Query-hurtigbufferet på disken (AsyncStorage i React Native), slik at dataene er tilgjengelige umiddelbart neste gang appen startes, før nettverksforespørsler er fullført. Dette er grunnlaget for mobile apper som fungerer offline først.

Nødvendige pakker

Vedvarende hurtigbuffer krever tre pakker: @tanstack/react-query (kjernen), @tanstack/react-query-persist-client (adapteren for vedvarende lagring) og en implementasjon av en persister. For React Native bruker vi @tanstack/async-storage-persister, som pakker inn AsyncStorage som backend for vedvarende lagring.

AsyncStorage er standardlageret for nøkkel-verdi-par i React Native og leveres av @react-native-async-storage/async-storage. Persisteren serialiserer hele spørringshurtigbufferet til JSON og skriver det til én enkelt AsyncStorage-nøkkel.

// Install all required packages:
// npx expo install @tanstack/react-query
// npx expo install @tanstack/react-query-persist-client
// npx expo install @tanstack/async-storage-persister
// npx expo install @react-native-async-storage/async-storage

import { createAsyncStoragePersister } from '@tanstack/async-storage-persister';
import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client';
import AsyncStorage from '@react-native-async-storage/async-storage';

Opprette persisteren

Opprett en persister-instans med createAsyncStoragePersister, og send inn AsyncStorage-instansen og et navn på lagringsnøkkelen. Persisteren serialiserer React Query-hurtigbufferet til JSON og skriver det til denne nøkkelen hver gang hurtigbufferet endres.

Persisteren har også alternativet throttleTime (standard 1000 ms), som hindrer for hyppige skrivinger til AsyncStorage ved raske tilstandsendringer. Øk verdien hvis De merker omfattende I/O eller økt batteriforbruk.

import { createAsyncStoragePersister } from '@tanstack/async-storage-persister';
import AsyncStorage from '@react-native-async-storage/async-storage';

const asyncStoragePersister = createAsyncStoragePersister({
  storage: AsyncStorage,
  key: 'react-query-cache', // AsyncStorage key to use
  throttleTime: 1000,        // ms between writes (default)
  serialize: JSON.stringify, // custom serializer (optional)
  deserialize: JSON.parse,   // custom deserializer (optional)
});

PersistQueryClientProvider

Bytt ut standard-QueryClientProvider med PersistQueryClientProvider. Send inn både client (Deres QueryClient) og persistOptions (som inneholder persisteren). Provider-komponenten håndterer gjenoppretting av hurtigbufferet ved oppstart og lagrer det automatisk når det endres.

Under gjenopprettingen gjengis komponenttreet med de hurtigbufrede dataene umiddelbart — ingen lastetilstand ved første gjengivelse. React Query planlegger også en bakgrunnsforespørsel for å hente ferske data fra serveren.

import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client';

export default function App() {
  return (
    <PersistQueryClientProvider
      client={queryClient}
      persistOptions={{ persister: asyncStoragePersister }}
    >
      <NavigationContainer>
        <RootNavigator />
      </NavigationContainer>
    </PersistQueryClientProvider>
  );
}

maxAge: Utløp av hurtigbuffer

Det vedvarende hurtigbufferet kan bli foreldet over tid. Konfigurer maxAge i persistOptions for å angi hvor lenge vedvarende data regnes som gyldige. Eldre data forkastes, og ferske data hentes fra nettverket neste gang appen startes. Standardverdien for maxAge er 24 timer.

Velg maxAge ut fra hvor raskt dataene endres. For profildata som sjelden endres, kan 7 dager være passende. For nyhetsstrømmer som endres hele tiden, holder 30 minutter hurtigbufferet nyttig uten at svært foreldet innhold vises.

<PersistQueryClientProvider
  client={queryClient}
  persistOptions={{
    persister: asyncStoragePersister,
    maxAge: 7 * 24 * 60 * 60 * 1000, // 7 days in ms
    // Cache older than 7 days is discarded on launch
  }}
>

buster: Ugyldiggjøre gamle hurtigbufferversjoner

Når De lanserer en ny appversjon med endrede datastrukturer, kan det gamle cacheformatet være inkompatibelt. Alternativet buster i persistOptions er en versjonsstreng – når den endres, forkastes den gamle vedvarende cachen, og en ny henting starter.

Oppdater buster-strengen hver gang De gjør inkompatible endringer i API-svarene eller strukturen til spørringsnøklene. Et vanlig mønster er å bruke appens versjonsnummer fra expo-constants eller en versjonsstreng som administreres manuelt.

import Constants from 'expo-constants';

<PersistQueryClientProvider
  client={queryClient}
  persistOptions={{
    persister: asyncStoragePersister,
    maxAge: 24 * 60 * 60 * 1000,
    buster: Constants.expoConfig.version, // bust cache on app update
  }}
>

// Or use a manual API version:
// buster: 'api-v3', // update when API structure changes

Håndtere innlastingstilstanden ved gjenoppretting

Gjenoppretting av cache fra AsyncStorage skjer asynkront. I denne korte perioden (vanligvis noen millisekunder) kan appen vise tomme data før cachen er gjenopprettet. PersistQueryClientProvider tilbyr en onSuccess-tilbakeringing som utløses når gjenopprettingen er fullført.

Vis et oppstartsskjermbilde eller et skjelettgrensesnitt til gjenopprettingen er ferdig, og vis deretter appen. Dette hindrer den brå overgangen fra tomt til fullt innhold som oppstår hvis De gjengir appen før cachen er klar.

const [isRestored, setIsRestored] = React.useState(false);

<PersistQueryClientProvider
  client={queryClient}
  persistOptions={{ persister: asyncStoragePersister }}
  onSuccess={() => setIsRestored(true)}
>
  {isRestored ? (
    <NavigationContainer>
      <RootNavigator />
    </NavigationContainer>
  ) : (
    <SplashScreen />
  )}
</PersistQueryClientProvider>

Selektiv vedvarende lagring med Meta

Alle spørringer bør ikke lagres vedvarende. Sensitive data (betalingsinformasjon for brukere), øktspesifikke data eller svært store datasett egner seg kanskje ikke for lagring lokalt. Bruk alternativet gcTime: 0 for å utelate bestemte spørringer fra vedvarende lagring – de samles umiddelbart inn av søppeltømmingen når de avmonteres, og skrives aldri til disken.

Alternativt kan De konfigurere en egendefinert funksjon for dehydrateState i persistOptions for å filtrere hvilke spørringer som skal inkluderes i det vedvarende øyeblikksbildet.

// This query is excluded from persistence (never cached to disk):
const { data: paymentInfo } = useQuery({
  queryKey: ['payment-info'],
  queryFn: fetchPaymentInfo,
  gcTime: 0,        // no memory cache either
  staleTime: 0,     // always refetch
});

// This query is persisted normally:
const { data: userProfile } = useQuery({
  queryKey: ['profile'],
  queryFn: fetchProfile,
  staleTime: 5 * 60 * 1000,
});

Frakoblet modus med vedvarende cache

Når vedvarende cache er aktivert, ser brukere som åpner appen uten nettverk, bufrede data umiddelbart – ingen innlastingstilstand og ingen tomme lister. React Query vet at dataene kan være utdaterte og planlegger en ny henting fra nettverket, men viser cachen mens den venter på tilkobling.

Konfigurer networkMode: 'offlineFirst' for spørringer som skal fungere uten nettverk. Standardmodusen setter spørringer på pause når enheten er frakoblet, mens offlineFirst returnerer bufrede data selv uten nettverk, uten å kaste en feil.

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      networkMode: 'offlineFirst', // serve cache even when offline
      staleTime: 5 * 60 * 1000,
      retry: false, // don't retry when offline
    },
  },
});

// Individual query override:
const { data } = useQuery({
  queryKey: ['articles'],
  queryFn: fetchArticles,
  networkMode: 'always', // always try network
});

Cachestørrelse og lagringsgrenser

AsyncStorage har størrelsesgrenser (vanligvis 6 MB per nøkkel på iOS, mens det varierer fra enhet til enhet på Android). Vedvarende lagring av en stor React Query-cache med mange spørringer kan nærme seg disse grensene. Overvåk cachestørrelsen ved hjelp av den serialiserte lengden: JSON.stringify(dehydratedState).length.

Strategier for å håndtere cachestørrelsen: reduser gcTime slik at ubrukte spørringer samles raskt inn av søppeltømmingen før serialisering, begrens antallet bufrede elementer per liste (bruk pages i uendelige spørringer), og utelat store binær- eller bildedata fra cachen.

// Check cache size in development:
AsyncStorage.getItem('react-query-cache').then((data) => {
  if (data) {
    const sizeKB = data.length / 1024;
    console.log('Cache size:', sizeKB.toFixed(1), 'KB');
    if (sizeKB > 4000) {
      console.warn('Cache approaching AsyncStorage limit!');
    }
  }
});

// Manually clear the cache if needed:
queryClient.clear();
await AsyncStorage.removeItem('react-query-cache');

Kombinere vedvarende lagring med nettverksstatus

Et komplett oppsett for frakoblet først kombinerer vedvarende cache med registrering av nettverksstatus. Bruk en hook for nettverksstatus til å registrere endringer i tilkoblingen, og bruk React Querys onlineManager til å varsle biblioteket når enheten går på eller av nettverket. Dette hindrer bakgrunnshentinger når enheten er frakoblet, og utløser dem når tilkoblingen kommer tilbake.

Denne kombinasjonen gir brukerne en sømløs opplevelse: Appen åpnes med bufrede data, viser en diskret indikator for frakoblet modus når forbindelsen er brutt, og oppdateres stille når tilkoblingen kommer tilbake.

import NetInfo from '@react-native-community/netinfo';
import { onlineManager } from '@tanstack/react-query';

// At app startup:
NetInfo.addEventListener((state) => {
  onlineManager.setOnline(state.isConnected);
});

// Queries will automatically:
// - Pause when offline
// - Resume and refetch when online
// - Serve cache while waiting

Kort kontroll

Test forståelsen Deres av konseptene innen React Native Mobile Development fra denne leksjonen.

Besvar den i den interaktive leksjonen

Oppsummering av leksjonen

I denne leksjonen lærte De at PersistQueryClientProvider med createAsyncStoragePersister lagrer hele React Query-cachen i AsyncStorage for frakoblet-først-funksjonalitet, at buster ugyldiggjør utdaterte cacheformater når De lanserer API-endringer, og at gcTime: 0 på individuelle spørringer utelater sensitive data fra vedvarende lokal lagring. Deretter skal vi konfigurere staleTime, bakgrunnshenting og atferd ved gjenopprettet nettverkstilkobling for en gjennomført frakoblet opplevelse.

Gratis å komme i gang

Lær deg JavaScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 30
Leksjoner: 120

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Bevare spørringshurtigbufferet med AsyncStorage» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien React Native Academy, inkludert «Bevare spørringshurtigbufferet med AsyncStorage», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i React Native Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Bevare spørringshurtigbufferet med AsyncStorage»?

Installer programtillegget for vedvarende lagring i React Query, lagre hele spørringshurtigbufferet i AsyncStorage, og gjenopprett det når appen starter, slik at dataene er tilgjengelige umiddelbart… Du øver på React Native Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med React Native Academy?

Ingen tidligere erfaring er nødvendig. React Native Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.

Hvor lang tid tar leksjonen «Bevare spørringshurtigbufferet med AsyncStorage»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne React Native Academy-leksjonen?

Ja. Alle React Native Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

QueryClient, QueryClientProvider og useQuery
Mutasjoner med useMutation og ugyldiggjøring av hurtigbuffer
Bevare spørringshurtigbufferet med AsyncStorage
Konfigurere bakgrunnshenting og stale time

← Tilbake til React Native Academy