A Rozenite plugin that integrates TanStack Query DevTools into React Native DevTools for enhanced query debugging and management.

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.

Features

• 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

Installation

Install the TanStack Query plugin as a dependency:

npm install @rozenite/tanstack-query-plugin

Quick Start

1. Install the Plugin

npm install @rozenite/tanstack-query-plugin

2. Integrate with Your Query Client

Add the DevTools hook to your React Native app:

// 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 (
    <QueryClientProvider client={queryClient}>
      {/* Your app components */}
    </QueryClientProvider>
  );
}

3. Access DevTools

Start your development server and open React Native DevTools. You'll find the "TanStack Query" panel in the DevTools interface.

Usage

Basic Integration

The plugin automatically integrates with your existing TanStack Query setup:

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 (
    <QueryClientProvider client={queryClient}>
      <YourApp />
    </QueryClientProvider>
  );
}

Made with ❤️ at Callstack

rozenite is an open source project and will always remain free to use. If you think it's cool, please star it 🌟.

Callstack is a group of React and React Native geeks, contact us at [email protected] 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! 🔥