TanStack Query Fundamentals

TanStack Query 79,069 (https://github.com/TanStack/query 50,369 ) (MIT, formerly React Query) is a cache for asynchronous data. You give it a query key, an array that names the data, such as ['book', 3], and a query function that returns a promise. It runs the function, stores the result under the key, shares it with every component that asks for the same key, and decides when the copy is too old. One QueryClient holds the cache:

export const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 60_000,                  // fresh for a minute: no refetch on every mount
      gcTime: 24 * 60 * 60_000,           // keep unused data a day, as long as the persister
    },
  },
});
// React Native has no window focus or navigator.onLine: wire up AppState and NetInfo
AppState.addEventListener('change', (s) => focusManager.setFocused(s === 'active'));
onlineManager.setEventListener((setOnline) =>
  NetInfo.addEventListener((state) => {
    console.log('online:', !!state.isConnected);
    setOnline(!!state.isConnected);
  }));
export const persister = createAsyncStoragePersister({ storage: AsyncStorage });

The defaults are eager: data is stale on arrival (staleTime: 0) and refetched when a component mounts, the app regains focus or the network returns; failures are retried three times with exponential backoff; unused data is garbage-collected after five minutes (gcTime). A minute of freshness suits a catalog. React Native 36,878 has no window focus or online events, so the managers above feed TanStack Query AppState (AppState) and NetInfo 2,178 (Network Status with NetInfo). The root layout provides the client (Offline Persistence).