TanStack Query for Rozenite.
npm install @rozenite/tanstack-query-plugin[![mit licence][license-badge]][license] [![npm downloads][npm-downloads-badge]][npm-downloads] [![Chat][chat-badge]][chat] [![PRs Welcome][prs-welcome-badge]][prs-welcome]
The Rozenite TanStack Query Plugin provides a seamless integration of TanStack Query DevTools into your React Native DevTools environment. It offers real-time query monitoring, cache management, and debugging capabilities, all within the familiar DevTools interface.
This plugin was inspired by the excellent work of Austin Johnson and his react-query-external-sync library, which provided crucial insights into making TanStack Query work effectively in React Native environments.
- Query Monitoring: Real-time monitoring of all queries and mutations
- Cache Management: Visual cache inspection and management tools
- Query Actions: Refetch, invalidate, reset, and remove queries
- State Manipulation: Trigger loading states and error conditions for testing
- Mutation Tracking: Monitor mutation states and progress
- Bidirectional Communication: Real-time sync between device and DevTools
- Production Safety: Automatically disabled in production builds
Install the TanStack Query plugin as a dependency:
``bash`
npm install @rozenite/tanstack-query-plugin
`bash`
npm install @rozenite/tanstack-query-plugin
Add the DevTools hook to your React Native app:
`typescript
// App.tsx
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { useTanStackQueryDevTools } from '@rozenite/tanstack-query-plugin';
const queryClient = new QueryClient();
function App() {
// Enable DevTools in development
useTanStackQueryDevTools(queryClient);
return (
{/ Your app components /}
);
}
`
Start your development server and open React Native DevTools. You'll find the "TanStack Query" panel in the DevTools interface.
The plugin automatically integrates with your existing TanStack Query setup:
`typescript
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { useTanStackQueryDevTools } from '@rozenite/tanstack-query-plugin';
const queryClient = new QueryClient({
defaultOptions: {
queries: {
staleTime: 5 60 1000, // 5 minutes
},
},
});
function App() {
// DevTools are automatically enabled in development
useTanStackQueryDevTools(queryClient);
return (
);
}
`
rozenite` is an open source project and will always remain free to use. If you think it's cool, please star it 🌟.
[Callstack][callstack-readme-with-love] is a group of React and React Native geeks, contact us at hello@callstack.com if you need any help with these or just want to say hi!
Like the project? ⚛️ Join the team who does amazing stuff for clients and drives React Native Open Source! 🔥
[callstack-readme-with-love]: https://callstack.com/?utm_source=github.com&utm_medium=referral&utm_campaign=rozenite&utm_term=readme-with-love
[license-badge]: https://img.shields.io/npm/l/rozenite?style=for-the-badge
[license]: https://github.com/callstackincubator/rozenite/blob/main/LICENSE
[npm-downloads-badge]: https://img.shields.io/npm/dm/rozenite?style=for-the-badge
[npm-downloads]: https://www.npmjs.com/package/@rozenite/tanstack-query-plugin
[prs-welcome-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=for-the-badge
[prs-welcome]: https://github.com/callstackincubator/rozenite/blob/main/CONTRIBUTING.md
[chat-badge]: https://img.shields.io/discord/426714625279524876.svg?style=for-the-badge
[chat]: https://discord.gg/xgGt7KAjxv