React Query External Sync

A powerful debugging tool for React Query state and device storage in any React-based application. Whether you're building for mobile, web, desktop, TV, or VR - this package has you covered. It works seamlessly across all platforms where React runs, with zero configuration to disable in production.

Pairs perfectly with React Native DevTools for a complete development experience.

If you need internal React Query dev tools within the device you can use my other package here!

https://github.com/LovesWorking/react-native-react-query-devtools

✨ Features

• 🔄 Real-time React Query state synchronization
• 💾 Device storage monitoring with CRUD operations - MMKV, AsyncStorage, and SecureStorage
• 📱 Works with any React-based framework (React, React Native, Expo, Next.js, etc.)
• 🖥️ Platform-agnostic: Web, iOS, Android, macOS, Windows, Linux, tvOS, VR - you name it!
• 🔌 Socket.IO integration for reliable communication
• 📊 Query status, data, and error monitoring
• ⚡️ Simple integration with minimal setup
• 🧩 Perfect companion to React Native DevTools
• 🛑 Zero-config production safety - automatically disabled in production builds

📦 Installation

1# Using npm
2npm install --save-dev react-query-external-sync socket.io-client
3
4# Using yarn
5yarn add -D react-query-external-sync socket.io-client
6
7# Using pnpm
8pnpm add -D react-query-external-sync socket.io-client

🚀 Quick Start

Add the hook to your application where you set up your React Query context:

1import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
2import { useSyncQueriesExternal } from "react-query-external-sync";
3import { Platform } from "react-native";
4import AsyncStorage from "@react-native-async-storage/async-storage";
5import * as SecureStore from "expo-secure-store";
6import { storage } from "./mmkv"; // Your MMKV instance
7
8// Create your query client
9const queryClient = new QueryClient();
10
11function App() {
12  return (
13    <QueryClientProvider client={queryClient}>
14      <AppContent />
15    </QueryClientProvider>
16  );
17}
18
19function AppContent() {
20  // Unified storage queries and external sync - all in one hook!
21  useSyncQueriesExternal({
22    queryClient,
23    socketURL: "http://localhost:42831",
24    deviceName: Platform.OS,
25    platform: Platform.OS,
26    deviceId: Platform.OS,
27    extraDeviceInfo: {
28      appVersion: "1.0.0",
29    },
30    enableLogs: true,
31    envVariables: {
32      NODE_ENV: process.env.NODE_ENV,
33    },
34    // Storage monitoring with CRUD operations
35    mmkvStorage: storage, // MMKV storage for ['#storage', 'mmkv', 'key'] queries + monitoring
36    asyncStorage: AsyncStorage, // AsyncStorage for ['#storage', 'async', 'key'] queries + monitoring
37    secureStorage: SecureStore, // SecureStore for ['#storage', 'secure', 'key'] queries + monitoring
38    secureStorageKeys: [
39      "userToken",
40      "refreshToken",
41      "biometricKey",
42      "deviceId",
43    ], // SecureStore keys to monitor
44  });
45
46  // Your app content
47  return <YourApp />;
48}

🔒 Production Safety

This package is automatically disabled in production builds.

1// The package handles this internally:
2if (process.env.NODE_ENV !== "production") {
3  useSyncQueries = require("./new-sync/useSyncQueries").useSyncQueries;
4} else {
5  // In production, this becomes a no-op function
6  useSyncQueries = () => ({
7    isConnected: false,
8    connect: () => {},
9    disconnect: () => {},
10    socket: null,
11    users: [],
12  });
13}

💡 Usage with DevTools

For the best experience, use this package with the React Native DevTools application:

1. Download and launch the DevTools application
2. Integrate this package in your React application
3. Start your application
4. DevTools will automatically detect and connect to your running application

Note: For optimal connection, launch DevTools before starting your application.

⚙️ Configuration Options

The useSyncQueriesExternal hook accepts the following options:

Option	Type	Required	Description
queryClient	QueryClient	Yes	Your React Query client instance
socketURL	string	Yes	URL of the socket server (e.g., 'http://localhost:42831')
deviceName	string	Yes	Human-readable name for your device
platform	string	Yes	Platform identifier ('ios', 'android', 'web', 'macos', 'windows', etc.)
deviceId	string	Yes	Unique identifier for your device
extraDeviceInfo	object	No	Additional device metadata to display in DevTools
enableLogs	boolean	No	Enable console logging for debugging (default: false)
isDevice	boolean	No	Set to true if this is a device (default: false)
envVariables	object	No	Environment variables to sync with DevTools
mmkvStorage	MmkvStorage	No	MMKV storage instance for real-time monitoring
asyncStorage	AsyncStorage	No	AsyncStorage instance for polling-based monitoring
secureStorage	SecureStore	No	SecureStore instance for secure data monitoring
secureStorageKeys	string[]	No	Array of SecureStore keys to monitor (required if using secureStorage)

🐛 Troubleshooting

Quick Checklist

1. DevTools Connection

   • Look for "Connected" status in the top-left corner of the DevTools app
   • If it shows "Disconnected", restart the DevTools app

2. No Devices Appearing

   • Verify the Socket.IO client is installed (npm list socket.io-client)
   • Ensure the hook is properly set up in your app
   • Check that socketURL matches the DevTools port (default: 42831)
   • Restart both your app and the DevTools

3. Data Not Syncing

   • Confirm you're passing the correct queryClient instance
   • Set enableLogs: true to see connection information

That's it! If you're still having issues, visit the GitHub repository for support.

⚠️ Important Note About Device IDs

The deviceId parameter must be persistent across app restarts and re-renders. Using a value that changes (like Date.now()) will cause each render to be treated as a new device.

Recommended approaches:

1// Simple approach for single devices
2deviceId: Platform.OS, // Works if you only have one device per platform
3
4// Better approach for multiple simulators/devices of same type
5// Using AsyncStorage, MMKV, or another storage solution
6const [deviceId, setDeviceId] = useState(Platform.OS);
7
8useEffect(() => {
9  const loadOrCreateDeviceId = async () => {
10    // Try to load existing ID
11    const storedId = await AsyncStorage.getItem('deviceId');
12
13    if (storedId) {
14      setDeviceId(storedId);
15    } else {
16      // First launch - generate and store a persistent ID
17      const newId = `${Platform.OS}-${Date.now()}`;
18      await AsyncStorage.setItem('deviceId', newId);
19      setDeviceId(newId);
20    }
21  };
22
23  loadOrCreateDeviceId();
24}, []);

📄 License

MIT

---

Made with ❤️ by LovesWorking