v2

.github/workflows/publish.yml

@@ -0,0 +1,43 @@
+name: Publish Package
+
+on:
+  push:
+    branches:
+      - main
+    tags:
+      - "packages/reactotron-react-query@*"
+
+jobs:
+  publish:
+    name: Publish reactotron-react-query to npm
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          registry-url: "https://registry.npmjs.org/"
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Copy root files into package
+        run: |
+          cp README.md CHANGELOG.md ./packages/reactotron-react-query/
+
+      - name: Build package
+        run: pnpm --filter reactotron-react-query build
+
+      - name: Publish package
+        run: pnpm --filter reactotron-react-query publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/test.yml

@@ -0,0 +1,33 @@
+name: Test Reactotron React Query
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Run tests
+        run: pnpm --filter reactotron-react-query test

.gitignore

@@ -6,3 +6,4 @@ test
 src/**.js
 coverage
 *.log
+dist

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "printWidth": 120,
+  "semi": false,
+  "singleQuote": false,
+  "trailingComma": "es5"
+}

.vscode/settings.json

@@ -3,5 +3,9 @@
   "cSpell.enabled": true,
   "editor.formatOnSave": true,
   "typescript.tsdk": "node_modules/typescript/lib",
-  "typescript.enablePromptUseWorkspaceTsdk": true
+  "typescript.enablePromptUseWorkspaceTsdk": true,
+  "jest.jestCommandLine": "pnpm exec jest",
+  "jest.rootPath": ".",
+  "jest.enableCodeLens": true,
+  "jest.runAllTestsFirst": false
 }

CHANGELOG.md

@@ -2,6 +2,11 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### 2.0.0 (2025-06-22)
+
+- Migrated to @tanstack/react-query (v5+) — replaces support for the legacy react-query package.
+- Added mutation event tracking
+
 ### 1.0.4 (2024-04-08)
 
 - Updated reactotron-core-client version

README.md

@@ -2,6 +2,8 @@
 
 ![Screenshot](reactotron.png)
 
+[![npm](https://img.shields.io/npm/dm/reactotron-react-query)](https://www.npmjs.com/package/reactotron-react-query)
+
 Is there a plugin for Reactotron that allows for similar functionality to the React Query Devtools? Yes! This plugin helps you debug your React Query cache and queries in Reactotron.
 
 ## Installation
@@ -17,46 +19,43 @@ npm i reactotron-react-query --save-dev
 Create a file queryClient.ts
 
 ```typescript
-import { QueryClient } from '@tanstack/react-query';
-const queryClient = new QueryClient();
+import { QueryClient } from "@tanstack/react-query"
+const queryClient = new QueryClient()
 
-export { queryClient };
+export { queryClient }
 ```
 
 Create a file reactotron.ts
 
 ```typescript
-import Reactotron from 'reactotron-react-native';
-import {
-  QueryClientManager,
-  reactotronReactQuery,
-} from 'reactotron-react-query';
-import { queryClient } from './queryClient';
+import Reactotron from "reactotron-react-native"
+import { QueryClientManager, reactotronReactQuery } from "reactotron-react-query"
+import { queryClient } from "./queryClient"
 
 const queryClientManager = new QueryClientManager({
   // @ts-ignore
   queryClient,
-});
-
-Reactotron.use(reactotronReactQuery(queryClientManager))
-  .configure({
-    onDisconnect: () => {
-      queryClientManager.unsubscribe();
-    },
-  })
+})
+
+Reactotron.configure({
+  onDisconnect: () => {
+    queryClientManager.unsubscribe()
+  },
+})
+  .use(reactotronReactQuery(queryClientManager))
   .useReactNative()
-  .connect();
+  .connect()
 ```
 
 Import the queryClient and reactotron in your App.jsx file.
 
 ```jsx
-import { StyleSheet, Text, View } from 'react-native';
-import { QueryClientProvider } from 'react-query';
-import { queryClient } from './queryClient';
+import { StyleSheet, Text, View } from "react-native"
+import { QueryClientProvider } from "react-query"
+import { queryClient } from "./queryClient"
 
 if (__DEV__) {
-  require('./reactotron.ts');
+  require("./reactotron.ts")
 }
 
 export default function App() {
@@ -66,17 +65,17 @@ export default function App() {
         <Text>Open up App.js to start working on your app!</Text>
       </View>
     </QueryClientProvider>
-  );
+  )
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
+    backgroundColor: "#fff",
+    alignItems: "center",
+    justifyContent: "center",
   },
-});
+})
 ```
 
 ### How to invalidate queries

example/.gitignore → apps/example/.gitignore

@@ -7,8 +7,10 @@ node_modules/
 .expo/
 dist/
 web-build/
+expo-env.d.ts
 
 # Native
+.kotlin/
 *.orig.*
 *.jks
 *.p8
@@ -33,3 +35,5 @@ yarn-error.*
 
 # typescript
 *.tsbuildinfo
+
+app-example

apps/example/.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll": "explicit",
+    "source.organizeImports": "explicit",
+    "source.sortMembers": "explicit"
+  }
+}

apps/example/README.md

@@ -0,0 +1,50 @@
+# Welcome to your Expo app 👋
+
+This is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.npmjs.com/package/create-expo-app).
+
+## Get started
+
+1. Install dependencies
+
+   ```bash
+   npm install
+   ```
+
+2. Start the app
+
+   ```bash
+   npx expo start
+   ```
+
+In the output, you'll find options to open the app in a
+
+- [development build](https://docs.expo.dev/develop/development-builds/introduction/)
+- [Android emulator](https://docs.expo.dev/workflow/android-studio-emulator/)
+- [iOS simulator](https://docs.expo.dev/workflow/ios-simulator/)
+- [Expo Go](https://expo.dev/go), a limited sandbox for trying out app development with Expo
+
+You can start developing by editing the files inside the **app** directory. This project uses [file-based routing](https://docs.expo.dev/router/introduction).
+
+## Get a fresh project
+
+When you're ready, run:
+
+```bash
+npm run reset-project
+```
+
+This command will move the starter code to the **app-example** directory and create a blank **app** directory where you can start developing.
+
+## Learn more
+
+To learn more about developing your project with Expo, look at the following resources:
+
+- [Expo documentation](https://docs.expo.dev/): Learn fundamentals, or go into advanced topics with our [guides](https://docs.expo.dev/guides).
+- [Learn Expo tutorial](https://docs.expo.dev/tutorial/introduction/): Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.
+
+## Join the community
+
+Join our community of developers creating universal apps.
+
+- [Expo on GitHub](https://github.com/expo/expo): View our open source platform and contribute.
+- [Discord community](https://chat.expo.dev): Chat with Expo users and ask questions.