fix(deps): replace dependency react-query with @tanstack/react-query 4.0.5

package.json

@@ -28,7 +28,7 @@
     "react-dom": "17.0.2",
     "react-i18next": "11.18.6",
     "react-outside-click-handler": "^1.3.0",
-    "react-query": "3.39.3",
+    "@tanstack/react-query": "4.0.5",
     "react-resize-detector": "7.1.2",
     "react-router": "5.3.4",
     "react-router-dom": "5.3.4",

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 { DefaultTheme, 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,5 +1,5 @@
 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,5 +1,5 @@
 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,6 +1,6 @@
 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 type { DASAccount, DASAccountMap } from '../../services/ExplorerService/fetcher'
 import { unique } from '../../utils/array'

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'
@@ -58,15 +58,15 @@ export const Address = () => {
         />
 
         <QueryResult query={addressInfoQuery} delayLoading>
-          {data => <AddressOverview address={data} />}
+          {data => (data ? <AddressOverview address={data} /> : <div />)}
         </QueryResult>
 
         <QueryResult query={addressTransactionsQuery} delayLoading>
           {data => (
             <AddressTransactions
               address={address}
-              transactions={data.transactions}
-              transactionsTotal={data.total}
+              transactions={data?.transactions ?? []}
+              transactionsTotal={data?.total ?? 0}
               timeOrderBy={sortBy === 'time' ? orderBy : 'desc'}
             />
           )}

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'
@@ -66,8 +66,8 @@ export default () => {
               onPageChange={setPage}
               currentPage={currentPage}
               pageSize={pageSize}
-              total={data.total}
-              transactions={data.transactions}
+              total={data?.total ?? 0}
+              transactions={data?.transactions ?? []}
             />
           )}
         </QueryResult>

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,
@@ -197,7 +197,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'
@@ -90,16 +90,16 @@ export const NervosDao = () => {
               <DaoTransactions
                 currentPage={currentPage}
                 pageSize={pageSize}
-                transactions={data.transactions}
-                total={data.total}
+                transactions={data?.transactions ?? []}
+                total={data?.total ?? 0}
                 onPageChange={setPage}
-                filterNoResult={!!params.filter && data.total === 0}
+                filterNoResult={!!params.filter && data?.total === 0}
               />
             )}
           </QueryResult>
         ) : (
           <QueryResult query={queryNervosDaoDepositors} delayLoading>
-            {data => <DepositorRank depositors={data} filter={params.filter} />}
+            {data => <DepositorRank depositors={data ?? []} filter={params.filter} />}
           </QueryResult>
         )}
       </DaoContentPanel>

src/pages/NftCollectionInfo/index.tsx

@@ -1,5 +1,5 @@
 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,5 +1,5 @@
 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 { ListOnDesktop, ListOnMobile, isTxFilterType } from './List'

src/pages/NftInfo/index.tsx

@@ -1,5 +1,5 @@
 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 camelcase from 'camelcase'
 import { useParams } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
@@ -49,7 +49,7 @@ export const ScriptTransactions = ({ page, size }: { page: number; size: number
       <QueryResult query={transactionsQuery} delayLoading>
         {data => (
           <div className={styles.scriptTransactionsPanel}>
-            {data.ckbTransactions &&
+            {data?.ckbTransactions &&
               data.ckbTransactions.map(tr => (
                 <TransactionItem
                   address=""
@@ -143,7 +143,7 @@ export const ScriptCells = ({
                 </tr>
               </thead>
               <tbody>
-                {data.cells.map(record => {
+                {data?.cells.map(record => {
                   return (
                     <tr key={`${record.txHash}_${record.cellIndex}`}>
                       <td align="left">

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 { useTranslation } from 'react-i18next'
 import Content from '../../components/Content'
 import OverviewCard, { OverviewItemData } from '../../components/Card/OverviewCard'

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'
@@ -170,8 +170,8 @@ export const SimpleUDT = () => {
             <SimpleUDTComp
               currentPage={currentPage}
               pageSize={pageSize}
-              transactions={data.transactions}
-              total={data.total}
+              transactions={data?.transactions ?? []}
+              total={data?.total ?? 0}
               onPageChange={setPage}
               filterNoResult={filterNoResult}
               id={typeHash}

src/pages/Tokens/index.tsx

@@ -1,6 +1,6 @@
 import { Tooltip } from 'antd'
 import { Link } 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'
@@ -154,7 +154,7 @@ export default () => {
         >
           {data => (
             <TokensTableContent>
-              {data.tokens.map((token, index) => (
+              {data?.tokens.map((token, index) => (
                 <TokenItem key={token.typeHash} token={token} isLast={index === data.tokens.length - 1} />
               ))}
             </TokensTableContent>

src/pages/Transaction/TransactionCellScript/index.tsx

@@ -2,7 +2,7 @@
 import { useState, ReactNode, useRef } from 'react'
 import BigNumber from 'bignumber.js'
 import { useTranslation } from 'react-i18next'
-import { useQuery } from 'react-query'
+import { useQuery } from '@tanstack/react-query'
 import { explorerService } from '../../../services/ExplorerService'
 import { hexToUtf8 } from '../../../utils/string'
 import {

src/pages/Transaction/TransactionComp/TransactionLite/TransactionLite.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/no-array-index-key */
 import { FC } from 'react'
-import { useQuery } from 'react-query'
+import { useQuery } from '@tanstack/react-query'
 import { useParams } from 'react-router-dom'
 import BigNumber from 'bignumber.js'
 import { useTranslation } from 'react-i18next'

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'
@@ -42,11 +42,11 @@ export default () => {
         </TransactionHashCard>
         {layout === Professional ? (
           <QueryResult query={query} delayLoading>
-            {transaction => <TransactionComp transaction={transaction} />}
+            {transaction => (transaction ? <TransactionComp transaction={transaction} /> : <div />)}
           </QueryResult>
         ) : (
           <QueryResult query={query} delayLoading>
-            {transaction => <TransactionCompLite isCellbase={transaction.isCellbase} />}
+            {transaction => <TransactionCompLite isCellbase={transaction?.isCellbase ?? false} />}
           </QueryResult>
         )}
       </TransactionPanel>

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'
@@ -237,7 +237,11 @@ 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: Transaction[]; total: number },
+    unknown,
+    { transactions: Transaction[]; total: number }
+  >(
     [`${type}-transactions`, type, currentPage, pageSize, sortBy, orderBy] as const,
     async ({ queryKey }) => {
       const [, type] = queryKey
@@ -261,7 +265,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'