bump tanstack query (#396)

Phala-Network · Feb 25, 2024 · 48554e6 · 48554e6
1 parent 4f7e01d
commit 48554e6
Show file tree

Hide file tree

Showing 16 changed files with 338 additions and 214 deletions.
diff --git a/apps/analytics/package.json b/apps/analytics/package.json
@@ -24,7 +24,7 @@
     "@phala/lib": "workspace:*",
     "@rgossiaux/svelte-headlessui": "^2.0.0",
     "@rgossiaux/svelte-heroicons": "^0.1.2",
-    "@tanstack/svelte-query": "^5.22.2",
+    "@tanstack/svelte-query": "^5.24.1",
     "autoprefixer": "^10.4.17",
     "chart.js": "^4.4.1",
     "chartjs-adapter-date-fns": "^3.0.0",

diff --git a/apps/app/components/BasePool/List.tsx b/apps/app/components/BasePool/List.tsx
@@ -207,6 +207,7 @@ const BasePoolList: FC<{
       },
       {
         enabled,
+        initialPageParam: undefined,
         getNextPageParam: (lastPage) =>
           lastPage.basePoolsConnection.pageInfo.hasNextPage
             ? {after: lastPage.basePoolsConnection.pageInfo.endCursor}

diff --git a/apps/app/components/BasePool/Worker/List.tsx b/apps/app/components/BasePool/Worker/List.tsx
@@ -27,6 +27,7 @@ import {
 import {polkadotAccountAtom} from '@phala/store'
 import {SubmittableExtrinsic} from '@polkadot/api/types'
 import {ISubmittableResult} from '@polkadot/types/types'
+import {keepPreviousData} from '@tanstack/react-query'
 import {addDays} from 'date-fns'
 import {useAtom} from 'jotai'
 import {type FC, useCallback, useState} from 'react'
@@ -99,7 +100,7 @@ const WorkerList: FC<{basePool: BasePoolCommonFragment}> = ({basePool}) => {
         ],
       },
     },
-    {keepPreviousData: true},
+    {placeholderData: keepPreviousData},
   )
   const {data: reclaimableData} = useReclaimableWorkersConnectionQuery(
     subsquidClient,

diff --git a/apps/app/components/DashboardNftList.tsx b/apps/app/components/DashboardNftList.tsx
@@ -17,6 +17,7 @@ import {
 } from '@mui/material'
 import {polkadotAccountAtom} from '@phala/store'
 import {type ApiPromise} from '@polkadot/api'
+import {keepPreviousData} from '@tanstack/react-query'
 import {useAtom} from 'jotai'
 import {type FC, useState} from 'react'
 import useSWRImmutable from 'swr/immutable'
@@ -135,7 +136,7 @@ const DashboardNftList: FC = () => {
     },
     {
       enabled: account !== null,
-      keepPreviousData: true,
+      placeholderData: keepPreviousData,
     },
   )
   const isEmpty = data?.nftsConnection.totalCount === 0

