@buoy-gg/react-query 6.0.0 → 7.0.0

package/README.md

@@ -1,389 +1,63 @@
-# @buoy/react-query
+# @buoy-gg/react-query
 
-[![npm](https://img.shields.io/npm/v/@buoy%2Freact-query)](https://www.npmjs.com/package/@buoy/react-query)
+[![npm version](https://img.shields.io/npm/v/@buoy-gg/react-query?style=flat-square&labelColor=1c1c1c&color=10B981)](https://www.npmjs.com/package/@buoy-gg/react-query) [![npm downloads](https://img.shields.io/npm/dm/@buoy-gg/react-query?style=flat-square&labelColor=1c1c1c&color=10B981)](https://www.npmjs.com/package/@buoy-gg/react-query)
 
-React Query (TanStack Query) devtools modal for React Native development.
+**Full TanStack Query devtools on the device — inspect the cache, simulate loading and error states, and flip your app offline with one tap.**
 
-## Features
+Part of [Buoy](https://github.com/Buoy-gg/buoy) — devtools that live inside your React Native app. Install it and it auto-appears in the floating menu from [`@buoy-gg/core`](https://www.npmjs.com/package/@buoy-gg/core).
 
-- **Query Inspector**: Browse and inspect all queries in your app
-- **Mutation Tracking**: Monitor mutations and their states
-- **Cache Inspection**: View and manipulate the React Query cache
-- **Query Invalidation**: Invalidate queries directly from the UI
-- **Refetch Control**: Manually trigger query refetches
-- **Filter & Search**: Filter queries by status, search by key
-- **WiFi Toggle**: Simulate offline mode to test query behavior
-- **Performance Monitoring**: Track query timings and performance
-- **Beautiful UI**: Modern, game-themed interface matching other React Buoy tools
+![React Query DevTools demo](https://github.com/user-attachments/assets/258e892d-3eaf-41f8-9fae-d7d2dcd6c39d)
 
-## Installation
-
-This package is part of the React Buoy monorepo and is automatically available to other packages and the example app.
-
-For external projects:
+## Install
 
 ```bash
-npm install @buoy/react-query @tanstack/react-query
-# or
-pnpm add @buoy/react-query @tanstack/react-query
-# or
-yarn add @buoy/react-query @tanstack/react-query
+npm install @buoy-gg/core @buoy-gg/react-query
 ```
 
-## Quick Start
+Requires `@tanstack/react-query` as a peer — you already have it if you use React Query.
 
-### Simplest Setup - Just 1 Line!
+## Quick start
 
-**Import the preset and add it to your tools array. Done!**
+Render `FloatingDevTools` inside your `QueryClientProvider`. The tool picks up your `QueryClient` from context and connects automatically — no extra call needed.
 
-```typescript
-import { reactQueryToolPreset } from '@buoy/react-query';
-import { FloatingDevTools } from '@buoy/core';
+```tsx
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { FloatingDevTools } from '@buoy-gg/core';
 
 const queryClient = new QueryClient();
 
-const installedApps = [
-  reactQueryToolPreset, // That's it! One line.
-  // ...your other tools
-];
-
-function App() {
+export default function App() {
   return (
     <QueryClientProvider client={queryClient}>
-      <FloatingDevTools
-        apps={installedApps}
-        environment="local"
-        userRole="admin"
-      />
-      <YourAppContent />
+      <YourApp />
+      <FloatingDevTools />
     </QueryClientProvider>
   );
 }
 ```
 
-**Done!** The preset automatically:
-- ✅ Inspects all queries and mutations
-- ✅ Provides cache manipulation tools
-- ✅ Includes WiFi toggle for offline testing
-- ✅ No configuration required
-
-### Custom Configuration
-
-If you want to customize the appearance:
-
-```typescript
-import { createReactQueryTool } from '@buoy/react-query';
-
-const myQueryTool = createReactQueryTool({
-  name: "TANSTACK",
-  colorPreset: "purple",
-  enableSharedModalDimensions: true,
-});
-
-const installedApps = [
-  myQueryTool,
-  // ...other tools
-];
-```
-
-### Alternative: Manual Setup
-
-If you're not using FloatingDevTools or want more control:
-
-```typescript
-import { ReactQueryDevToolsModal } from '@buoy/react-query';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-
-const queryClient = new QueryClient();
-
-function App() {
-  const [showQuery, setShowQuery] = useState(false);
-
-  return (
-    <QueryClientProvider client={queryClient}>
-      <Button onPress={() => setShowQuery(true)}>
-        Open Query Inspector
-      </Button>
-
-      <ReactQueryDevToolsModal
-        visible={showQuery}
-        onClose={() => setShowQuery(false)}
-      />
-      
-      <YourAppContent />
-    </QueryClientProvider>
-  );
-}
-```
-
-## API Reference
-
-### Presets
-
-#### `reactQueryToolPreset`
-
-Pre-configured React Query devtools ready to use with FloatingDevTools.
-
-**Example:**
-```typescript
-import { reactQueryToolPreset } from '@buoy/react-query';
-
-const installedApps = [reactQueryToolPreset];
-```
-
-#### `createReactQueryTool(options?)`
-
-Create a custom React Query devtools configuration.
-
-**Options:**
-```typescript
-{
-  /** Tool name (default: "QUERY") */
-  name?: string;
-  /** Tool description */
-  description?: string;
-  /** Icon color preset (default: "red") */
-  colorPreset?: "orange" | "cyan" | "purple" | "pink" | "yellow" | "green" | "red";
-  /** Custom tool ID (default: "query") */
-  id?: string;
-  /** Enable shared modal dimensions (default: true) */
-  enableSharedModalDimensions?: boolean;
-}
-```
-
-**Example:**
-```typescript
-import { createReactQueryTool } from '@buoy/react-query';
-
-const myQueryTool = createReactQueryTool({
-  name: "RQ DEVTOOLS",
-  colorPreset: "cyan",
-  enableSharedModalDimensions: true,
-});
-```
-
-### Components
-
-#### `ReactQueryDevToolsModal`
-
-Main modal component for React Query devtools.
-
-**Props:**
-```typescript
-interface ReactQueryDevToolsModalProps {
-  /** Whether the modal is visible */
-  visible: boolean;
-  /** Callback when modal is closed */
-  onClose: () => void;
-  /** Whether to use shared modal dimensions (default: true) */
-  enableSharedModalDimensions?: boolean;
-}
-```
-
-**Example:**
-```typescript
-<ReactQueryDevToolsModal
-  visible={isVisible}
-  onClose={handleClose}
-  enableSharedModalDimensions={true}
-/>
-```
-
-#### `WifiToggle`
-
-Small WiFi toggle component for simulating offline mode.
-
-**Props:**
-```typescript
-interface WifiToggleProps {
-  /** Icon size (default: 16) */
-  size?: number;
-}
-```
-
-**Example:**
-```typescript
-import { WifiToggle } from '@buoy/react-query';
-
-<WifiToggle size={20} />
-```
-
-### Hooks
-
-#### `useWifiState()`
-
-Hook to manage and access WiFi/online state.
-
-**Returns:**
-```typescript
-{
-  /** Whether the app is online */
-  isOnline: boolean;
-  /** Toggle WiFi state */
-  handleWifiToggle: () => void;
-  /** Set online state directly */
-  setIsOnline: (online: boolean) => void;
-}
-```
-
-**Example:**
-```typescript
-import { useWifiState } from '@buoy/react-query';
-
-function MyComponent() {
-  const { isOnline, handleWifiToggle } = useWifiState();
-
-  return (
-    <View>
-      <Text>Status: {isOnline ? 'Online' : 'Offline'}</Text>
-      <Button onPress={handleWifiToggle}>
-        Toggle WiFi
-      </Button>
-    </View>
-  );
-}
-```
-
-## Use Cases
+That's it. The React Query tool (and a WiFi toggle) appear in the floating menu.
 
-### Query Debugging
+## What you get
 
-Inspect and debug queries in real-time:
+- **Cache inspection** — browse every query, drill into cached data with an interactive JSON tree, and edit values in place
+- **Refetch & invalidate** — trigger refetches or invalidate queries straight from the UI
+- **Simulate loading & error states** — test spinners and error boundaries without waiting on real network conditions
+- **One-tap offline toggle** — the WiFi switch drives React Query's `onlineManager` to pause all queries, perfect for offline-first testing
+- **Live mutation tracking** — status, variables, response or error, and timing for every mutation as it runs
+- **Query states at a glance** — fresh, stale, fetching, paused, and inactive across your whole cache
+- **Filter & search** — narrow by status or search by query key
 
-```typescript
-import { reactQueryToolPreset } from '@buoy/react-query';
-
-// Add to your dev tools
-const installedApps = [reactQueryToolPreset];
-
-// Now you can:
-// - See all active queries
-// - View query data and status
-// - Inspect stale/fresh/loading states
-// - Manually refetch queries
-// - Invalidate queries to trigger refetch
-```
-
-### Offline Testing
-
-Test your app's behavior in offline mode:
-
-```typescript
-import { WifiToggle } from '@buoy/react-query';
-
-// Add WiFi toggle to your header
-<WifiToggle size={18} />
-
-// Or use the hook directly
-const { isOnline, handleWifiToggle } = useWifiState();
-```
-
-### Cache Manipulation
-
-Inspect and manipulate the query cache:
-
-```typescript
-// In the React Query devtools modal:
-// - View all cached queries
-// - See cache sizes and data
-// - Manually invalidate cache entries
-// - Trigger refetches
-// - Remove queries from cache
-```
-
-### Mutation Monitoring
-
-Track mutations and their states:
-
-```typescript
-// In the React Query devtools modal:
-// - View all active mutations
-// - See mutation status (idle, loading, success, error)
-// - Inspect mutation data and variables
-// - Track mutation timing
-```
-
-## Features in Detail
-
-### Query Browser
-
-- **View All Queries**: See all queries registered with React Query
-- **Filter by Status**: Filter by fresh, fetching, stale, or inactive
-- **Search**: Search queries by key
-- **Query Details**: View full query data, status, and metadata
-- **Refetch**: Manually trigger query refetches
-- **Invalidate**: Invalidate queries to trigger automatic refetch
-- **Remove**: Remove queries from cache
-
-### Mutation Tracking
-
-- **View Mutations**: See all registered mutations
-- **Mutation Status**: Track mutation states (idle, loading, success, error)
-- **Variables**: Inspect mutation variables
-- **Results**: View mutation results and errors
-- **Reset**: Reset mutation states
-
-### WiFi Toggle
-
-- **Offline Mode**: Simulate offline state
-- **Query Behavior**: Test how queries behave without network
-- **Retry Logic**: Verify retry and error handling
-- **Cache Fallbacks**: Test cache-first strategies
-
-### Performance Monitoring
-
-- **Query Timing**: See how long queries take
-- **Cache Hits**: Track cache hit rates
-- **Stale Time**: Monitor query freshness
-- **Background Updates**: See when queries update in background
-
-## React Query Integration
-
-This package integrates with React Query's online manager to provide WiFi toggle functionality. When you toggle WiFi off:
-
-- React Query treats the app as offline
-- Queries won't refetch automatically
-- New queries will be paused
-- Mutations will be paused until online
-- Background refetches are disabled
-
-This is perfect for testing offline scenarios without actually disconnecting your device.
-
-## Dependencies
-
-- `@buoy/shared-ui` - Common UI components and utilities
-- `@tanstack/react-query` - React Query library (peer dependency)
-- React and React Native (peer dependencies)
-
-## Development
-
-### Building
-
-```bash
-pnpm build
-```
-
-### Type Checking
-
-```bash
-pnpm typecheck
-```
-
-### Clean Build
-
-```bash
-pnpm clean
-```
+## Desktop & AI
 
-## License
+The same live session streams to [Buoy Desktop](https://github.com/Buoy-gg/Buoy-Desktop) (free, macOS/Windows/Linux) and to Claude Code or Cursor via the [Buoy MCP server](https://buoy.gg/buoy/latest/docs/mcp).
 
-MIT
+## Free vs Pro
 
-## Contributing
+Every tool is free. [Pro](https://buoy.gg/pricing) unlocks production builds, the MCP server, and unlimited capture. Every weekend, Pro features unlock free for everyone.
 
-See the main repository [CONTRIBUTING.md](../../CONTRIBUTING.md) for contribution guidelines.
+---
 
-## Support
+📚 [Full docs](https://buoy.gg/buoy/latest/docs/tools/react-query) · [All Buoy tools](https://github.com/Buoy-gg/buoy)
 
-For issues and feature requests, please visit the [GitHub repository](https://github.com/LovesWorking/react-native-buoy/issues).
+Proprietary software. © Buoy LLC. [Terms](https://buoy.gg/terms)

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@buoy-gg/react-query",
-  "version": "6.0.0",
-  "description": "react-query package",
+  "version": "7.0.0",
+  "description": "TanStack Query devtools inside your React Native app — cache inspection, refetch & invalidate, offline toggle. Part of Buoy devtools.",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
   "types": "lib/typescript/index.d.ts",
@@ -26,8 +26,8 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@buoy-gg/shared-ui": "6.0.0",
-    "@buoy-gg/floating-tools-core": "6.0.0"
+    "@buoy-gg/floating-tools-core": "7.0.0",
+    "@buoy-gg/shared-ui": "7.0.0"
   },
   "peerDependencies": {
     "@tanstack/react-query": ">=5.0.0",
@@ -61,17 +61,28 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/LovesWorking/react-native-buoy.git",
+    "url": "https://github.com/Buoy-gg/buoy.git",
     "directory": "packages/react-query"
   },
   "bugs": {
     "url": "https://github.com/LovesWorking/react-native-buoy/issues"
   },
-  "homepage": "https://github.com/LovesWorking/react-native-buoy/tree/main/packages/react-query#readme",
+  "homepage": "https://buoy.gg/tools/react-query",
   "publishConfig": {
     "access": "public",
     "tag": "latest"
   },
+  "keywords": [
+    "react-native",
+    "expo",
+    "devtools",
+    "debugging",
+    "react-native-devtools",
+    "flipper-alternative",
+    "react-query",
+    "tanstack-query",
+    "cache-inspector"
+  ],
   "scripts": {
     "build": "bob build",
     "typecheck": "tsc --noEmit",