Refactored chart cache from localstroage-based to http-based (#135)

* refactor: remove the local caching mechanism for the chart * refactor: remove the unnecessary hook useChartQueryWithCache * refactor: use a safer key for the chart query
Magickbase · Nov 10, 2023 · 8cf08ed · 8cf08ed · vercel · Nov 10, 2023
1 parent 01495d0
commit 8cf08ed
Show file tree

Hide file tree

Showing 28 changed files with 45 additions and 120 deletions.
diff --git a/src/pages/Home/AverageBlockTimeChart/index.tsx b/src/pages/Home/AverageBlockTimeChart/index.tsx
@@ -3,15 +3,15 @@ import 'echarts/lib/chart/line'
 import 'echarts/lib/component/title'
 import echarts from 'echarts/lib/echarts'
 import { useTranslation } from 'react-i18next'
+import { useQuery } from '@tanstack/react-query'
 import { parseDateNoTime } from '../../../utils/date'
 import { localeNumberString } from '../../../utils/number'
 import SmallLoading from '../../../components/Loading/SmallLoading'
 import { HomeChartLink, ChartLoadingPanel } from './styled'
 import ChartNoDataImage from '../../../assets/chart_no_data_white.png'
-import { useChartQueryWithCache, useIsLGScreen } from '../../../utils/hook'
+import { useIsLGScreen } from '../../../utils/hook'
 import { ChartItem, explorerService } from '../../../services/ExplorerService'
 import { ReactChartCore } from '../../StatisticsChart/common'
-import { AverageBlockTimeCacheKey } from '../../StatisticsChart/block/AverageBlockTime'
 
 const useOption = () => {
   const { t } = useTranslation()
@@ -109,10 +109,12 @@ export default memo(() => {
   const isLG = useIsLGScreen()
   const parseOption = useOption()
 
-  const query = useChartQueryWithCache(
-    explorerService.api.fetchStatisticAverageBlockTimes,
-    AverageBlockTimeCacheKey,
-    'date',
+  const query = useQuery(
+    ['fetchStatisticAverageBlockTimes'],
+    () => explorerService.api.fetchStatisticAverageBlockTimes(),
+    {
+      refetchOnWindowFocus: false,
+    },
   )
   const fullStatisticAverageBlockTimes = useMemo(() => query.data ?? [], [query.data])
 

diff --git a/src/pages/Home/HashRateChart/index.tsx b/src/pages/Home/HashRateChart/index.tsx
@@ -4,15 +4,15 @@ import 'echarts/lib/chart/line'
 import 'echarts/lib/component/title'
 import echarts from 'echarts/lib/echarts'
 import { useTranslation } from 'react-i18next'
+import { useQuery } from '@tanstack/react-query'
 import { handleAxis } from '../../../utils/chart'
 import { parseDateNoTime } from '../../../utils/date'
 import SmallLoading from '../../../components/Loading/SmallLoading'
 import { HomeChartLink, ChartLoadingPanel } from './styled'
 import ChartNoDataImage from '../../../assets/chart_no_data_white.png'
-import { useChartQueryWithCache, useIsLGScreen } from '../../../utils/hook'
+import { useIsLGScreen } from '../../../utils/hook'
 import { ChartItem, explorerService } from '../../../services/ExplorerService'
 import { ReactChartCore } from '../../StatisticsChart/common'
-import { HashRateCacheKey } from '../../StatisticsChart/mining/HashRate'
 
 const useOption = () => {
   const { t } = useTranslation()
@@ -103,7 +103,9 @@ const useOption = () => {
 }
 export default memo(() => {
   const isLG = useIsLGScreen()
-  const query = useChartQueryWithCache(explorerService.api.fetchStatisticHashRate, HashRateCacheKey, 'date')
+  const query = useQuery(['fetchStatisticHashRate'], () => explorerService.api.fetchStatisticHashRate(), {
+    refetchOnWindowFocus: false,
+  })
   const fullStatisticHashRates = useMemo(() => query.data ?? [], [query.data])
   const parseOption = useOption()
 

diff --git a/src/pages/StatisticsChart/activities/AddressBalanceRank.tsx b/src/pages/StatisticsChart/activities/AddressBalanceRank.tsx
@@ -143,8 +143,7 @@ export const AddressBalanceRankChart = ({ isThumbnail = false }: { isThumbnail?:
       onFetched={setStatisticAddressBalanceRanks}
       getEChartOption={getEChartOption}
       toCSV={toCSV}
-      cacheKey="AddressBalanceRank"
-      cacheMode="date"
+      queryKey="fetchStatisticAddressBalanceRank"
     />
   )
 }

diff --git a/src/pages/StatisticsChart/activities/AddressCount.tsx b/src/pages/StatisticsChart/activities/AddressCount.tsx
@@ -108,8 +108,7 @@ export const AddressCountChart = ({ isThumbnail = false }: { isThumbnail?: boole
       fetchData={explorerService.api.fetchStatisticAddressCount}
       getEChartOption={useOption}
       toCSV={toCSV}
-      cacheKey="AddressCount"
-      cacheMode="date"
+      queryKey="fetchStatisticAddressCount"
     />
   )
 }

diff --git a/src/pages/StatisticsChart/activities/BalanceDistribution.tsx b/src/pages/StatisticsChart/activities/BalanceDistribution.tsx
@@ -187,8 +187,7 @@ export const BalanceDistributionChart = ({ isThumbnail = false }: { isThumbnail?
       fetchData={explorerService.api.fetchStatisticBalanceDistribution}
       getEChartOption={useOption}
       toCSV={toCSV}
-      cacheKey="BalanceDistribution"
-      cacheMode="date"
+      queryKey="fetchStatisticBalanceDistribution"
     />
   )
 }

diff --git a/src/pages/StatisticsChart/activities/CellCount.tsx b/src/pages/StatisticsChart/activities/CellCount.tsx
@@ -194,8 +194,7 @@ export const CellCountChart = ({ isThumbnail = false }: { isThumbnail?: boolean
       fetchData={explorerService.api.fetchStatisticCellCount}
       getEChartOption={useOption}
       toCSV={toCSV}
-      cacheKey="CellCount"
-      cacheMode="date"
+      queryKey="fetchStatisticCellCount"
     />
   )
 }

diff --git a/src/pages/StatisticsChart/activities/TransactionCount.tsx b/src/pages/StatisticsChart/activities/TransactionCount.tsx
@@ -106,8 +106,7 @@ export const TransactionCountChart = ({ isThumbnail = false }: { isThumbnail?: b
       fetchData={explorerService.api.fetchStatisticTransactionCount}
       getEChartOption={useOption}
       toCSV={toCSV}
-      cacheKey="TransactionCount"
-      cacheMode="date"
+      queryKey="fetchStatisticTransactionCount"
     />
   )
 }

diff --git a/src/pages/StatisticsChart/activities/TxFeeHistory.tsx b/src/pages/StatisticsChart/activities/TxFeeHistory.tsx
@@ -112,8 +112,7 @@ export const TxFeeHistoryChart = ({ isThumbnail = false }: { isThumbnail?: boole
       fetchData={explorerService.api.fetchStatisticTxFeeHistory}
       getEChartOption={useOption}
       toCSV={toCSV}
-      cacheKey="TransactionFee"
-      cacheMode="date"
+      queryKey="fetchStatisticTxFeeHistory"
     />
   )
 }

diff --git a/src/pages/StatisticsChart/block/AverageBlockTime.tsx b/src/pages/StatisticsChart/block/AverageBlockTime.tsx
@@ -7,8 +7,6 @@ import { ChartItem, explorerService } from '../../../services/ExplorerService'
 import { useCurrentLanguage } from '../../../utils/i18n'
 import { ChartColorConfig } from '../../../constants/common'
 
-export const AverageBlockTimeCacheKey = 'AverageBlockTime'
-
 const useOption = (
   statisticAverageBlockTimes: ChartItem.AverageBlockTime[],
   chartColor: ChartColorConfig,
@@ -183,8 +181,7 @@ export const AverageBlockTimeChart = ({ isThumbnail = false }: { isThumbnail?: b
       fetchData={explorerService.api.fetchStatisticAverageBlockTimes}
       getEChartOption={useOption}
       toCSV={toCSV}
-      cacheKey={AverageBlockTimeCacheKey}
-      cacheMode="date"
+      queryKey="fetchStatisticAverageBlockTimes"
     />
   )
 }

diff --git a/src/pages/StatisticsChart/block/BlockTimeDistribution.tsx b/src/pages/StatisticsChart/block/BlockTimeDistribution.tsx
@@ -104,8 +104,7 @@ export const BlockTimeDistributionChart = ({ isThumbnail = false }: { isThumbnai
       fetchData={explorerService.api.fetchStatisticBlockTimeDistribution}
       getEChartOption={useOption}
       toCSV={toCSV}
-      cacheKey="BlockTimeDistribution"
-      cacheMode="date"
+      queryKey="fetchStatisticBlockTimeDistribution"
     />
   )
 }

diff --git a/src/pages/StatisticsChart/block/EpochTimeDistribution.tsx b/src/pages/StatisticsChart/block/EpochTimeDistribution.tsx
@@ -111,8 +111,7 @@ export const EpochTimeDistributionChart = ({ isThumbnail = false }: { isThumbnai
       fetchData={explorerService.api.fetchStatisticEpochTimeDistribution}
       getEChartOption={useOption}
       toCSV={toCSV}
-      cacheKey="EpochTimeDistribution"
-      cacheMode="date"
+      queryKey="fetchStatisticEpochTimeDistribution"
     />
   )
 }

diff --git a/src/pages/StatisticsChart/common/index.tsx b/src/pages/StatisticsChart/common/index.tsx
@@ -13,18 +13,18 @@ import 'echarts/lib/component/brush'
 import echarts from 'echarts/lib/echarts'
 import { EChartOption, ECharts } from 'echarts'
 import { useTranslation } from 'react-i18next'
+import { useQuery } from '@tanstack/react-query'
 import { LoadingPanel, ChartNoDataPanel, ChartDetailTitle, ChartDetailPanel, ChartNotePanel } from './styled'
 import Loading from '../../../components/Loading'
 import ChartNoDataImage from '../../../assets/chart_no_data.png'
 import ChartNoDataAggronImage from '../../../assets/chart_no_data_aggron.png'
 import { isMainnet } from '../../../utils/chain'
 import SmallLoading from '../../../components/Loading/SmallLoading'
 import Content from '../../../components/Content'
-import { useChartQueryWithCache, useIsMobile, usePrevious, useWindowResize } from '../../../utils/hook'
+import { useIsMobile, usePrevious, useWindowResize } from '../../../utils/hook'
 import { isDeepEqual } from '../../../utils/util'
 import { HelpTip } from '../../../components/HelpTip'
 import { ChartColor, ChartColorConfig } from '../../../constants/common'
-import { Response } from '../../../services/ExplorerService'
 
 const LoadingComp = ({ isThumbnail }: { isThumbnail?: boolean }) => (isThumbnail ? <SmallLoading /> : <Loading show />)
 
@@ -161,7 +161,7 @@ export interface SmartChartPageProps<T> {
   note?: string
   isThumbnail?: boolean
   chartProps?: Partial<ComponentProps<typeof ReactChartCore>>
-  fetchData: () => Promise<T[] | Response.Response<Response.Wrapper<T>[]>>
+  fetchData: () => Promise<T[]>
   onFetched?: (dataList: T[]) => void
   getEChartOption: (
     dataList: T[],
@@ -170,8 +170,7 @@ export interface SmartChartPageProps<T> {
     isThumbnail?: boolean,
   ) => echarts.EChartOption
   toCSV: (dataList: T[]) => (string | number)[][]
-  cacheKey?: string
-  cacheMode?: 'forever' | 'date' | 'epoch'
+  queryKey?: string
 }
 
 export function SmartChartPage<T>({
@@ -184,12 +183,11 @@ export function SmartChartPage<T>({
   onFetched,
   getEChartOption,
   toCSV,
-  cacheKey,
-  cacheMode = 'forever',
+  queryKey,
 }: SmartChartPageProps<T>): ReactElement {
   const isMobile = useIsMobile()
 
-  const query = useChartQueryWithCache(fetchData, cacheKey, cacheMode)
+  const query = useQuery(['SmartChartPage', queryKey], () => fetchData(), { refetchOnWindowFocus: false })
   const dataList = useMemo(() => query.data ?? [], [query.data])
   useEffect(() => {
     if (onFetched && query.data) {

diff --git a/src/pages/StatisticsChart/mining/Difficulty.tsx b/src/pages/StatisticsChart/mining/Difficulty.tsx
@@ -108,8 +108,7 @@ export const DifficultyChart = ({ isThumbnail = false }: { isThumbnail?: boolean
       fetchData={explorerService.api.fetchStatisticDifficulty}
       getEChartOption={useOption}
       toCSV={toCSV}
-      cacheKey="Difficulty"
-      cacheMode="date"
+      queryKey="fetchStatisticDifficulty"
     />
   )
 }

diff --git a/src/pages/StatisticsChart/mining/DifficultyHashRate.tsx b/src/pages/StatisticsChart/mining/DifficultyHashRate.tsx
@@ -201,8 +201,7 @@ export const DifficultyHashRateChart = ({ isThumbnail = false }: { isThumbnail?:
       fetchData={explorerService.api.fetchStatisticDifficultyHashRate}
       getEChartOption={useOption}
       toCSV={toCSV}
-      cacheKey="DifficultyHashRate"
-      cacheMode="epoch"
+      queryKey="fetchStatisticDifficultyHashRate"
     />
   )
 }

diff --git a/src/pages/StatisticsChart/mining/DifficultyUncleRateEpoch.tsx b/src/pages/StatisticsChart/mining/DifficultyUncleRateEpoch.tsx
@@ -217,8 +217,7 @@ export const DifficultyUncleRateEpochChart: FC<{ isThumbnail?: boolean }> = ({ i
       fetchData={explorerService.api.fetchStatisticDifficultyUncleRateEpoch}
       getEChartOption={useOption}
       toCSV={toCSV}
-      cacheKey="DifficultyUncleRateEpoch"
-      cacheMode="epoch"
+      queryKey="fetchStatisticDifficultyUncleRateEpoch"
     />
   )
 }

diff --git a/src/pages/StatisticsChart/mining/HashRate.tsx b/src/pages/StatisticsChart/mining/HashRate.tsx
@@ -8,8 +8,6 @@ import { ChartItem, explorerService } from '../../../services/ExplorerService'
 import { useCurrentLanguage } from '../../../utils/i18n'
 import { ChartColorConfig } from '../../../constants/common'
 
-export const HashRateCacheKey = 'HashRate'
-
 const useOption = (
   statisticHashRates: ChartItem.HashRate[],
   chartColor: ChartColorConfig,
@@ -109,8 +107,7 @@ export const HashRateChart = ({ isThumbnail = false }: { isThumbnail?: boolean }
       fetchData={explorerService.api.fetchStatisticHashRate}
       getEChartOption={useOption}
       toCSV={toCSV}
-      cacheKey={HashRateCacheKey}
-      cacheMode="date"
+      queryKey="fetchStatisticHashRate"
     />
   )
 }

diff --git a/src/pages/StatisticsChart/mining/MinerAddressDistribution.tsx b/src/pages/StatisticsChart/mining/MinerAddressDistribution.tsx
@@ -122,8 +122,7 @@ export const MinerAddressDistributionChart = ({ isThumbnail = false }: { isThumb
       fetchData={explorerService.api.fetchStatisticMinerAddressDistribution}
       getEChartOption={getEChartOption}
       toCSV={toCSV}
-      cacheKey="MinerAddressDistribution"
-      cacheMode="date"
+      queryKey="fetchStatisticMinerAddressDistribution"
     />
   )
 }

diff --git a/src/pages/StatisticsChart/mining/MinerVersionDistribution.tsx b/src/pages/StatisticsChart/mining/MinerVersionDistribution.tsx
@@ -121,8 +121,7 @@ export const MinerVersionDistributionChart = ({ isThumbnail = false }: { isThumb
       fetchData={fetchData}
       getEChartOption={useOption}
       toCSV={toCSV}
-      cacheKey="MinerVersionDistribution"
-      cacheMode="date"
+      queryKey="fetchStatisticMinerVersionDistribution"
     />
   )
 }

diff --git a/src/pages/StatisticsChart/mining/UncleRate.tsx b/src/pages/StatisticsChart/mining/UncleRate.tsx
@@ -123,8 +123,7 @@ export const UncleRateChart = ({ isThumbnail = false }: { isThumbnail?: boolean
       fetchData={explorerService.api.fetchStatisticUncleRate}
       getEChartOption={useOption}
       toCSV={toCSV}
-      cacheKey="UncleRate"
-      cacheMode="date"
+      queryKey="fetchStatisticUncleRate"
     />
   )
 }

diff --git a/src/pages/StatisticsChart/monetary/AnnualPercentageCompensation.tsx b/src/pages/StatisticsChart/monetary/AnnualPercentageCompensation.tsx
@@ -108,8 +108,7 @@ export const AnnualPercentageCompensationChart = ({ isThumbnail = false }: { isT
       fetchData={explorerService.api.fetchStatisticAnnualPercentageCompensation}
       getEChartOption={useOption}
       toCSV={toCSV}
-      cacheKey="APC"
-      cacheMode="forever"
+      queryKey="fetchStatisticAnnualPercentageCompensation"
     />
   )
 }

diff --git a/src/pages/StatisticsChart/monetary/InflationRate.tsx b/src/pages/StatisticsChart/monetary/InflationRate.tsx
@@ -167,8 +167,7 @@ export const InflationRateChart = ({ isThumbnail = false }: { isThumbnail?: bool
       fetchData={explorerService.api.fetchStatisticInflationRate}
       getEChartOption={useOption}
       toCSV={toCSV}
-      cacheKey="InflationRate"
-      cacheMode="forever"
+      queryKey="fetchStatisticInflationRate"
     />
   )
 }

diff --git a/src/pages/StatisticsChart/monetary/Liquidity.tsx b/src/pages/StatisticsChart/monetary/Liquidity.tsx
@@ -197,8 +197,7 @@ export const LiquidityChart = ({ isThumbnail = false }: { isThumbnail?: boolean
       fetchData={explorerService.api.fetchStatisticLiquidity}
       getEChartOption={useOption}
       toCSV={toCSV}
-      cacheKey="Liquidity"
-      cacheMode="date"
+      queryKey="fetchStatisticLiquidity"
     />
   )
 }

diff --git a/src/pages/StatisticsChart/monetary/SecondaryIssuance.tsx b/src/pages/StatisticsChart/monetary/SecondaryIssuance.tsx
@@ -191,8 +191,7 @@ export const SecondaryIssuanceChart = ({ isThumbnail = false }: { isThumbnail?:
       fetchData={explorerService.api.fetchStatisticSecondaryIssuance}
       getEChartOption={useOption}
       toCSV={toCSV}
-      cacheKey="SecondaryIssuance"
-      cacheMode="date"
+      queryKey="fetchStatisticSecondaryIssuance"
     />
   )
 }

diff --git a/src/pages/StatisticsChart/monetary/TotalSupply.tsx b/src/pages/StatisticsChart/monetary/TotalSupply.tsx
@@ -207,8 +207,7 @@ export const TotalSupplyChart = ({ isThumbnail = false }: { isThumbnail?: boolea
       fetchData={explorerService.api.fetchStatisticTotalSupply}
       getEChartOption={useOption}
       toCSV={toCSV}
-      cacheKey="TotalSupply"
-      cacheMode="date"
+      queryKey="fetchStatisticTotalSupply"
     />
   )
 }

diff --git a/src/pages/StatisticsChart/nervosDao/CirculationRatio.tsx b/src/pages/StatisticsChart/nervosDao/CirculationRatio.tsx
@@ -109,8 +109,7 @@ export const CirculationRatioChart = ({ isThumbnail = false }: { isThumbnail?: b
       fetchData={explorerService.api.fetchStatisticCirculationRatio}
       getEChartOption={useOption}
       toCSV={toCSV}
-      cacheKey="DepositCirculationRatio"
-      cacheMode="date"
+      queryKey="fetchStatisticCirculationRatio"
     />
   )
 }

diff --git a/src/pages/StatisticsChart/nervosDao/NewDaoDeposit.tsx b/src/pages/StatisticsChart/nervosDao/NewDaoDeposit.tsx
@@ -196,8 +196,7 @@ export const NewDaoDepositChart = ({ isThumbnail = false }: { isThumbnail?: bool
       fetchData={explorerService.api.fetchStatisticNewDaoDeposit}
       getEChartOption={useOption}
       toCSV={toCSV}
-      cacheKey="DailyDeposit"
-      cacheMode="date"
+      queryKey="fetchStatisticNewDaoDeposit"
     />
   )
 }

diff --git a/src/pages/StatisticsChart/nervosDao/TotalDaoDeposit.tsx b/src/pages/StatisticsChart/nervosDao/TotalDaoDeposit.tsx
@@ -195,8 +195,7 @@ export const TotalDaoDepositChart = ({ isThumbnail = false }: { isThumbnail?: bo
       fetchData={explorerService.api.fetchStatisticTotalDaoDeposit}
       getEChartOption={useOption}
       toCSV={toCSV}
-      cacheKey="TotalDeposit"
-      cacheMode="date"
+      queryKey="fetchStatisticTotalDaoDeposit"
     />
   )
 }