From 475caa3730dac9a626231037c3eebb408768975f Mon Sep 17 00:00:00 2001 From: Mgrdich <46796009+Mgrdich@users.noreply.github.com> Date: Mon, 15 Apr 2024 19:06:17 +0400 Subject: [PATCH] FE: Chore: Add React Query Devtool (#297) --- frontend/package.json | 3 ++- frontend/pnpm-lock.yaml | 48 +++++++++++++++++++++++++++++++++ frontend/src/components/App.tsx | 2 ++ 3 files changed, 52 insertions(+), 1 deletion(-) diff --git a/frontend/package.json b/frontend/package.json index 261894014..61cb4e7be 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -34,7 +34,8 @@ "styled-components": "^5.3.1", "use-debounce": "^9.0.3", "yup": "^1.0.0", - "zustand": "^4.1.1" + "zustand": "^4.1.1", + "@tanstack/react-query-devtools": "4.36.1" }, "scripts": { "start": "vite", diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml index 399a902cd..3bd4445b1 100644 --- a/frontend/pnpm-lock.yaml +++ b/frontend/pnpm-lock.yaml @@ -34,6 +34,9 @@ dependencies: '@tanstack/react-query': specifier: ^4.0.5 version: 4.0.5(react-dom@18.1.0)(react@18.2.0) + '@tanstack/react-query-devtools': + specifier: 4.36.1 + version: 4.36.1(@tanstack/react-query@4.0.5)(react-dom@18.1.0)(react@18.2.0) '@tanstack/react-table': specifier: ^8.5.10 version: 8.5.10(react-dom@18.1.0)(react@18.2.0) @@ -1638,10 +1641,32 @@ packages: react-transition-state: 1.1.5(react-dom@18.1.0)(react@18.2.0) dev: false + /@tanstack/match-sorter-utils@8.15.1: + resolution: {integrity: sha512-PnVV3d2poenUM31ZbZi/yXkBu3J7kd5k2u51CGwwNojag451AjTH9N6n41yjXz2fpLeewleyLBmNS6+HcGDlXw==} + engines: {node: '>=12'} + dependencies: + remove-accents: 0.5.0 + dev: false + /@tanstack/query-core@4.0.5: resolution: {integrity: sha512-QOJ2gLbwlf8p0487pMey6vv8EF5X2ib1zINayaD7mb9/LibUtXmZ12uJgTqcnjgNY/4tWZn5qJnEk2ePG5AVGA==} dev: false + /@tanstack/react-query-devtools@4.36.1(@tanstack/react-query@4.0.5)(react-dom@18.1.0)(react@18.2.0): + resolution: {integrity: sha512-WYku83CKP3OevnYSG8Y/QO9g0rT75v1om5IvcWUwiUZJ4LanYGLVCZ8TdFG5jfsq4Ej/lu2wwDAULEUnRIMBSw==} + peerDependencies: + '@tanstack/react-query': ^4.36.1 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + dependencies: + '@tanstack/match-sorter-utils': 8.15.1 + '@tanstack/react-query': 4.0.5(react-dom@18.1.0)(react@18.2.0) + react: 18.2.0 + react-dom: 18.1.0(react@18.2.0) + superjson: 1.13.3 + use-sync-external-store: 1.2.0(react@18.2.0) + dev: false + /@tanstack/react-query@4.0.5(react-dom@18.1.0)(react@18.2.0): resolution: {integrity: sha512-tIggVlhoFevVpY/LkZroPmrERFHN8tw4aZLtgwSArzHmMJ03WQcaNvbbHy6GERidXtaMdUz+IeQryrE7cO7WPQ==} peerDependencies: @@ -2868,6 +2893,13 @@ packages: resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==} dev: true + /copy-anything@3.0.5: + resolution: {integrity: sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==} + engines: {node: '>=12.13'} + dependencies: + is-what: 4.1.16 + dev: false + /core-js@3.14.0: resolution: {integrity: sha512-3s+ed8er9ahK+zJpp9ZtuVcDoFzHNiZsPbNAAE4KXgrRHbjSqqNN6xGSXq6bq7TZIbKj4NLrLb6bJ5i+vSVjHA==} deprecated: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js. @@ -4425,6 +4457,11 @@ packages: get-intrinsic: 1.2.1 dev: true + /is-what@4.1.16: + resolution: {integrity: sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==} + engines: {node: '>=12.13'} + dev: false + /isarray@2.0.5: resolution: {integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==} dev: true @@ -6062,6 +6099,10 @@ packages: engines: {node: '>=8'} dev: true + /remove-accents@0.5.0: + resolution: {integrity: sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A==} + dev: false + /require-directory@2.1.1: resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==} engines: {node: '>=0.10.0'} @@ -6457,6 +6498,13 @@ packages: shallowequal: 1.1.0 supports-color: 5.5.0 + /superjson@1.13.3: + resolution: {integrity: sha512-mJiVjfd2vokfDxsQPOwJ/PtanO87LhpYY88ubI5dUB1Ab58Txbyje3+jpm+/83R/fevaq/107NNhtYBLuoTrFg==} + engines: {node: '>=10'} + dependencies: + copy-anything: 3.0.5 + dev: false + /supports-color@5.5.0: resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==} engines: {node: '>=4'} diff --git a/frontend/src/components/App.tsx b/frontend/src/components/App.tsx index 07804f792..a2e1b1c72 100644 --- a/frontend/src/components/App.tsx +++ b/frontend/src/components/App.tsx @@ -16,6 +16,7 @@ import { Toaster } from 'react-hot-toast'; import GlobalCSS from 'components/globalCss'; import * as S from 'components/App.styled'; import { ThemeModeContext } from 'components/contexts/ThemeModeContext'; +import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; import ConfirmationModal from './common/ConfirmationModal/ConfirmationModal'; import { ConfirmContextProvider } from './contexts/ConfirmContext'; @@ -96,6 +97,7 @@ const App: React.FC = () => { + ); };