Merge pull request #5 from hsndmr/v2

v2

Author: hsndmr

.circleci/config.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 }}

.eslintrc.json

@@ -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

.github/workflows/publish.yml

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

.github/workflows/test.yml

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

.gitignore

@@ -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
 }

.prettierrc

@@ -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

.vscode/settings.json

@@ -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

CHANGELOG.md

@@ -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