Skip to content

Commit 721a66d

Browse files
josydeleonjosydeleon
committed
Merge branch 'main' into feature
2 parents 28e01dc + 39db454 commit 721a66d

3 files changed

Lines changed: 205 additions & 1 deletion

File tree

‎README.md‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
# React Query Native Devtool
2+
3+
React Native Query Devtool is a monorepo containing a React Native component and a standalone app to visualize query data in a similar way to react-query-devtools for the web.
4+
5+
![Screenshot](https://github.com/jossydeleon/react-native-query-devtool-monorepo/assets/25192002/981f444f-4a27-4d41-8a95-bab861d7edab)
6+
7+
## Features
8+
9+
- Provides a component for integrating query data in React Native applications running react-query v3, and @tanstack/react-query v4 and v5.
10+
- Includes a standalone app to visualize and help debug query data.
11+
12+
## Standalone App
13+
14+
The standalone app allows you to visualize and debug query data from your React Native application using the `@jdl/react-native-query-devtool` package.
15+
16+
## Installation
17+
18+
You can download the standalone app from the following link. Currently, it's available only for **macOS M1**:
19+
20+
[Download latest App](https://github.com/jossydeleon/react-native-query-devtool-monorepo/releases)
21+
22+
**Windows and Linux users:** You need to build the app from source as it's currently only available for **macOS M1**. Ensure to set up your environment accordingly before building the app.
23+
24+
```bash
25+
# Go to app folder
26+
cd react-native-query-devtool-app
27+
28+
# Install dependencies
29+
yarn
30+
31+
# Build
32+
yarn build-server
33+
```
34+
35+
After running the build command, you'll find the freshly built app in a new folder named **'out'**.
36+
37+
## React Native Component
38+
39+
To use the devtool component in your React Native project, install the package:
40+
41+
```bash
42+
npm install @jdl/react-native-query-devtool
43+
# or
44+
yarn add @jdl/react-native-query-devtool
45+
```
46+
47+
## Usage
48+
49+
In your React Native application, import `QueryNativeDevtool` to send query data to the server app for debugging:
50+
51+
```javascript
52+
import { QueryNativeDevtool } from "@jdl/react-native-query-devtool";
53+
54+
export default function App() {
55+
return (
56+
<QueryClientProvider client={queryClient}>
57+
<View style={styles.container}>
58+
<Main />
59+
</View>
60+
<QueryNativeDevtool queryClient={queryClient} />
61+
</QueryClientProvider>
62+
);
63+
}
64+
```
65+
66+
## Support for react-query v3
67+
68+
If your app runs `react-query v3` pass `version="v3"` prop to `QueryNativeDevtool`
69+
70+
```javascript
71+
import { QueryNativeDevtool } from "@jdl/react-native-query-devtool";
72+
73+
export default function App() {
74+
return (
75+
<QueryClientProvider client={queryClient}>
76+
<View style={styles.container}>
77+
<Main />
78+
</View>
79+
<QueryNativeDevtool queryClient={queryClient} version="v3" />
80+
</QueryClientProvider>
81+
);
82+
}
83+
```
84+
85+
This will enable your React Native application to send query data to the Electron app for debugging purposes.
86+
87+
## Examples
88+
89+
In the example folder, you can find example projects demonstrating the usage of `@jdl/react-native-query-devtool` with different versions of React Query (v3, v4, and v5). To test the examples, navigate to the example folder, select the desired example, and run yarn ios or yarn android.
90+
91+
```bash
92+
cd example
93+
94+
# Navigate to the desired example, for example:
95+
cd react-query-v3
96+
97+
# Install dependencies
98+
yarn
99+
100+
# Run example
101+
yarn ios
102+
# or
103+
yarn android
104+
```

‎packages/react-native-query-devtool-app/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "@jdl/react-native-query-devtool-app",
33
"productName": "react-native-query-devtool-app",
44
"version": "1.0.0",
5-
"description": "My Electron application description",
5+
"description": "The standalone app allows you to visualize and debug query data from your React Native application using the @jdl/react-native-query-devtool package.",
66
"main": ".webpack/main",
77
"scripts": {
88
"start": "electron-forge start",

‎packages/react-native-query-devtool/README.md‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
# @jdl/react-native-query-devtool
2+
3+
## Features
4+
5+
- Provides a component for integrating query data in React Native applications running react-query v3, and @tanstack/react-query v4 and v5.
6+
- Includes a standalone app to visualize and help debug query data.
7+
8+
## Standalone App
9+
10+
The standalone app allows you to visualize and debug query data from your React Native application using the `@jdl/react-native-query-devtool` package.
11+
12+
## Installation
13+
14+
You can download the standalone app from the following link. Currently, it's available only for **macOS M1**:
15+
16+
[Download latest App](https://github.com/jossydeleon/react-native-query-devtool-monorepo/releases)
17+
18+
**Windows and Linux users:** You need to build the app from source as it's currently only available for **macOS M1**. Ensure to set up your environment accordingly before building the app.
19+
20+
```bash
21+
# Go to app folder
22+
cd react-native-query-devtool-app
23+
24+
# Install dependencies
25+
yarn
26+
27+
# Build
28+
yarn build-server
29+
```
30+
31+
After running the build command, you'll find the freshly built app in a new folder named **'out'**.
32+
33+
## React Native Component
34+
35+
To use the devtool component in your React Native project, install the package:
36+
37+
```bash
38+
npm install @jdl/react-native-query-devtool
39+
# or
40+
yarn add @jdl/react-native-query-devtool
41+
```
42+
43+
## Usage
44+
45+
In your React Native application, import `QueryNativeDevtool` to send query data to the Electron app for debugging:
46+
47+
```javascript
48+
import { QueryNativeDevtool } from "@jdl/react-native-query-devtool";
49+
50+
export default function App() {
51+
return (
52+
<QueryClientProvider client={queryClient}>
53+
<View style={styles.container}>
54+
<Main />
55+
</View>
56+
<QueryNativeDevtool queryClient={queryClient} />
57+
</QueryClientProvider>
58+
);
59+
}
60+
```
61+
62+
## Support for react-query v3
63+
64+
If your app runs `react-query v3` pass `version="v3"` prop to `QueryNativeDevtool`
65+
66+
```javascript
67+
import { QueryNativeDevtool } from "@jdl/react-native-query-devtool";
68+
69+
export default function App() {
70+
return (
71+
<QueryClientProvider client={queryClient}>
72+
<View style={styles.container}>
73+
<Main />
74+
</View>
75+
<QueryNativeDevtool queryClient={queryClient} version="v3" />
76+
</QueryClientProvider>
77+
);
78+
}
79+
```
80+
81+
This will enable your React Native application to send query data to the server app for debugging purposes.
82+
83+
## Examples
84+
85+
In the example folder, you can find example projects demonstrating the usage of `@jdl/react-native-query-devtool` with different versions of React Query (v3, v4, and v5). To test the examples, navigate to the example folder, select the desired example, and run yarn ios or yarn android.
86+
87+
```bash
88+
cd example
89+
90+
# Navigate to the desired example, for example:
91+
cd react-query-v3
92+
93+
# Install dependencies
94+
yarn
95+
96+
# Run example
97+
yarn ios
98+
# or
99+
yarn android
100+
```

0 commit comments

Comments
 (0)