From 29bcb51364939f93672ca54cdf5fa6bfce552cc1 Mon Sep 17 00:00:00 2001 From: moonrailgun Date: Thu, 22 Dec 2022 21:42:02 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E7=A7=BB=E5=8A=A8react=20query=20d?= =?UTF-8?q?evtools=E5=88=B0web?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/shared/cache/Provider.tsx | 10 -------- client/shared/package.json | 1 - client/web/package.json | 1 + .../routes/Main/Navbar/ReactQueryDevBtn.tsx | 24 +++++++++++++++++++ client/web/src/routes/Main/Navbar/index.tsx | 4 ++++ pnpm-lock.yaml | 15 ++++++------ 6 files changed, 36 insertions(+), 19 deletions(-) create mode 100644 client/web/src/routes/Main/Navbar/ReactQueryDevBtn.tsx diff --git a/client/shared/cache/Provider.tsx b/client/shared/cache/Provider.tsx index 3c11ec26..ecb8093a 100644 --- a/client/shared/cache/Provider.tsx +++ b/client/shared/cache/Provider.tsx @@ -1,7 +1,5 @@ import React, { PropsWithChildren } from 'react'; import { QueryClientProvider } from '@tanstack/react-query'; -import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; -import { isDevelopment } from '../utils/environment'; import { queryClient } from './'; /** @@ -12,14 +10,6 @@ export const CacheProvider: React.FC = React.memo( return ( {props.children} - - {/* TODO: 待放到web上 */} - {isDevelopment && ( - - )} ); } diff --git a/client/shared/package.json b/client/shared/package.json index 6fa5a745..86ac6109 100644 --- a/client/shared/package.json +++ b/client/shared/package.json @@ -9,7 +9,6 @@ "dependencies": { "@reduxjs/toolkit": "^1.7.1", "@tanstack/react-query": "^4.3.4", - "@tanstack/react-query-devtools": "^4.3.5", "axios": "^0.21.1", "crc": "^3.8.0", "dayjs": "^1.10.6", diff --git a/client/web/package.json b/client/web/package.json index c8fd4a36..cfb79c58 100644 --- a/client/web/package.json +++ b/client/web/package.json @@ -26,6 +26,7 @@ }, "dependencies": { "@loadable/component": "^5.15.2", + "@tanstack/react-query-devtools": "^4.3.5", "@use-gesture/react": "^10.2.23", "ahooks": "^3.7.2", "antd": "^4.24.5", diff --git a/client/web/src/routes/Main/Navbar/ReactQueryDevBtn.tsx b/client/web/src/routes/Main/Navbar/ReactQueryDevBtn.tsx new file mode 100644 index 00000000..e332b55d --- /dev/null +++ b/client/web/src/routes/Main/Navbar/ReactQueryDevBtn.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; +import { isDevelopment } from 'tailchat-shared'; + +/** + * React Query 的调试面板 + */ +export const ReactQueryDevBtn: React.FC = React.memo(() => { + if (!isDevelopment) { + return; + } + + return ( + + ); +}); +ReactQueryDevBtn.displayName = 'ReactQueryDevBtn'; diff --git a/client/web/src/routes/Main/Navbar/index.tsx b/client/web/src/routes/Main/Navbar/index.tsx index 1b03956a..15c154db 100644 --- a/client/web/src/routes/Main/Navbar/index.tsx +++ b/client/web/src/routes/Main/Navbar/index.tsx @@ -7,6 +7,7 @@ import { PersonalNav } from './PersonalNav'; import { DevContainer } from '@/components/DevContainer'; import { InboxNav } from './InboxNav'; import { InstallBtn } from './InstallBtn'; +import { ReactQueryDevBtn } from './ReactQueryDevBtn'; /** * 导航栏组件 @@ -40,6 +41,9 @@ export const Navbar: React.FC = React.memo(() => { data-tc-role="navbar-settings" className="flex flex-col items-center space-y-2" > + {/* React Query 的调试面板 */} + + {/* 应用(PWA)安装按钮 */} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9659a311..6e22dbd7 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -268,7 +268,6 @@ importers: specifiers: '@reduxjs/toolkit': ^1.7.1 '@tanstack/react-query': ^4.3.4 - '@tanstack/react-query-devtools': ^4.3.5 '@types/crc': ^3.4.0 '@types/lodash': ^4.14.170 '@types/react': 18.0.20 @@ -293,7 +292,6 @@ importers: dependencies: '@reduxjs/toolkit': 1.8.5_kkwg4cbsojnjnupd3btipussee '@tanstack/react-query': 4.3.4_react@18.2.0 - '@tanstack/react-query-devtools': 4.3.5_jkekd4jqbd6zkiapxsceyqr7ty axios: 0.21.4 crc: 3.8.0 dayjs: 1.11.5 @@ -321,6 +319,7 @@ importers: specifiers: '@loadable/component': ^5.15.2 '@perfsee/webpack': 1.0.0-alpha.4 + '@tanstack/react-query-devtools': ^4.3.5 '@testing-library/jest-dom': ^5.16.5 '@testing-library/react': ^13.4.0 '@testing-library/react-hooks': ^8.0.1 @@ -437,6 +436,7 @@ importers: zustand: ^4.1.5 dependencies: '@loadable/component': 5.15.2_react@18.2.0 + '@tanstack/react-query-devtools': 4.3.5_biqbaboplfbrettd7655fr4n2y '@use-gesture/react': 10.2.23_react@18.2.0 ahooks: 3.7.2_react@18.2.0 antd: 4.24.5_biqbaboplfbrettd7655fr4n2y @@ -1548,7 +1548,6 @@ packages: '@babel/helper-validator-option': 7.18.6 browserslist: 4.21.3 semver: 6.3.0 - dev: true /@babel/helper-compilation-targets/7.18.9_@babel+core@7.20.5: resolution: {integrity: sha512-tzLCyVmqUiFlcFoAPLA/gL9TeYrF61VLNtb+hvkuVaB5SUjW7jcfrglBIX1vUIoT7CLP3bBlIMeyEsIl2eFQNg==} @@ -10356,7 +10355,7 @@ packages: resolution: {integrity: sha512-NLAe3j5Vk1yYEtoPP5fPGPjRzkZPx67KUM3f14L3InziJZJ0wVecCh7uKfgYkbRKJSeq6PlbND7iuCGdTplN6Q==} dev: false - /@tanstack/react-query-devtools/4.3.5_jkekd4jqbd6zkiapxsceyqr7ty: + /@tanstack/react-query-devtools/4.3.5_biqbaboplfbrettd7655fr4n2y: resolution: {integrity: sha512-Jb3HywQmvQDmyixNOzjv8xjksngguG9WjmJlBWjSBCcUFIm3GQGpeJYm62EnJmJ+lHMgDNWDr61UV7Fya8TVTA==} peerDependencies: '@tanstack/react-query': 4.3.4 @@ -10364,8 +10363,8 @@ packages: react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 dependencies: '@tanstack/match-sorter-utils': 8.1.1 - '@tanstack/react-query': 4.3.4_react@18.2.0 react: 18.2.0 + react-dom: 18.2.0_react@18.2.0 use-sync-external-store: 1.2.0_react@18.2.0 dev: false @@ -13425,7 +13424,7 @@ packages: babel-plugin-syntax-jsx: 6.18.0 lodash: 4.17.21 picomatch: 2.3.1 - styled-components: 5.3.6_react@18.2.0 + styled-components: 5.3.6_7i5myeigehqah43i5u7wbekgba /babel-plugin-syntax-jsx/6.18.0: resolution: {integrity: sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw==} @@ -22080,7 +22079,7 @@ packages: pretty-format: 27.5.1 slash: 3.0.0 strip-json-comments: 3.1.1 - ts-node: 10.9.1_k2dsl7zculo2nmh5s33pladmoa + ts-node: 10.9.1_nzafxra4mdyuer2ejmql6rdadq transitivePeerDependencies: - bufferutil - canvas @@ -32549,7 +32548,6 @@ packages: react-is: 18.2.0 shallowequal: 1.1.0 supports-color: 5.5.0 - dev: false /styled-components/5.3.6_mdz3marskokvq6744hhidi3r5a: resolution: {integrity: sha512-hGTZquGAaTqhGWldX7hhfzjnIYBZ0IXQXkCYdvF1Sq3DsUaLx6+NTHC5Jj1ooM2F68sBiVz3lvhfwQs/S3l6qg==} @@ -32595,6 +32593,7 @@ packages: react: 18.2.0 shallowequal: 1.1.0 supports-color: 5.5.0 + dev: true /styled-system/5.1.5: resolution: {integrity: sha512-7VoD0o2R3RKzOzPK0jYrVnS8iJdfkKsQJNiLRDjikOpQVqQHns/DXWaPZOH4tIKkhAT7I6wIsy9FWTWh2X3q+A==}