Core Feature: Data Feed with Offline Support
Build the main data feed using React Query with offline persistence, implement pull-to-refresh and pagination, add creation and deletion mutations, and animate list item entry.
What Is Offline-First Design
Offline-first design means the app works correctly without an internet connection — users can view cached data, perform mutations that queue for sync, and experience no error messages just because the network is unavailable. Mobile users frequently move in and out of connectivity. A React Native app that breaks without a network feels fragile; one that keeps working feels polished and reliable.
Setting Up the QueryClient
React Query's QueryClient is the backbone of the data layer. Configure it with sensible defaults: a staleTime that avoids unnecessary refetches (e.g., 5 minutes for data that changes infrequently), and a gcTime (garbage collection time) that keeps unused data in the cache long enough to serve it from cache on reconnect. Pass this client to QueryClientProvider at the app root.
// src/services/queryClient.ts
import { QueryClient } from '@tanstack/react-query';
export const queryClient = new QueryClient({
defaultOptions: {
queries: {
staleTime: 1000 * 60 * 5, // 5 minutes — don't refetch too often
gcTime: 1000 * 60 * 60, // Keep in cache 1 hour after unmount
retry: 2,
retryDelay: (attempt) => Math.min(1000 * 2 ** attempt, 30000),
refetchOnWindowFocus: false, // Not needed on mobile
refetchOnReconnect: true, // Sync when network returns
},
},
});All lessons in this course
- Planning Architecture and Tech Stack
- Authentication Flow and Protected Routes
- Core Feature: Data Feed with Offline Support
- Polishing, Testing, and Shipping to Both Stores