How do you manage caching large amounts of temporary data with TanStack Query?

Short answer

Configure gcTime and staleTime and set up a persistent cache that saves API responses in MMKV for immediate offline restoration at app startup.

Explanation

In mobile apps, keeping data across sessions is essential to avoid blank loading screens when opening the app. Use createAsyncStoragePersister or an MMKV adapter with persistQueryClient to save the cache on disk and skip network requests for stable data, creating a near-instant experience.

Code example

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

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      gcTime: 1000 * 60 * 60 * 24, // Keep the cache for 24 hours
      staleTime: 1000 * 60 * 5,     // Data is considered fresh for five minutes
    },
  },
});

Common mistakes

• Always setting staleTime to zero, forcing the app to download data again whenever the user moves between screens.

Follow-up questions

• How do you use Zustand with MMKV to create a synchronous global state store persisted locally?
• What is the difference between AsyncStorage and react-native-mmkv, and why is MMKV much faster?

Sources

• TanStack Query docs — Caching Examples