persistQueryClient trong React Query dùng để làm gì?

persistQueryClient cho phép serialize toàn bộ React Query cache vào storage, restore khi user reload → data hiển thị ngay lập tức không cần fetch lại.

• Setup: import { persistQueryClient } from '@tanstack/react-query-persist-client'; import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister'. const persister = createSyncStoragePersister({ storage: window.localStorage }); persistQueryClient({ queryClient, persister, maxAge: 1000 60 60 * 24 }) — maxAge là thời gian data được phép restore (default 24h).
• Với React Native dùng createAsyncStoragePersister cho AsyncStorage.
• IndexedDB persister cho data lớn hơn localStorage limit (5MB).
• Khi app load: nếu persisted data còn trong maxAge, hydrate vào cache ngay → queries show cached data, background refetch nếu stale. buster option để invalidate toàn bộ persisted cache khi deploy version mới (thay đổi cấu trúc data).
• Lưu ý: không persist sensitive data (tokens, personal info) vì localStorage không mã hóa.
• Dùng dehydrateOptions.shouldDehydrateQuery để filter queries nào được persist.

persistQueryClient is a React Query plugin that persists the query cache to external storage (localStorage, IndexedDB, AsyncStorage) so cached data survives page refreshes.

• Setup: use createSyncStoragePersister (localStorage) or createAsyncStoragePersister (IndexedDB, AsyncStorage); wrap with PersistQueryClientProvider or call persistQueryClient() directly.
• Use cases: offline support — show cached data when offline; faster perceived performance — show stale cached data immediately on revisit while refetching in background; PWAs — combine with Service Workers for full offline capability.
• Configuration: maxAge — how long to keep persisted cache (default 24 hours); buster — cache version key for invalidating old persisted data on app updates.
• Important: sensitive data should not be persisted to localStorage — use secure storage or encrypt before persisting.