fix: debug-ui: use tanstack/react-query instead of react-query

Fixes: near#10914

I'm not sure if that's the proper solution, would appreciate
a review from someone familiar with the javascript ecosystem.

I found this solution on stackoverflow:
https://stackoverflow.com/questions/73207151/could-not-find-a-declaration-file-for-module-react-query

 #Pleas enter the commit message for your changes. Lines starting

tools/debug-ui/package.json

@@ -9,7 +9,7 @@
     "@types/react-dom": "^18.2.18",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-query": "^4.0.0",
+    "@tanstack/react-query": "^4.0.0",
     "react-router-dom": "^6.21.1",
     "react-scripts": "^5.0.1",
     "react-tooltip": "^5.22.0",

tools/debug-ui/src/BlocksView.tsx

@@ -1,5 +1,5 @@
 import './BlocksView.scss';
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { fetchChainProcessingStatus, BlockProcessingStatus, ChunkProcessingStatus } from './api';
 
 type BlocksViewProps = {

tools/debug-ui/src/ChainInfoSummaryView.tsx

@@ -1,6 +1,6 @@
 import './ChainInfoSummaryView.scss';
 import { useMemo } from 'react';
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { fetchChainProcessingStatus, fetchFullStatus } from './api';
 
 type ChainInfoSummaryViewProps = {

tools/debug-ui/src/ClusterNodeView.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import {
     SyncStatusResponse,
     TrackedShardsResponse,

tools/debug-ui/src/ConnectionStorageView.tsx

@@ -1,4 +1,4 @@
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { toHumanTime } from './utils';
 import { fetchRecentOutboundConnections } from './api';
 import './ConnectionStorageView.scss';

tools/debug-ui/src/CurrentPeersView.tsx

@@ -1,5 +1,5 @@
 import { MouseEvent, useCallback, useMemo, useState } from 'react';
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { PeerInfoView, fetchEpochInfo, fetchFullStatus } from './api';
 import { addDebugPortLink, formatDurationInMillis, formatTraffic } from './utils';
 import './CurrentPeersView.scss';

tools/debug-ui/src/EpochShardsView.tsx

@@ -1,4 +1,4 @@
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { fetchEpochInfo } from './api';
 import './EpochShardsView.scss';
 

tools/debug-ui/src/EpochValidatorsView.tsx

@@ -1,5 +1,5 @@
 import { useId } from 'react';
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { Tooltip } from 'react-tooltip';
 import { ValidatorKickoutReason, fetchEpochInfo } from './api';
 import './EpochValidatorsView.scss';

tools/debug-ui/src/FloatingChunksView.tsx

@@ -1,5 +1,5 @@
 import './FloatingChunksView.scss';
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { fetchChainProcessingStatus } from './api';
 
 type FloatingChunksViewProps = {

tools/debug-ui/src/HeaderBar.tsx

@@ -1,4 +1,4 @@
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { fetchBasicStatus } from './api';
 import './HeaderBar.scss';
 

tools/debug-ui/src/LatestBlocksView.tsx

@@ -1,5 +1,5 @@
 import { Fragment, ReactElement, useCallback, useMemo, useState } from 'react';
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import Xarrow, { Xwrapper, useXarrow } from 'react-xarrows';
 import { DebugBlockStatus, MissedHeightInfo, fetchBlockStatus, fetchFullStatus } from './api';
 import './LatestBlocksView.scss';

tools/debug-ui/src/PeerStorageView.tsx

@@ -1,4 +1,4 @@
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { toHumanTime } from './utils';
 import { fetchPeerStore } from './api';
 import './PeerStorageView.scss';

tools/debug-ui/src/RecentEpochsView.tsx

@@ -1,4 +1,4 @@
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { fetchEpochInfo, fetchFullStatus } from './api';
 import { formatDurationInMillis } from './utils';
 import './RecentEpochsView.scss';

tools/debug-ui/src/RoutingTableView.tsx

@@ -1,4 +1,4 @@
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { toHumanTime, formatDurationInMillis } from './utils';
 import { fetchRoutingTable } from './api';
 import './RoutingTableView.scss';

tools/debug-ui/src/SnapshotHostsView.tsx

@@ -1,4 +1,4 @@
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { toHumanTime } from './utils';
 import { fetchSnapshotHosts } from './api';
 import './SnapshotHostsView.scss';

tools/debug-ui/src/Tier1View.tsx

@@ -1,5 +1,5 @@
 import { MouseEvent, useCallback, useState } from 'react';
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { PeerAddr, fetchFullStatus } from './api';
 import { addDebugPortLink, formatDurationInMillis, formatTraffic } from './utils';
 import './Tier1View.scss';

tools/debug-ui/src/index.tsx

@@ -4,7 +4,7 @@ import './index.css';
 import 'react-tooltip/dist/react-tooltip.css';
 import '@patternfly/react-core/dist/styles/base.css';
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
-import { QueryClient, QueryClientProvider } from 'react-query';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { App } from './App';
 import { LogVisualizer } from './log_visualizer/LogVisualizer';
 import { LandingPage } from './LandingPage';