Tanstack Query DevTools Expo Plugin

Bring the power of Tanstack Query 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

!actions
!ui dev tools

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.

$3

#### 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`

!image

DevTools Capabilities

$3

- View active, inactive, and stale queries
- Inspect query data, status, and metadata
- Track query updates in real-time

$3

- Manually trigger refetches
- Invalidate queries to force refetches
- Reset query cache entries
- Modify query data directly

$3

- Simulate error states
- Simulate loading states
- Toggle network connectivity
- View detailed query timings

$3

- Connect multiple devices simultaneously
- View detailed device information
- Target specific devices for actions
- Apply changes across all connected devices

License

MIT

Author

LovesWorking

Repository

GitHub Repository