refactor: use @tanstack/react-query instead of react-query

src/App.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from 'react'
-import { QueryClient, QueryClientProvider } from 'react-query'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { ThemeProvider } from 'styled-components'
 import Routers from './routes'
 import Toast from './components/Toast'

src/components/Header/BlockchainComp/index.tsx

@@ -1,5 +1,5 @@
 import { useState, useLayoutEffect, FC, memo } from 'react'
-import { useQuery } from 'react-query'
+import { useQuery } from '@tanstack/react-query'
 import { isMainnet } from '../../../utils/chain'
 import WhiteDropdownIcon from '../../../assets/white_dropdown.png'
 import BlueDropUpIcon from '../../../assets/blue_drop_up.png'

src/components/NftCollectionInventory/index.tsx

@@ -1,6 +1,6 @@
 import type { AxiosResponse } from 'axios'
 import { Link } from 'react-router-dom'
-import { useQuery } from 'react-query'
+import { useQuery } from '@tanstack/react-query'
 import { Base64 } from 'js-base64'
 import { hexToBytes } from '@nervosnetwork/ckb-sdk-utils'
 import { useTranslation } from 'react-i18next'

src/components/NftCollectionOverview/index.tsx

@@ -1,6 +1,6 @@
 import type { AxiosResponse } from 'axios'
 import { Link } from 'react-router-dom'
-import { useQuery } from 'react-query'
+import { useQuery } from '@tanstack/react-query'
 import { Tooltip } from 'antd'
 import { useTranslation } from 'react-i18next'
 import { explorerService } from '../../services/ExplorerService'

src/components/NftCollectionTransfers/index.tsx

@@ -1,7 +1,7 @@
 import type { AxiosResponse } from 'axios'
 import { FC, useMemo, useState } from 'react'
 import { Link } from 'react-router-dom'
-import { useQuery } from 'react-query'
+import { useQuery } from '@tanstack/react-query'
 import { Tooltip } from 'antd'
 import { Base64 } from 'js-base64'
 import { hexToBytes } from '@nervosnetwork/ckb-sdk-utils'

src/components/QueryResult/index.tsx

@@ -1,5 +1,5 @@
 import { ReactElement } from 'react'
-import { UseQueryResult } from 'react-query'
+import { DefinedUseQueryResult } from '@tanstack/react-query'
 import { LOADING_WAITING_TIME } from '../../constants/common'
 import Error from '../Error'
 import Loading from '../Loading'
