refactor: introduce react persist query client (#10742)

packages/shared-base-ui/src/data/queryClient.ts

@@ -4,7 +4,7 @@ export const queryClient = new QueryClient({
     defaultOptions: {
         queries: {
             staleTime: 20_000,
-            cacheTime: 300_000,
+            cacheTime: Number.POSITIVE_INFINITY,
         },
     },
 })

packages/shared/package.json

@@ -37,7 +37,9 @@
     "@react-hookz/web": "^23.1.0",
     "@servie/events": "^3.0.0",
     "@solana/web3.js": "^1.75.0",
+    "@tanstack/query-sync-storage-persister": "^4.35.0",
     "@tanstack/react-query-devtools": "^4.29.25",
+    "@tanstack/react-query-persist-client": "^4.35.0",
     "@types/d3": "5.16.4",
     "@types/json-stable-stringify": "^1.0.34",
     "anchorme": "^2.1.2",

packages/shared/src/UI/contexts/PageUIProvider.tsx

@@ -1,11 +1,12 @@
 import { Suspense } from 'react'
-import { QueryClientProvider } from '@tanstack/react-query'
 import { StyledEngineProvider, type Theme } from '@mui/material'
 import { RootWeb3ContextProvider } from '@masknet/web3-hooks-base'
 import { CSSVariableInjector, DialogStackingProvider, MaskThemeProvider } from '@masknet/theme'
 import { I18NextProviderHMR, SharedContextProvider } from '@masknet/shared'
 import { compose, i18NextInstance } from '@masknet/shared-base'
 import { ErrorBoundary, queryClient } from '@masknet/shared-base-ui'
+import { PersistQueryClientProvider, type PersistQueryClientOptions } from '@tanstack/react-query-persist-client'
+import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister'
 
 export function PageUIProvider(useTheme: () => Theme, children: React.ReactNode, fallback?: React.ReactNode) {
     return compose(
@@ -25,11 +26,25 @@ interface MaskUIRootProps extends React.PropsWithChildren<{}> {
     fallback?: React.ReactNode
 }
 
+const persister = createSyncStoragePersister({
+    storage: window.localStorage,
+})
+// We don't persist all queries but only those have the first key starts with '@@'
+const persistOptions: Omit<PersistQueryClientOptions, 'queryClient'> = {
+    persister,
+    dehydrateOptions: {
+        shouldDehydrateQuery: ({ queryKey }) => {
+            if (typeof queryKey[0] !== 'string') return false
+            return queryKey[0].startsWith('@@')
+        },
+    },
+}
+
 function MaskUIRoot({ children, useTheme, fallback }: MaskUIRootProps) {
     return (
         <DialogStackingProvider hasGlobalBackdrop={false}>
             <MaskThemeProvider useMaskIconPalette={(theme) => theme.palette.mode} useTheme={useTheme}>
-                <QueryClientProvider client={queryClient}>
+                <PersistQueryClientProvider client={queryClient} persistOptions={persistOptions}>
                     <RootWeb3ContextProvider>
                         <SharedContextProvider>
                             <Suspense fallback={fallback}>
@@ -38,7 +53,7 @@ function MaskUIRoot({ children, useTheme, fallback }: MaskUIRootProps) {
                             </Suspense>
                         </SharedContextProvider>
                     </RootWeb3ContextProvider>
-                </QueryClientProvider>
+                </PersistQueryClientProvider>
             </MaskThemeProvider>
         </DialogStackingProvider>
     )

packages/web3-hooks/base/src/useFiatCurrencyRate.ts

@@ -4,35 +4,16 @@ import { useQuery } from '@tanstack/react-query'
 import { pick } from 'lodash-es'
 import { useCurrencyType } from './useCurrencyType.js'
 
-// TODO create generic hook wrapping useQuery with persistent cache as placeholderData.
-const STORE_KEY = '@mask/fiat-currency-rates'
-const getData = () => {
-    const raw = localStorage.getItem(STORE_KEY)
-    if (!raw) return undefined
-    try {
-        return JSON.parse(raw) as Record<string, number>
-    } catch {
-        return undefined
-    }
-}
-
-const setData = (data: Record<string, number>) => {
-    localStorage.setItem(STORE_KEY, JSON.stringify(data))
-}
-
 export function useFiatCurrencyRate() {
     const fiatCurrencyType = useCurrencyType()
     const currencyType = fiatCurrencyType?.toUpperCase() || CurrencyType.USD
 
     return useQuery({
-        queryKey: ['fiat-currency-rates'],
-        placeholderData: getData(),
+        queryKey: ['@@fiat-currency-rates'],
         queryFn: async () => {
             const allRates = await FiatCurrencyRate.getRates()
             // Pick what we need only to reduce memory cost.
-            const rates = pick(allRates, Object.keys(CurrencyType))
-            setData(rates)
-            return rates
+            return pick(allRates, Object.keys(CurrencyType))
         },
         select: (data) => data[currencyType],
     })