TanStack Query trong RN — cấu hình persister thế nào?

React Query lưu cache trong memory; reload app là mất. Persister cho phép serialize cache vào storage để hydrate khi mở lại app, UI hiển thị data ngay không chờ network.

Setup với MMKV (recommend RN):

import { QueryClient, focusManager } from '@tanstack/react-query'
import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client'
import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister'
import { MMKV } from 'react-native-mmkv'
import { AppState } from 'react-native'

const storage = new MMKV()
const persister = createSyncStoragePersister({
  storage: {
    getItem: (key) => storage.getString(key) ?? null,
    setItem: (key, value) => storage.set(key, value),
    removeItem: (key) => storage.delete(key),
  },
})

const queryClient = new QueryClient({
  defaultOptions: { queries: { staleTime: 5 * 60_000, gcTime: 24 * 60 * 60_000 } },
})

// Bật refetch khi app trở về foreground
focusManager.setEventListener((handleFocus) => {
  const sub = AppState.addEventListener('change', (s) => handleFocus(s === 'active'))
  return () => sub.remove()
})

// Wrap root
export function App() {
  return (
    <PersistQueryClientProvider
      client={queryClient}
      persistOptions={{ persister, maxAge: 24 * 60 * 60_000 }}
    >
      <RootNavigator />
    </PersistQueryClientProvider>
  )
}

Lưu ý:
- focusManager cần custom event vì RN không có window focus.
- onlineManager.setEventListener nối với @react-native-community/netinfo để pause query khi offline.
- Đừng persist sensitive data (token, payment info) — không mã hóa nếu MMKV instance không có encryption key.