react-query-external-sync
Version:
A tool for syncing React Query state to an external Dev Tools
80 lines (79 loc) • 2.94 kB
TypeScript
import { QueryClient } from '@tanstack/react-query';
/**
* SecureStore interface that matches expo-secure-store API
* Users can pass any implementation that follows this interface
*/
export interface SecureStoreStatic {
getItemAsync: (key: string) => Promise<string | null>;
setItemAsync?: (key: string, value: string) => Promise<void>;
deleteItemAsync?: (key: string) => Promise<void>;
}
export interface UseDynamicSecureStorageQueriesOptions {
/**
* The React Query client instance
*/
queryClient: QueryClient;
/**
* SecureStore instance that implements the SecureStore interface
* This allows users to provide their own SecureStore implementation
* (e.g., expo-secure-store, react-native-keychain, or custom implementation)
*/
secureStorage?: SecureStoreStatic;
/**
* Optional interval in milliseconds to poll for value changes
* Defaults to 1000ms (1 second). Set to 0 to disable polling.
* Note: SecureStore doesn't provide getAllKeys() for security reasons,
* so we only poll known keys for value changes.
*/
pollInterval?: number;
/**
* Array of known SecureStore keys to monitor
* Since SecureStore doesn't expose getAllKeys() for security reasons,
* you must provide the keys you want to monitor
*/
knownKeys: string[];
}
export interface SecureStorageQueryResult {
key: string;
data: unknown;
isLoading: boolean;
error: Error | null;
}
/**
* Hook that creates individual React Query queries for each SecureStore key
* This gives you granular control and better performance since each key has its own query
* Since SecureStore doesn't have built-in change listeners and doesn't expose getAllKeys(),
* this hook uses polling to detect value changes for provided known keys
*
* @example
* // With expo-secure-store
* import * as SecureStore from 'expo-secure-store';
*
* const queries = useDynamicSecureStorageQueries({
* queryClient,
* secureStorage: SecureStore,
* knownKeys: ['auth.session', 'auth.email', 'sessionToken', 'knock_push_token']
* });
*
* @example
* // With react-native-keychain or custom implementation
* const customSecureStore = {
* getItemAsync: async (key: string) => {
* // Your custom implementation
* return await Keychain.getInternetCredentials(key);
* }
* };
*
* const queries = useDynamicSecureStorageQueries({
* queryClient,
* secureStorage: customSecureStore,
* knownKeys: ['auth.session', 'auth.email']
* });
*
* // Returns: [
* // { key: 'auth.session', data: { user: {...} }, isLoading: false, error: null },
* // { key: 'auth.email', data: 'user@example.com', isLoading: false, error: null },
* // ...
* // ]
*/
export declare function useDynamicSecureStorageQueries({ queryClient, secureStorage, pollInterval, knownKeys, }: UseDynamicSecureStorageQueriesOptions): SecureStorageQueryResult[];