diff --git a/apps/app/components/Delegation/List.tsx b/apps/app/components/Delegation/List.tsx
@@ -103,6 +103,7 @@ const DelegationList: FC<{
       },
       {
         enabled,
+        initialPageParam: undefined,
         getNextPageParam: (lastPage) =>
           lastPage.delegationsConnection.pageInfo.hasNextPage
             ? {after: lastPage.delegationsConnection.pageInfo.endCursor}

diff --git a/apps/app/components/TopBar/Chain.tsx b/apps/app/components/TopBar/Chain.tsx
@@ -27,15 +27,15 @@ const ChainSelect: FC = () => {
   const subsquidHeight = globalStateData?.height
   const blockTime = globalStateData?.averageBlockTime
   const apiConnected = api?.isConnected
-  const {data: chainHeight} = useQuery(
-    ['chainHeight', chain],
-    async () => {
+  const {data: chainHeight} = useQuery({
+    queryKey: ['chainHeight', chain],
+    queryFn: async () => {
       if (api == null) return null
       const lastHeader = await api.rpc.chain.getHeader()
       return lastHeader.number.toNumber()
     },
-    {refetchInterval: 3000},
-  )
+    refetchInterval: 3000,
+  })
   const status: 'success' | 'warning' | 'error' = useMemo(() => {
     if (apiConnected === true) {
       if (

diff --git a/apps/app/components/TopBar/NetworkStats.tsx b/apps/app/components/TopBar/NetworkStats.tsx
@@ -55,9 +55,9 @@ const NetworkStats: FC = () => {
   const match = useMediaQuery(theme.breakpoints.down('lg'))
 
   const [chain] = useAtom(chainAtom)
-  const {data: circulationValue} = useQuery(
-    ['circulations', chain],
-    async () => {
+  const {data: circulationValue} = useQuery({
+    queryKey: ['circulations', chain],
+    queryFn: async () => {
       const res = await fetch('/api/circulation')
       if (res.ok) {
         try {
@@ -69,7 +69,7 @@ const NetworkStats: FC = () => {
         return null
       }
     },
-  )
+  })
   const {data: phalaGlobalStateData} = useGlobalStateData(phalaSubsquidClient)
   const {data: khalaGlobalStateData} = useGlobalStateData(khalaSubsquidClient)
   const {

diff --git a/apps/app/hooks/useAssetBalance.ts b/apps/app/hooks/useAssetBalance.ts
@@ -9,15 +9,15 @@ const useAssetBalance = (
 ): Decimal | null | undefined => {
   const api = usePolkadotApi()
   const assetsMetadata = useAssetsMetadata()
-  const {data} = useQuery(
-    [
+  const {data} = useQuery({
+    queryKey: [
       'assetBalance',
       api?.runtimeChain,
       assetsMetadata == null,
       account,
       assetId,
     ],
-    async () => {
+    queryFn: async () => {
       if (api == null || account == null) {
         return null
       }
@@ -36,7 +36,7 @@ const useAssetBalance = (
         (assetId === 'available' ? availableBalance : freeBalance).toHex(),
       ).div(1e12)
     },
-  )
+  })
 
   return data
 }

diff --git a/apps/app/hooks/useListenBlockHeight.ts b/apps/app/hooks/useListenBlockHeight.ts
@@ -21,18 +21,26 @@ const useListenBlockHeight = (): void => {
   useEffect(() => {
     if (height != null) {
       if (enabled.current) {
-        void queryClient.invalidateQueries(['AccountById'])
-        void queryClient.invalidateQueries(['BasePoolById'])
-        void queryClient.invalidateQueries(['BasePoolsConnection.infinite'])
-        void queryClient.invalidateQueries(['BasePoolWhitelistsConnection'])
-        void queryClient.invalidateQueries(['DelegationById'])
-        void queryClient.invalidateQueries(['DelegationsConnection'])
-        void queryClient.invalidateQueries(['DelegationsConnection.infinite'])
-        void queryClient.invalidateQueries(['WorkersConnection'])
-        void queryClient.invalidateQueries(['OwnedVaults'])
-        void queryClient.invalidateQueries(['ClaimableStakePools'])
-        void queryClient.invalidateQueries(['lockedWrappedBalance'])
-        void queryClient.invalidateQueries(['assetBalance'])
+        void queryClient.invalidateQueries({queryKey: ['AccountById']})
+        void queryClient.invalidateQueries({queryKey: ['BasePoolById']})
+        void queryClient.invalidateQueries({
+          queryKey: ['BasePoolsConnection.infinite'],
+        })
+        void queryClient.invalidateQueries({
+          queryKey: ['BasePoolWhitelistsConnection'],
+        })
+        void queryClient.invalidateQueries({queryKey: ['DelegationById']})
+        void queryClient.invalidateQueries({
+          queryKey: ['DelegationsConnection'],
+        })
+        void queryClient.invalidateQueries({
+          queryKey: ['DelegationsConnection.infinite'],
+        })
+        void queryClient.invalidateQueries({queryKey: ['WorkersConnection']})
+        void queryClient.invalidateQueries({queryKey: ['OwnedVaults']})
+        void queryClient.invalidateQueries({queryKey: ['ClaimableStakePools']})
+        void queryClient.invalidateQueries({queryKey: ['lockedWrappedBalance']})
+        void queryClient.invalidateQueries({queryKey: ['assetBalance']})
       } else {
         // Skip the first time
         enabled.current = true

diff --git a/apps/app/hooks/useLockedWrappedBalance.ts b/apps/app/hooks/useLockedWrappedBalance.ts
@@ -6,17 +6,17 @@ const useLockedWrappedBalance = (
   account?: string,
 ): Decimal | undefined | null => {
   const api = usePolkadotApi()
-  const {data} = useQuery(
-    ['lockedWrappedBalance', api?.runtimeChain, account],
-    async () => {
+  const {data} = useQuery({
+    queryKey: ['lockedWrappedBalance', api?.runtimeChain, account],
+    queryFn: async () => {
       if (api == null || account == null) {
         return null
       }
       const res = await api.query.phalaWrappedBalances.stakerAccounts(account)
       const unwrapped = res.unwrapOr({locked: 0})
       return new Decimal(unwrapped.locked.toString()).div(1e12)
     },
-  )
+  })
 
   return data
 }