@@ -12,7 +12,7 @@ export function QueryResult<TData, TError>({
   errorRender,
   loadingRender,
 }: {
-  query: UseQueryResult<TData, TError>
+  query: DefinedUseQueryResult<TData, TError>
   children: (data: TData) => ReactElement
   delayLoading?: boolean
   errorRender?: (err: TError) => ReactElement
@@ -22,10 +22,9 @@ export function QueryResult<TData, TError>({
 
   switch (query.status) {
     case 'error':
-      return errorRender ? errorRender(query.error) : <Error />
+      return errorRender && query.error ? errorRender(query.error) : <Error />
     case 'success':
       return children(query.data)
-    case 'idle':
     case 'loading':
     default:
       return loadingRender ? (

src/contexts/providers/dasQuery.tsx

@@ -1,5 +1,5 @@
 import { createContext, FC, useCallback, useContext, useMemo, useRef } from 'react'
-import { useQuery } from 'react-query'
+import { useQuery } from '@tanstack/react-query'
 import { explorerService } from '../../services/ExplorerService'
 import { unique } from '../../utils/array'
 import { throttle } from '../../utils/function'

src/pages/Address/AddressComp.tsx

@@ -1,6 +1,6 @@
 import axios, { AxiosResponse } from 'axios'
 import { useState, useEffect, FC } from 'react'
-import { useQuery } from 'react-query'
+import { useQuery } from '@tanstack/react-query'
 import { Radio } from 'antd'
 import { Base64 } from 'js-base64'
 import { hexToBytes } from '@nervosnetwork/ckb-sdk-utils'

src/pages/Address/index.tsx

@@ -1,5 +1,5 @@
 import { useParams } from 'react-router-dom'
-import { useQuery } from 'react-query'
+import { useQuery } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
 import AddressHashCard from '../../components/Card/HashCard'
 import Content from '../../components/Content'

src/pages/BlockDetail/index.tsx

@@ -1,5 +1,5 @@
 import { useParams, useLocation } from 'react-router-dom'
-import { useQuery } from 'react-query'
+import { useQuery } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
 import BlockHashCard from '../../components/Card/HashCard'
 import Content from '../../components/Content'

src/pages/BlockList/index.tsx

@@ -1,7 +1,7 @@
 import { Fragment, useMemo, FC } from 'react'
 import { Link, useLocation } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
-import { useQuery } from 'react-query'
+import { useQuery } from '@tanstack/react-query'
 import { parseSimpleDate } from '../../utils/date'
 import { BlockListPanel, ContentTable, HighLightValue, BlockRewardContainer, BlockRewardPanel } from './styled'
 import Content from '../../components/Content'

src/pages/FeeRateTracker/index.tsx

@@ -1,5 +1,5 @@
 import { useRef, useState } from 'react'
-import { useQuery } from 'react-query'
+import { useQuery } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
 import styles from './styles.module.scss'
 import Content from '../../components/Content'

src/pages/Home/index.tsx

@@ -1,7 +1,7 @@
 import { FC, memo, useMemo, useRef } from 'react'
 import { useHistory } from 'react-router'
 import { useTranslation } from 'react-i18next'
-import { useQuery } from 'react-query'
+import { useQuery } from '@tanstack/react-query'
 import { useResizeDetector } from 'react-resize-detector'
 import {
   HomeHeaderItemPanel,
@@ -194,7 +194,7 @@ export default () => {
   const tipBlockNumber = useLatestBlockNumber()
 
   const blocksQuery = useQuery(
-    'latest_blocks',
+    ['latest_blocks'],
     async () => {
       // Using the size of list pages to request will be more friendly to the data reuse of the list pages.
       const { data, meta } = await explorerService.api.fetchLatestBlocks(ListPageParams.PageSize)

src/pages/NervosDao/index.tsx

@@ -1,6 +1,6 @@
 import { useHistory } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
-import { useQuery } from 'react-query'
+import { useQuery } from '@tanstack/react-query'
 import Content from '../../components/Content'
 import { DaoContentPanel, DaoTabBarPanel } from './styled'
 import DaoTransactions from './DaoTransactions'

src/pages/NftCollectionInfo/index.tsx

@@ -1,6 +1,6 @@
 import type { AxiosResponse } from 'axios'
 import { Link, useParams, useHistory } from 'react-router-dom'
-import { useQuery } from 'react-query'
+import { useQuery } from '@tanstack/react-query'
 import { Popover } from 'antd'
 import { TFunction, useTranslation } from 'react-i18next'
 import Content from '../../components/Content'

src/pages/NftCollections/index.tsx

@@ -1,6 +1,6 @@
 import type { AxiosResponse } from 'axios'
 import { useHistory, useLocation } from 'react-router-dom'
-import { useQuery } from 'react-query'
+import { useQuery } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
 import Content from '../../components/Content'
 import { NFTCollection, ListOnDesktop, ListOnMobile, isTxFilterType } from './List'

src/pages/NftInfo/index.tsx

@@ -1,6 +1,6 @@
 import type { AxiosResponse } from 'axios'
 import { Link, useParams, useHistory } from 'react-router-dom'
-import { useQuery } from 'react-query'
+import { useQuery } from '@tanstack/react-query'
 import { Tooltip } from 'antd'
 import { Base64 } from 'js-base64'
 import { hexToBytes } from '@nervosnetwork/ckb-sdk-utils'

src/pages/Script/ScriptsComp.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { useHistory } from 'react-router'
-import { useQuery } from 'react-query'
+import { useQuery } from '@tanstack/react-query'
 import { AxiosResponse } from 'axios'
 import camelcase from 'camelcase'
 import { useParams } from 'react-router-dom'

src/pages/Script/index.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react'
 import { useHistory } from 'react-router'
 import { useParams } from 'react-router-dom'
 import { Tabs } from 'antd'
-import { useQuery } from 'react-query'
+import { useQuery } from '@tanstack/react-query'
 import { AxiosResponse } from 'axios'
 import { useTranslation } from 'react-i18next'
 import Content from '../../components/Content'

src/pages/SimpleUDT/index.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import { Link, useHistory, useLocation, useParams } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
-import { useQuery } from 'react-query'
+import { useQuery } from '@tanstack/react-query'
 import { Popover } from 'antd'
 import SimpleUDTHashCard from '../../components/Card/HashCard'
 import Content from '../../components/Content'

src/pages/Tokens/index.tsx

@@ -1,6 +1,6 @@
 import { Tooltip } from 'antd'
 import { Link, useHistory } from 'react-router-dom'
-import { useQuery } from 'react-query'
+import { useQuery } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
 import Content from '../../components/Content'
 import Pagination from '../../components/Pagination'

src/pages/Transaction/index.tsx

@@ -1,5 +1,5 @@
 import { useParams } from 'react-router-dom'
-import { useQuery } from 'react-query'
+import { useQuery } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
 import TransactionHashCard from '../../components/Card/HashCard'
 import Content from '../../components/Content'

src/pages/TransactionList/index.tsx

@@ -1,7 +1,7 @@
 import { FC, ReactNode } from 'react'
 import { Link, useLocation } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
-import { useQuery } from 'react-query'
+import { useQuery } from '@tanstack/react-query'
 import { parseSimpleDate } from '../../utils/date'
 import Content from '../../components/Content'
 import { shannonToCkb } from '../../utils/util'
@@ -236,7 +236,7 @@ const TransactionsPanel: FC<{ type: TxStatus }> = ({ type }) => {
     type === 'confirmed' ? s === 'height' || s === 'capacity' : s === 'capacity' || s === 'time' || s === 'fee',
   )
 
-  const query = useQuery(
+  const query = useQuery<{ transactions: Array<State.Transaction>; total: number }>(
     [`${type}-transactions`, type, currentPage, pageSize, sortBy, orderBy] as const,
     async ({ queryKey }) => {
       const [, type] = queryKey
@@ -262,7 +262,7 @@ const TransactionsPanel: FC<{ type: TxStatus }> = ({ type }) => {
       initialData:
         state?.type === 'TransactionListPage' && state.createTime + stateStaleTime > Date.now()
           ? state.transactionsDataWithFirstPage
-          : undefined,
+          : { total: 0, transactions: [] },
     },
   )
 

src/utils/hook.ts

@@ -8,7 +8,7 @@ import {
   systemScripts,
 } from '@nervosnetwork/ckb-sdk-utils'
 import { useHistory, useLocation } from 'react-router-dom'
-import { useQuery } from 'react-query'
+import { useQuery } from '@tanstack/react-query'
 import { useResizeDetector } from 'react-resize-detector'
 import { interval, share } from 'rxjs'
 import { AppCachedKeys } from '../constants/cache'