59 lines
1.8 KiB
TypeScript
59 lines
1.8 KiB
TypeScript
import React, { useEffect } from 'react';
|
|
import { QueryClient, QueryClientProvider, focusManager, onlineManager } from '@tanstack/react-query';
|
|
import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client';
|
|
import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister';
|
|
import AsyncStorage from '@react-native-async-storage/async-storage';
|
|
import NetInfo from '@react-native-community/netinfo';
|
|
import { AppState, Platform, AppStateStatus } from 'react-native';
|
|
|
|
// 1. Configure the QueryClient
|
|
const queryClient = new QueryClient({
|
|
defaultOptions: {
|
|
queries: {
|
|
// Data is considered stale after 5 minutes
|
|
staleTime: 5 * 60 * 1000,
|
|
// Keep unused data in cache for 24 hours
|
|
gcTime: 24 * 60 * 60 * 1000,
|
|
// Retry failed queries 2 times
|
|
retry: 2,
|
|
},
|
|
},
|
|
});
|
|
|
|
// 2. Configure the AsyncStorage persister
|
|
const asyncStoragePersister = createAsyncStoragePersister({
|
|
storage: AsyncStorage,
|
|
// Key used to store cache in AsyncStorage
|
|
key: 'OFFLINE_CACHE',
|
|
});
|
|
|
|
// 3. Configure the Online Manager for NetInfo
|
|
onlineManager.setEventListener((setOnline) => {
|
|
return NetInfo.addEventListener((state) => {
|
|
setOnline(!!state.isConnected);
|
|
});
|
|
});
|
|
|
|
// 4. Configure the Focus Manager for AppState
|
|
function onAppStateChange(status: AppStateStatus) {
|
|
if (Platform.OS !== 'web') {
|
|
focusManager.setFocused(status === 'active');
|
|
}
|
|
}
|
|
|
|
export default function QueryProvider({ children }: { children: React.ReactNode }) {
|
|
useEffect(() => {
|
|
const subscription = AppState.addEventListener('change', onAppStateChange);
|
|
return () => subscription.remove();
|
|
}, []);
|
|
|
|
return (
|
|
<PersistQueryClientProvider
|
|
client={queryClient}
|
|
persistOptions={{ persister: asyncStoragePersister }}
|
|
>
|
|
{children}
|
|
</PersistQueryClientProvider>
|
|
);
|
|
}
|