github/AutoGPT
1
1
Fork 0
mirror of https://github.com/Significant-Gravitas/AutoGPT.git synced 2026-01-10 07:38:04 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat(frontend): Add React Query DevTools and ESLint Rules (#10194)

Browse Source 
This PR integrates React Query DevTools and ESLint rules to improve the
development workflow and enforce best practices for data fetching.

### Changes:
- **React Query DevTools:**
  - Added the `@tanstack/react-query-devtools` package.
  - DevTools are enabled by default in the development environment.
- They can be disabled by setting
`NEXT_PUBLIC_REACT_QUERY_DEVTOOL=false` in your environment variables.

- **ESLint Rules:**
- Integrated `@tanstack/eslint-plugin-query` to enforce best practices
and catch common errors in React Query usage.

- **Configuration:**
- Added the `NEXT_PUBLIC_REACT_QUERY_DEVTOOL` variable to the
`.env.example` file so other developers are aware of this option.

- **Documentation:**
- Updated the `README.md` with instructions on how to toggle the
DevTools using the environment variable.

Configuration Changes Checklist
 - `.env.example` has been updated with the new environment variable.

### Checklist
For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
    - [x] Run the app in development with pnpm dev.
    - [x]  Verified DevTools toggle with environment variables
    - [x] Run pnpm lint in the frontend directory.
    - [x] Confirm that linting passes on the current codebase.

### Screenshot

<img width="1512" alt="Screenshot 2025-06-19 at 6 32 22 PM"
src="https://github.com/user-attachments/assets/a3defd23-2c3d-4d20-b152-037d85e04503"
/>

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
This commit is contained in:
Abhimanyu Yadav
2025-06-19 21:22:31 +05:30
committed by GitHub
parent f3731afaf2
commit a541a3edd7
6 changed files with 67 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
autogpt_platform/frontend/.env.example
View File

@@ -33,3 +33,6 @@ NEXT_PUBLIC_SHOW_BILLING_PAGE=false
## This is the frontend site key
NEXT_PUBLIC_CLOUDFLARE_TURNSTILE_SITE_KEY=
NEXT_PUBLIC_TURNSTILE=disabled
# Devtools
NEXT_PUBLIC_REACT_QUERY_DEVTOOL=true

3
autogpt_platform/frontend/.eslintrc.json
View File

