Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 3 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 (9 months ago)
- Last Synced: 2024-12-12T16:24:15.770Z (11 days ago)
- Language: TypeScript
- Size: 1.9 MB
- Stars: 69
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
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)