Reactotron React Query for React Native

!Screenshot


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

``bash
npm i @tanstack/react-query
npm i reactotron-react-native --save-dev
npm i reactotron-react-query --save-dev
`

Usage

Create a file queryClient.ts

`typescript
import { QueryClient } from "@tanstack/react-query"
const queryClient = new 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"

const queryClientManager = new QueryClientManager({
// @ts-ignore
queryClient,
})

Reactotron.configure({
onDisconnect: () => {
queryClientManager.unsubscribe()
},
})
.use(reactotronReactQuery(queryClientManager))
.useReactNative()
.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"

if (__DEV__) {
require("./reactotron.ts")
}

export default function App() {
return (


Open up App.js to start working on your app!


)
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
})
``

$3

If you want to invalidate a query, you can use custom commands.

!Screenshot