@@ -2,7 +2,8 @@
"extends": [
"next/core-web-vitals",
"next/typescript",
"plugin:storybook/recommended"
"plugin:storybook/recommended",
"plugin:@tanstack/query/recommended"
],
"rules": {
// Disabling exhaustive-deps to avoid forcing unnecessary dependencies and useCallback proliferation.

6
autogpt_platform/frontend/README.md
View File

@@ -156,3 +156,9 @@ By integrating Storybook into our development workflow, we can streamline UI dev
- [**Zod**](https://zod.dev/) - TypeScript-first schema validation
- [**React Table**](https://tanstack.com/table) - Headless table library
- [**React Flow**](https://reactflow.dev/) - Interactive node-based diagrams
- [**React Query**](https://tanstack.com/query/latest/docs/framework/react/overview) - Data fetching and caching
- [**React Query DevTools**](https://tanstack.com/query/latest/docs/framework/react/devtools) - Debugging tool for React Query
### Development Tools
- `NEXT_PUBLIC_REACT_QUERY_DEVTOOL` - Enable React Query DevTools. Set to `true` to enable.

2
autogpt_platform/frontend/package.json
View File

@@ -98,6 +98,8 @@
"@storybook/addon-links": "9.0.12",
"@storybook/addon-onboarding": "9.0.12",
"@storybook/nextjs": "9.0.12",
"@tanstack/eslint-plugin-query": "5.78.0",
"@tanstack/react-query-devtools": "5.80.10",
"@types/canvas-confetti": "1.9.0",
"@types/lodash": "4.17.18",
"@types/negotiator": "0.6.4",

54
autogpt_platform/frontend/pnpm-lock.yaml generated
View File

@@ -225,6 +225,12 @@ importers:
'@storybook/nextjs':
specifier: 9.0.12
version: 9.0.12(esbuild@0.25.5)(next@15.3.3(@babel/core@7.27.4)(@opentelemetry/api@1.9.0)(@playwright/test@1.53.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.0.12(@testing-library/dom@10.4.0)(prettier@3.5.3))(type-fest@4.41.0)(typescript@5.8.3)(webpack-hot-middleware@2.26.1)(webpack@5.99.9(esbuild@0.25.5))
'@tanstack/eslint-plugin-query':
specifier: 5.78.0
version: 5.78.0(eslint@8.57.1)(typescript@5.8.3)
'@tanstack/react-query-devtools':
specifier: 5.80.10
version: 5.80.10(@tanstack/react-query@5.80.7(react@18.3.1))(react@18.3.1)
'@types/canvas-confetti':
specifier: 1.9.0
version: 1.9.0
@@ -2504,9 +2510,23 @@ packages:
'@swc/helpers@0.5.15':
resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
'@tanstack/eslint-plugin-query@5.78.0':
resolution: {integrity: sha512-hYkhWr3UP0CkAsn/phBVR98UQawbw8CmTSgWtdgEBUjI60/GBaEIkpgi/Bp/2I8eIDK4+vdY7ac6jZx+GR+hEQ==}
peerDependencies:
eslint: ^8.57.0 || ^9.0.0
'@tanstack/query-core@5.80.7':
resolution: {integrity: sha512-s09l5zeUKC8q7DCCCIkVSns8zZrK4ZDT6ryEjxNBFi68G4z2EBobBS7rdOY3r6W1WbUDpc1fe5oY+YO/+2UVUg==}
'@tanstack/query-devtools@5.80.0':
resolution: {integrity: sha512-D6gH4asyjaoXrCOt5vG5Og/YSj0D/TxwNQgtLJIgWbhbWCC/emu2E92EFoVHh4ppVWg1qT2gKHvKyQBEFZhCuA==}
'@tanstack/react-query-devtools@5.80.10':
resolution: {integrity: sha512-6JL63fSc7kxyGOLV2w466SxhMn/m7LZk/ximQciy6OpVt+n2A8Mq3S0QwhIzfm4WEwLK/F3OELfzRToQburnYA==}
peerDependencies:
'@tanstack/react-query': ^5.80.10
react: ^18 || ^19
'@tanstack/react-query@5.80.7':
resolution: {integrity: sha512-u2F0VK6+anItoEvB3+rfvTO9GEh2vb00Je05OwlUe/A0lkJBgW1HckiY3f9YZa+jx6IOe4dHPh10dyp9aY3iRQ==}
peerDependencies:
@@ -3733,8 +3753,8 @@ packages:
eastasianwidth@0.2.0:
resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
electron-to-chromium@1.5.170:
resolution: {integrity: sha512-GP+M7aeluQo9uAyiTCxgIj/j+PrWhMlY7LFVj8prlsPljd0Fdg9AprlfUi+OCSFWy9Y5/2D/Jrj9HS8Z4rpKWA==}
electron-to-chromium@1.5.169:
resolution: {integrity: sha512-q7SQx6mkLy0GTJK9K9OiWeaBMV4XQtBSdf6MJUzDB/H/5tFXfIiX38Lci1Kl6SsgiEhz1SQI1ejEOU5asWEhwQ==}
elliptic@6.6.1:
resolution: {integrity: sha512-RaddvvMatK2LJHqFJ+YA4WysVN5Ita9E35botqIYspQ4TkRAlCicdzKOjlyv/1Za5RyTNn7di//eEV0uTAfe3g==}
@@ -6037,8 +6057,8 @@ packages:
uglify-js:
optional: true
terser@5.43.1:
resolution: {integrity: sha512-+6erLbBm0+LROX2sPXlUYx/ux5PyE9K/a92Wrt6oA+WDAoFTdpHE5tCYCI5PNzq2y8df4rA+QgHLJuR4jNymsg==}
terser@5.42.0:
resolution: {integrity: sha512-UYCvU9YQW2f/Vwl+P0GfhxJxbUGLwd+5QrrGgLajzWAtC/23AX0vcise32kkP7Eu0Wu9VlzzHAXkLObgjQfFlQ==}
engines: {node: '>=10'}
hasBin: true
@@ -8944,8 +8964,24 @@ snapshots:
dependencies:
tslib: 2.8.1
'@tanstack/eslint-plugin-query@5.78.0(eslint@8.57.1)(typescript@5.8.3)':
dependencies:
'@typescript-eslint/utils': 8.34.1(eslint@8.57.1)(typescript@5.8.3)
eslint: 8.57.1
transitivePeerDependencies:
- supports-color
- typescript
'@tanstack/query-core@5.80.7': {}
'@tanstack/query-devtools@5.80.0': {}
'@tanstack/react-query-devtools@5.80.10(@tanstack/react-query@5.80.7(react@18.3.1))(react@18.3.1)':
dependencies:
'@tanstack/query-devtools': 5.80.0
'@tanstack/react-query': 5.80.7(react@18.3.1)
react: 18.3.1
'@tanstack/react-query@5.80.7(react@18.3.1)':
dependencies:
'@tanstack/query-core': 5.80.7
@@ -9767,7 +9803,7 @@ snapshots:
browserslist@4.25.0:
dependencies:
caniuse-lite: 1.0.30001723
electron-to-chromium: 1.5.170
electron-to-chromium: 1.5.169
node-releases: 2.0.19
update-browserslist-db: 1.1.3(browserslist@4.25.0)
@@ -10276,7 +10312,7 @@ snapshots:
eastasianwidth@0.2.0: {}
electron-to-chromium@1.5.170: {}
electron-to-chromium@1.5.169: {}
elliptic@6.6.1:
dependencies:
@@ -11035,7 +11071,7 @@ snapshots:
he: 1.2.0
param-case: 3.0.4
relateurl: 0.2.7
terser: 5.43.1
terser: 5.42.0
html-url-attributes@3.0.1: {}
@@ -13045,12 +13081,12 @@ snapshots:
jest-worker: 27.5.1
schema-utils: 4.3.2
serialize-javascript: 6.0.2
terser: 5.43.1
terser: 5.42.0
webpack: 5.99.9(esbuild@0.25.5)
optionalDependencies:
esbuild: 0.25.5
terser@5.43.1:
terser@5.42.0:
dependencies:
'@jridgewell/source-map': 0.3.6
acorn: 8.15.0

9
autogpt_platform/frontend/src/app/layout.tsx
View File

@@ -8,6 +8,7 @@ import { Toaster } from "@/components/ui/toaster";
import { Providers } from "@/app/providers";
import TallyPopupSimple from "@/components/TallyPopup";
import { GoogleAnalytics } from "@/components/analytics/google-analytics";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
export const metadata: Metadata = {
title: "AutoGPT Platform",
@@ -41,6 +42,14 @@ export default async function RootLayout({
<div className="flex min-h-screen flex-col items-stretch justify-items-stretch">
{children}
<TallyPopupSimple />
{/* React Query DevTools is only available in development */}
{process.env.NEXT_PUBLIC_REACT_QUERY_DEVTOOL && (
<ReactQueryDevtools
initialIsOpen={false}
buttonPosition={"bottom-left"}
/>
)}
</div>
<Toaster />
</Providers>