📦 Device Storage Monitoring & Environment Variables Support

🚀 Release Notes - v2.2.0

📦 Device Storage Monitoring & Environment Variables Support

🎯 What's New

This release introduces powerful device storage monitoring with CRUD operations and environment variables synchronization, making React Query External Sync a comprehensive debugging solution for React-based applications across all platforms.

✨ Major Features Added

💾 Device Storage Monitoring with CRUD Operations

• MMKV Storage Support: Real-time monitoring and manipulation of MMKV storage with ['#storage', 'mmkv', 'key'] queries
• AsyncStorage Support: Polling-based monitoring for React Native AsyncStorage with ['#storage', 'async', 'key'] queries
• SecureStorage Support: Secure data monitoring for sensitive information with ['#storage', 'secure', 'key'] queries
• Full CRUD Operations: Create, Read, Update, and Delete storage entries directly from DevTools
• Real-time Synchronization: Storage changes are instantly reflected in your debugging interface

🌍 Environment Variables Synchronization

• Runtime Environment Monitoring: Sync and monitor environment variables in real-time
• Development Insights: View NODE_ENV, API endpoints, feature flags, and custom env vars
• Cross-Platform Support: Works seamlessly across web, mobile, desktop, and other React platforms

🔧 Enhanced Integration

• Unified Hook: All storage monitoring and external sync functionality consolidated into useSyncQueriesExternal
• Zero Configuration: Automatic production safety - completely disabled in production builds
• Platform Agnostic: Works with React, React Native, Expo, Next.js, and any React-based framework

📋 New Configuration Options

useSyncQueriesExternal({
  // ... existing options
  envVariables: {
    NODE_ENV: process.env.NODE_ENV,
    API_URL: process.env.API_URL,
    // ... any custom env vars
  },
  mmkvStorage: storage,           // MMKV instance for real-time monitoring
  asyncStorage: AsyncStorage,     // AsyncStorage for polling-based monitoring  
  secureStorage: SecureStore,     // SecureStore for secure data monitoring
  secureStorageKeys: [            // Required keys to monitor in SecureStore
    "userToken",
    "refreshToken", 
    "biometricKey"
  ]
});

🛠 Technical Improvements

• New Storage Hooks: Added dedicated hooks for each storage type with dynamic query management
• Enhanced Logging: Improved debugging capabilities with detailed storage operation logs
• Storage Handlers: Robust utility functions for handling different storage backends
• Type Safety: Enhanced TypeScript definitions for all new storage and environment features
• Performance Optimized: Efficient polling and real-time update mechanisms

📈 Impact

This release transforms React Query External Sync from a query state monitor into a comprehensive development debugging suite, providing unprecedented visibility into:

• React Query state and cache
• Device storage across multiple backends
• Runtime environment configuration
• Real-time data synchronization

Perfect for debugging complex React Native apps, web applications, and cross-platform projects where storage and environment management are critical.

---