https://github.com/hsndmr/reactotron-react-query

Is there a plugin for Reactotron that allows for similar functionality to the React Query Devtools?
https://github.com/hsndmr/reactotron-react-query

Last synced: 13 days ago
JSON representation

Is there a plugin for Reactotron that allows for similar functionality to the React Query Devtools?

• Host: GitHub
• URL: https://github.com/hsndmr/reactotron-react-query
• Owner: hsndmr
• Created: 2023-01-01T22:39:31.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-04-08T18:59:55.000Z (7 months ago)
• Last Synced: 2024-10-01T17:19:08.226Z (about 1 month ago)
• Language: TypeScript
• Size: 1.9 MB
• Stars: 61
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: .github/CONTRIBUTING.md

Awesome Lists containing this project

README

        
# Reactotron React Query for React Native

![Screenshot](reactotron.png)

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.use(reactotronReactQuery(queryClientManager))

  .configure({

    onDisconnect: () => {

      queryClientManager.unsubscribe();

    },

  })

  .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',

  },

});

```

### How to invalidate queries

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

![Screenshot](art/invalidate-queries.png)