Tanstack Query DevTools Expo Plugin
Bring the power of [Tanstack Query DevTools](https://tanstack.com/query/latest/docs/react/devtools) to your Expo and React Native applications. Monitor, debug, and manipulate your queries in real-time across all your devices.
## Features
✅ **Full DevTools Experience**: Access all the features from React Query DevTools in your Expo/React Native app
✅ **Multi-Device Support**: Connect and monitor multiple devices simultaneously
✅ **Device Selection**: Easily switch between connected devices or target all at once
✅ **Device Information**: View detailed device info for all connected devices
✅ **Query Management**: Monitor and interact with all your queries in real-time
✅ **Query Manipulation**: Refetch, invalidate, reset, and modify query data on the fly
✅ **Network Simulation**: Toggle device online/offline states to test network resilience
✅ **Error Simulation**: Trigger error states to test error handling
✅ **Loading Simulation**: Trigger loading states to test loading UIs
✅ **Cross-Platform**: Works on iOS, Android and web Expo apps
✅ **Compatible**: Supports both React Query v4 and v5
## Installation
```bash
npm install tanstack-query-dev-tools-expo-plugin --save-dev
```
## Compatibility
This plugin supports both Tanstack Query v4 and v5, utilizing APIs that have remained stable across these versions.
### Requirements
#### Peer Dependencies
- `@tanstack/react-query`: ^4.0.0 || ^5.0.0
- `expo`: Any version
## Usage
Simply import and use the `useSyncQueries` hook in your app:
```typescript
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { useSyncQueries } from 'tanstack-query-dev-tools-expo-plugin';
const queryClient = new QueryClient();
export function App() {
// Initialize the dev tools
useSyncQueries({ queryClient });
return (
{/* Your app components */}
);
}
```
## Press Shift + M in your terminal to show your expo dev tools and select `Open tanstack-query-dev-tools-expo-plugin`
## DevTools Capabilities
### Monitoring Queries
- View active, inactive, and stale queries
- Inspect query data, status, and metadata
- Track query updates in real-time
### Query Manipulation
- Manually trigger refetches
- Invalidate queries to force refetches
- Reset query cache entries
- Modify query data directly
### Debugging Tools
- Simulate error states
- Simulate loading states
- Toggle network connectivity
- View detailed query timings
### Device Management
- Connect multiple devices simultaneously
- View detailed device information
- Target specific devices for actions
- Apply changes across all connected devices
## License
MIT
## Author
[LovesWorking](https://github.com/LovesWorking)
## Repository
[GitHub Repository](https://github.com/LovesWorking/tanstack-query-dev-tools-expo-plugin)