Konfigurera bakgrundshämtning och stale time
Konfigurera staleTime och cacheTime per fråga, aktivera refetchOnReconnect så att data synkroniseras när enheten ansluter igen och implementera en banner för nätverksstatus.
Konfigurera bakgrundshämtning och stale time är en gratis lektion i React Native Academy på CoddyKit. Detta är lektion 4 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för React Native Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i React Native Academy innehåller totalt 4 lektioner.
Vad är föråldrade data?
I React Query betraktas data som föråldrade när de är äldre än det konfigurerade staleTime. Föråldrade data är inte felaktiga – de kan bara vara inaktuella. React Query visar omedelbart föråldrade data från cachen (utan laddningsindikator) samtidigt som en bakgrundshämtning schemaläggs för att hämta aktuella data.
Mönstret stale-while-revalidate är nyckeln till varför React Query känns så snabbt: användarna ser alltid data direkt, och de uppdateras tyst i bakgrunden när det behövs. Det är viktigt att förstå staleTime för att konfigurera detta beteende korrekt.
staleTime: Hur länge data är aktuella
staleTime är det antal millisekunder som cachade data betraktas som aktuella. Under denna period levererar React Query data från cachen utan någon nätverksbegäran – inte ens en bakgrundshämtning. När staleTime löper ut finns data fortfarande i cachen, men de betraktas som föråldrade och en bakgrundshämtning sker nästa gång de behövs.
Standardvärdet för staleTime är 0 – data blir omedelbart föråldrade efter att de har hämtats! Det innebär att varje montering av en komponent utlöser en bakgrundshämtning. Om Ni ökar staleTime minskar nätverkstrafiken avsevärt för data som inte ändras ofta.
// Default: staleTime = 0 (immediately stale)
const { data } = useQuery({
queryKey: ['user'],
queryFn: fetchUser,
// Every mount triggers a background refetch!
});
// Better: give fresh data a 5-minute window
const { data } = useQuery({
queryKey: ['user'],
queryFn: fetchUser,
staleTime: 5 * 60 * 1000, // 5 minutes
// No refetch for 5 minutes after last fetch
});Välj rätt staleTime
Rätt staleTime beror på hur ofta Era data ändras och hur viktigt det är för användarna att se den absolut senaste versionen:
- Användarprofil: 10–30 minuter (ändras sällan)
- Appkonfiguration:
Infinity(ändras endast vid driftsättning) - Socialt flöde: 30 sekunder till 2 minuter (nya inlägg tillkommer ofta)
- Livepoäng/priser: 0–10 sekunder (måste vara aktuella)
Ange staleTime per query så att det motsvarar den naturliga uppdateringsfrekvensen för varje datatyp. Ett staleTime som passar alla leder antingen till för många begäranden eller till föråldrade data i sammanhang med hög uppdateringsfrekvens.
// Per-query staleTime based on data type:
const { data: profile } = useQuery({
queryKey: ['profile'],
queryFn: fetchProfile,
staleTime: 15 * 60 * 1000, // 15 min
});
const { data: feed } = useQuery({
queryKey: ['feed'],
queryFn: fetchFeed,
staleTime: 60 * 1000, // 1 min
});
const { data: config } = useQuery({
queryKey: ['config'],
queryFn: fetchConfig,
staleTime: Infinity, // never stale
});gcTime: Hur länge cachen överlever utan observatörer
gcTime (garbage collection-tid) styr hur länge cachade data finns kvar i minnet efter att alla komponenter som observerar dem har avmonterats. Efter denna tid tas cacheposten bort. Nya monteringar av samma query börjar då om från början med ett laddningstillstånd.
Standardvärdet för gcTime är 5 minuter. Ange ett högre värde för data som Ni vill ska vara tillgängliga vid navigering (till exempel när användaren navigerar bort och tillbaka). Ange ett lägre värde för stora datamängder för att spara minne. gcTime måste alltid vara större än eller lika med staleTime – annars kan data garbage-collectas innan de ens har blivit föråldrade.
const queryClient = new QueryClient({
defaultOptions: {
queries: {
staleTime: 5 * 60 * 1000, // 5 min — no refetch window
gcTime: 30 * 60 * 1000, // 30 min — stay in memory
// gcTime >= staleTime is important!
},
},
});
// Per-query override:
const { data } = useQuery({
queryKey: ['large-dataset'],
queryFn: fetchLargeDataset,
gcTime: 60 * 1000, // free memory after 1 min offline
});Beteendet hos refetchOnMount
refetchOnMount styr vad som händer när en komponent som använder en query monteras. Standardvärdet true innebär att en bakgrundshämtning utlöses om data är föråldrade. Ange false för att aldrig hämta data på nytt vid montering (använd endast cachen). Ange 'always' för att alltid hämta data på nytt, även om de fortfarande är aktuella.
För skärmbilder som alltid måste visa de senaste uppgifterna (till exempel en skärm för betalningsbekräftelse) använder Ni refetchOnMount: 'always'. För skärmbilder där något föråldrade data är acceptabla (till exempel en inställningsskärm) använder Ni false för att undvika onödig nätverkstrafik.
// Always fresh on mount — for critical data:
const { data: accountBalance } = useQuery({
queryKey: ['balance'],
queryFn: fetchBalance,
refetchOnMount: 'always', // always refetch when screen opens
});
// Never refetch on mount — show cache only:
const { data: helpContent } = useQuery({
queryKey: ['help'],
queryFn: fetchHelp,
refetchOnMount: false,
staleTime: Infinity,
});refetchOnReconnect: Uppdatera efter återanslutning
refetchOnReconnect utlöser bakgrundshämtningar för alla föråldrade queries när enheten återfår nätverksanslutningen. Detta är kärnan i offline-first-beteendet – data uppdateras automatiskt när anslutningen återkommer utan någon åtgärd från användaren.
Aktivera detta med onlineManager och NetInfo-integrationen (som visades i föregående lektion). Standardvärdet är true, men det gäller endast föråldrade queries. Med staleTime: 0 hämtas alla queries på nytt vid återanslutning. Med längre staleTime hämtas endast queries vars giltighet har löpt ut på nytt.
// Configure global:
const queryClient = new QueryClient({
defaultOptions: {
queries: {
refetchOnReconnect: true, // default — refetch stale on reconnect
staleTime: 2 * 60 * 1000, // data stale after 2 min
},
},
});
// Per-query override:
const { data } = useQuery({
queryKey: ['critical-data'],
queryFn: fetchCritical,
refetchOnReconnect: 'always', // always refetch on reconnect
});refetchInterval: Avfrågning
refetchInterval gör en query till en avfrågningsquery som automatiskt hämtar data på nytt med ett fast intervall, även utan användarinteraktion. Detta är användbart för realtidsdata som livepoäng, aktiekurser eller statuspaneler.
Avfrågningen stoppas när appen körs i bakgrunden eller enheten är offline. Använd refetchIntervalInBackground: true för att fortsätta avfråga i bakgrunden. Var försiktig med intervallen – täta avfrågningar tömmer batteriet och använder data.
// Poll every 30 seconds:
const { data: serverStatus } = useQuery({
queryKey: ['server-status'],
queryFn: fetchServerStatus,
refetchInterval: 30 * 1000, // poll every 30s
refetchIntervalInBackground: false, // stop when app in background
});
// Poll only while user is watching (conditional):
const { data: liveScore } = useQuery({
queryKey: ['live-score', gameId],
queryFn: () => fetchScore(gameId),
refetchInterval: isGameLive ? 5000 : false, // poll only during live games
});Manuell ny hämtning
Utlös en manuell ny hämtning med funktionen refetch som returneras av useQuery. Detta är användbart för interaktioner med dra-för-att-uppdatera där användaren uttryckligen begär aktuella data. Funktionen refetch hämtar alltid data, oavsett staleTime.
Kombinera detta med FlatLists egenskaper onRefresh och refreshing för ett standardiserat gränssnitt för dra-för-att-uppdatera. Flaggan isFetching från useQuery visar när en ny hämtning pågår.
const { data, isFetching, refetch } = useQuery({
queryKey: ['posts'],
queryFn: fetchPosts,
});
return (
<FlatList
data={data}
renderItem={renderPost}
keyExtractor={(item) => item.id}
refreshing={isFetching}
onRefresh={refetch} // pull-to-refresh
/>
);Förhandsinläsning av queries
Förhandsinläsning laddar data i cachen innan användaren navigerar till skärmen som behöver dem. Använd queryClient.prefetchQuery för att utlösa en hämtning och cacha resultatet. När användaren kommer till skärmen löses queryn omedelbart från den uppvärmda cachen.
Förhandsladda i navigeringshanteraren, när användaren håller muspekaren över ett listobjekt (på webben) eller när ett listobjekt närmar sig visningsområdet (onViewableItemsChanged i FlatList). De förhandsinlästa data har ett eget staleTime och blir därför inte omedelbart ogiltiga.
const queryClient = useQueryClient();
async function handlePostPress(postId) {
// Prefetch before navigating:
await queryClient.prefetchQuery({
queryKey: ['post', postId],
queryFn: () => fetchPost(postId),
staleTime: 5 * 60 * 1000,
});
// Cache is now warm — navigate instantly:
navigation.navigate('PostDetail', { postId });
}Mönster för banner med nätverksstatus
Visa en banner med nätverksstatus när enheten går offline och dölj den när anslutningen återkommer. Kombinera React Natives NetInfo med en context eller en Zustand-store för att sprida nätverksstatus till valfri komponent, och använd React Querys bakgrundshämtning för att automatiskt synkronisera vid återanslutning.
Bannern bör vara diskret – en orange eller röd remsa högst upp eller längst ned som visar ”Offlineläge – cachade data visas”. Dölj den automatiskt 2–3 sekunder efter att anslutningen återkommer och en lyckad ny hämtning har slutförts.
import NetInfo from '@react-native-community/netinfo';
function useNetworkStatus() {
const [isOnline, setIsOnline] = React.useState(true);
React.useEffect(() => {
const unsubscribe = NetInfo.addEventListener((state) => {
setIsOnline(state.isConnected && state.isInternetReachable);
});
return unsubscribe;
}, []);
return isOnline;
}
// In root layout:
const isOnline = useNetworkStatus();
return (
<View style={{ flex: 1 }}>
{!isOnline && <OfflineBanner />}
<NavigationContainer>...</NavigationContainer>
</View>
);Samordna staleTime med serverns cache-headers
Om Ert API returnerar HTTP-cache-headers (till exempel Cache-Control: max-age=300) bör Ni anpassa React Querys staleTime efter serverns cache-varaktighet. Då undviker appen att hämta data på nytt som servern ändå inte skulle ha uppdaterat ännu, vilket sparar bandbredd och minskar belastningen på servern.
För API:er utan cache-headers anger Ni staleTime utifrån Er kunskap om hur ofta data ändras. Dokumentera Era beslut om staleTime i kommentarer – de är arkitektoniska val som på mindre uppenbara sätt påverkar användarupplevelsen och serverbelastningen.
// API returns Cache-Control: max-age=300 (5 minutes)
// Match staleTime to server cache duration:
const { data: articles } = useQuery({
queryKey: ['articles'],
queryFn: fetchArticles,
staleTime: 5 * 60 * 1000, // matches server max-age
// No point refetching — server would return same data
});
// Runtime staleTime from response header:
const staleTime = parseInt(response.headers.get('Cache-Control')
.match(/max-age=(\d+)/)?.[1] || '300') * 1000;Snabb kontroll
Testa Er förståelse av koncepten inom React Native Mobile Development från den här lektionen.
Sammanfattning av lektionen
I den här lektionen har Ni lärt Er att: staleTime styr hur länge cachade data betraktas som aktuella innan en bakgrundshämtning schemaläggs vid nästa åtkomst, refetchOnReconnect: true uppdaterar automatiskt föråldrade queries när nätverksanslutningen återkommer och refetchInterval gör en query till en avfrågningsquery som uppdateras med ett fast intervall – användbart för livedata. Grattis till att Ni har slutfört kursen Offline-First with React Query – härnäst integrerar Ni Supabase som en komplett backend för Er React Native-app.
Lär dig JavaScript med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 30
- Lektioner
- 120
Vanliga frågor
Är lektionen ”Konfigurera bakgrundshämtning och stale time” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen React Native Academy, inklusive ”Konfigurera bakgrundshämtning och stale time”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i React Native Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Konfigurera bakgrundshämtning och stale time”?
Konfigurera staleTime och cacheTime per fråga, aktivera refetchOnReconnect så att data synkroniseras när enheten ansluter igen och implementera en banner för nätverksstatus. Ni övar på React Native Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig React Native Academy?
Du behöver inga förkunskaper. Utbildningen i React Native Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.
Hur lång tid tar lektionen ”Konfigurera bakgrundshämtning och stale time”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här React Native Academy-lektionen?
Ja. Varje React Native Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- QueryClient, QueryClientProvider och useQuery
- Mutationer med useMutation och cacheinvalidering
- Beständiggöra frågecachen med AsyncStorage
- Konfigurera bakgrundshämtning och stale time