refactor: migrate react-query v3 → @tanstack/react-query v5

package.json

@@ -74,7 +74,6 @@
     "react-html-parser": "^2.0.2",
     "react-markdown": "^8.0.0",
     "react-paginate": "^8.2.0",
-    "react-query": "^3.13.0",
     "react-router-dom": "^5.2.0",
     "react-router-hash-link": "^2.4.3",
     "react-scripts": "^5.0.1",

src/App.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import "App.css"
 import { BrowserRouter as Router, Redirect, Route, Switch } from "react-router-dom"
-import { QueryClient, QueryClientProvider } from "react-query"
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 
 import { Box, ThemeProvider, styled } from "@material-ui/core"
 import { SnackbarProvider } from "notistack"
@@ -32,7 +32,7 @@ const queryClient = new QueryClient({
       refetchOnMount: false,
       refetchOnWindowFocus: true,
       staleTime: 5000,
-      cacheTime: 300000
+      gcTime: 300000
     }
   }
 })
@@ -82,7 +82,6 @@ const App: React.FC = () => {
           horizontal: "center"
         }}
       >
-        {/* <TanStackQueryClientProvider client={tsQueryClient}> */}
         <QueryClientProvider client={queryClient}>
           <ActionSheetProvider>
             <Box bgcolor="primary.dark" position="absolute" width="100%">
@@ -137,7 +136,6 @@ const App: React.FC = () => {
             </Box>
           </ActionSheetProvider>
         </QueryClientProvider>
-        {/* </TanStackQueryClientProvider> */}
       </SnackbarProvider>
     </ThemeProvider>
   )

src/modules/etherlink/hooks/useDaoMembers.ts

@@ -1,4 +1,4 @@
-import { useQuery } from "react-query"
+import { useQuery } from "@tanstack/react-query"
 import { ethers } from "ethers"
 import HbTokenAbi from "assets/abis/hb_evm.json"
 import { getTokenHolders } from "modules/etherlink/utils"
@@ -9,9 +9,9 @@ interface DaoMember {
 }
 
 export const useDaoMembers = (network: string, token: string, decimals: number, provider: any) => {
-  return useQuery<DaoMember[], Error>(
-    ["daoMembers", network, token],
-    async () => {
+  return useQuery<DaoMember[], Error>({
+    queryKey: ["daoMembers", network, token],
+    queryFn: async () => {
       if (!provider || !token || !network) {
         throw new Error("Missing required parameters")
       }
@@ -51,12 +51,10 @@ export const useDaoMembers = (network: string, token: string, decimals: number,
 
       return results
     },
-    {
-      enabled: !!provider && !!token && !!network,
-      staleTime: 5 * 60 * 1000, // 5 minutes
-      cacheTime: 10 * 60 * 1000, // 10 minutes
-      retry: 2,
-      retryDelay: 1000
-    }
-  )
+    enabled: !!provider && !!token && !!network,
+    staleTime: 5 * 60 * 1000, // 5 minutes
+    gcTime: 10 * 60 * 1000, // 10 minutes
+    retry: 2,
+    retryDelay: 1000
+  })
 }

src/modules/lite/explorer/hooks/usePolls.tsx

@@ -5,14 +5,14 @@ import { useNotification } from "modules/common/hooks/useNotification"
 import { isProposalActive } from "services/lite/utils"
 import { ProposalStatus } from "../components/ProposalTableRowStatusBadge"
 import { EnvKey, getEnv } from "services/config"
-import { useQuery } from "react-query"
+import { useQuery } from "@tanstack/react-query"
 
 export const usePolls = (id: any) => {
   const openNotification = useNotification()
 
-  const { data, ...rest } = useQuery(
-    ["proposals", id],
-    async () => {
+  const { data, ...rest } = useQuery({
+    queryKey: ["proposals", id],
+    queryFn: async () => {
       const response = await fetch(`${getEnv(EnvKey.REACT_APP_LITE_API_URL)}/polls/${id}/list`)
 
       if (!response.ok) {
@@ -51,12 +51,10 @@ export const usePolls = (id: any) => {
 
       return communityPolls
     },
-    {
-      refetchInterval: 30000,
-      enabled: !!id,
-      refetchOnMount: "always"
-    }
-  )
+    refetchInterval: 30000,
+    enabled: !!id,
+    refetchOnMount: "always"
+  })
 
   return {
     data,

src/modules/lite/explorer/hooks/useUserVotes.tsx

@@ -2,17 +2,17 @@
 import React from "react"
 import { useNotification } from "modules/common/hooks/useNotification"
 import { EnvKey, getEnv } from "services/config"
-import { useQuery } from "react-query"
+import { useQuery } from "@tanstack/react-query"
 import { useTezos } from "services/beacon/hooks/useTezos"
 import { Choice } from "models/Choice"
 
 export const useUserVotes = () => {
   const { account } = useTezos()
   const openNotification = useNotification()
 
-  const { data, ...rest } = useQuery(
-    ["userVotes"],
-    async () => {
+  const { data, ...rest } = useQuery({
+    queryKey: ["userVotes"],
+    queryFn: async () => {
       const response = await fetch(`${getEnv(EnvKey.REACT_APP_LITE_API_URL)}/choices/${String(account)}/user_votes`)
 
       if (!response.ok) {
@@ -31,12 +31,10 @@ export const useUserVotes = () => {
       }
       return userVotedPolls
     },
-    {
-      refetchInterval: 30000,
-      enabled: !!account,
-      refetchOnMount: "always"
-    }
-  )
+    refetchInterval: 30000,
+    enabled: !!account,
+    refetchOnMount: "always"
+  })
 
   return {
     data,

src/services/aci/useArbitratyContractData.ts

@@ -1,4 +1,4 @@
-import { useMutation, useQueryClient } from "react-query"
+import { useMutation, useQueryClient } from "@tanstack/react-query"
 import { useNotification } from "modules/common/hooks/useNotification"
 import { useTezos } from "services/beacon/hooks/useTezos"
 import { Network } from "services/beacon"
@@ -20,8 +20,8 @@ export const useArbitraryContractData = () => {
       finishLoad: (status: boolean) => void
       showHeader: (status: boolean) => void
     }
-  >(
-    async ({ contract, network, handleContinue, finishLoad, showHeader }) => {
+  >({
+    mutationFn: async ({ contract, network, handleContinue, finishLoad, showHeader }) => {
       try {
         let tezosToolkit = tezos
 
@@ -58,10 +58,8 @@ export const useArbitraryContractData = () => {
         return new Error((e as Error).message)
       }
     },
-    {
-      onSuccess: () => {
-        queryClient.resetQueries()
-      }
+    onSuccess: () => {
+      queryClient.resetQueries()
     }
-  )
+  })
 }

src/services/agora/hooks/useTopic.tsx

@@ -1,11 +1,13 @@
-import { useQuery } from "react-query"
+import { useQuery } from "@tanstack/react-query"
 import { getTopicById } from "../topics"
 import { Topic } from "../topics/types"
 
 export const useAgoraTopic = (topicId?: number) => {
-  const result = useQuery<Topic, Error>(["agoraTopic", topicId], () => getTopicById(topicId as number), {
+  const result = useQuery<Topic, Error>({
+    queryKey: ["agoraTopic", topicId],
+    queryFn: () => getTopicById(topicId as number),
     enabled: !!topicId,
-    cacheTime: Infinity,
+    gcTime: Infinity,
     refetchOnWindowFocus: false
   })
 

src/services/beacon/hooks/useTezos.ts

@@ -1,4 +1,4 @@
-import { useQueryClient } from "react-query"
+import { useQueryClient } from "@tanstack/react-query"
 import { useCallback, useContext, useEffect } from "react"
 import { TezosToolkit } from "@taquito/taquito"
 import { connectWithBeacon, createTezos, Network, rpcNodes, TezosActionType } from "services/beacon"

src/services/contracts/baseDAO/hooks/useBlockchainInfo.ts

@@ -1,9 +1,12 @@
 import { getNetworkStats } from "../../../bakingBad/stats"
-import { useQuery } from "react-query"
+import { useQuery } from "@tanstack/react-query"
 import { useTezos } from "services/beacon/hooks/useTezos"
 import { BlockchainStats } from "../../../bakingBad/stats/types"
 
 export const useBlockchainInfo = () => {
   const { network } = useTezos()
-  return useQuery<BlockchainStats, Error>(["blockchainStats", network], () => getNetworkStats(network))
+  return useQuery<BlockchainStats, Error>({
+    queryKey: ["blockchainStats", network],
+    queryFn: () => getNetworkStats(network)
+  })
 }

src/services/contracts/baseDAO/hooks/useDAOHoldings.ts

@@ -1,5 +1,5 @@
 import { BaseDAO } from ".."
-import { useQuery } from "react-query"
+import { useQuery } from "@tanstack/react-query"
 import { DAOHolding, getDAOBalances, getDAONFTBalances, NFTDAOHolding } from "services/bakingBad/tokenBalances"
 import { useDAO } from "services/services/dao/hooks/useDAO"
 import { useTezos } from "services/beacon/hooks/useTezos"
@@ -10,15 +10,13 @@ export const useDAOHoldings = (contractAddress: string) => {
   const { data: dao } = useDAO(contractAddress)
   const { network } = useTezos()
 
-  const { data, ...rest } = useQuery<DAOHolding[], Error>(
-    ["balances", contractAddress],
-    async () => {
+  const { data, ...rest } = useQuery<DAOHolding[], Error>({
+    queryKey: ["balances", contractAddress],
+    queryFn: async () => {
       return await getDAOBalances((dao as BaseDAO).data.address, network)
     },
-    {
-      enabled: !!dao
-    }
-  )
+    enabled: !!dao
+  })
 
   const tokens = useMemo(() => {
     if (!data) {
@@ -39,15 +37,13 @@ export const useDAONFTHoldings = (contractAddress: string) => {
   const { data: dao } = useDAO(contractAddress)
   const { network } = useTezos()
 
-  const { data, ...rest } = useQuery<DAOHolding[], Error>(
-    ["nftbalances", contractAddress],
-    async () => {
+  const { data, ...rest } = useQuery<DAOHolding[], Error>({
+    queryKey: ["nftbalances", contractAddress],
+    queryFn: async () => {
       return await getDAONFTBalances((dao as BaseDAO).data.address, network)
     },
-    {
-      enabled: !!dao
-    }
-  )
+    enabled: !!dao
+  })
 
   const nfts = useMemo(() => {
     if (!data) {

src/services/contracts/baseDAO/hooks/useDAOLambda.ts

@@ -1,5 +1,5 @@
 import { BaseDAO } from ".."
-import { useQuery } from "react-query"
+import { useQuery } from "@tanstack/react-query"
 import { useDAO } from "services/services/dao/hooks/useDAO"
 import { useTezos } from "services/beacon/hooks/useTezos"
 import { getDAOLambda } from "services/bakingBad/lambdas"
@@ -9,15 +9,13 @@ export const useDAOLambda = (contractAddress: string, lambda_name: string) => {
   const { data: dao } = useDAO(contractAddress)
   const { network } = useTezos()
 
-  const { data } = useQuery<Lambda, Error>(
-    ["lambdas", contractAddress, lambda_name],
-    async () => {
+  const { data } = useQuery<Lambda, Error>({
+    queryKey: ["lambdas", contractAddress, lambda_name],
+    queryFn: async () => {
       return await getDAOLambda((dao as BaseDAO).data.address, network, lambda_name)
     },
-    {
-      enabled: !!dao
-    }
-  )
+    enabled: !!dao
+  })
 
   return data
 }

src/services/contracts/baseDAO/hooks/useDAOLambdas.ts

@@ -1,5 +1,5 @@
 import { BaseDAO } from ".."
-import { useQuery } from "react-query"
+import { useQuery } from "@tanstack/react-query"
 import { useDAO } from "services/services/dao/hooks/useDAO"
 import { useTezos } from "services/beacon/hooks/useTezos"
 import { getDAOLambdas } from "services/bakingBad/lambdas"
@@ -9,15 +9,13 @@ export const useDAOLambdas = (contractAddress: string) => {
   const { data: dao } = useDAO(contractAddress)
   const { network } = useTezos()
 
-  const { data } = useQuery<Lambda[], Error>(
-    ["lambdas", contractAddress],
-    async () => {
+  const { data } = useQuery<Lambda[], Error>({
+    queryKey: ["lambdas", contractAddress],
+    queryFn: async () => {
       return await getDAOLambdas((dao as BaseDAO).data.address, network)
     },
-    {
-      enabled: !!dao
-    }
-  )
+    enabled: !!dao
+  })
 
   return data
 }

src/services/contracts/baseDAO/hooks/useDelegate.ts

@@ -1,4 +1,4 @@
-import { useQuery } from "react-query"
+import { useQuery } from "@tanstack/react-query"
 import { useDAO } from "services/services/dao/hooks/useDAO"
 import { useTezos } from "services/beacon/hooks/useTezos"
 import { getLatestDelegation } from "services/bakingBad/delegations"
@@ -7,9 +7,9 @@ export const useDelegate = (contractAddress: string) => {
   const { data: dao } = useDAO(contractAddress)
   const { tezos, network } = useTezos()
 
-  const result = useQuery<{ address: string; alias?: string } | null, Error>(
-    ["daoDelegate", contractAddress],
-    async () => {
+  const result = useQuery<{ address: string; alias?: string } | null, Error>({
+    queryKey: ["daoDelegate", contractAddress],
+    queryFn: async () => {
       const latestDelegation = await getLatestDelegation(contractAddress, network)
 
       if (!latestDelegation) {
@@ -18,10 +18,8 @@ export const useDelegate = (contractAddress: string) => {
 
       return latestDelegation.newDelegate
     },
-    {
-      enabled: !!dao && !!tezos
-    }
-  )
+    enabled: !!dao && !!tezos
+  })
 
   return result
 }

src/services/contracts/baseDAO/hooks/useDropAllExpired.ts

@@ -1,5 +1,5 @@
 import { useNotification } from "modules/common/hooks/useNotification"
-import { useMutation, useQueryClient } from "react-query"
+import { useMutation, useQueryClient } from "@tanstack/react-query"
 import { useTezos } from "services/beacon/hooks/useTezos"
 import { BaseDAO } from ".."
 import { networkNameMap } from "../../../bakingBad"
@@ -9,8 +9,8 @@ export const useDropAllExpired = () => {
   const openNotification = useNotification()
   const { network, tezos, account, connect } = useTezos()
 
-  return useMutation<any | Error, Error, { dao: BaseDAO; expiredProposalIds: string[] }>(
-    async params => {
+  return useMutation<any | Error, Error, { dao: BaseDAO; expiredProposalIds: string[] }>({
+    mutationFn: async params => {
       const { key: dropNotification, closeSnackbar: closeFlushNotification } = openNotification({
         message: "Please sign the transaction to drop all expired proposals",
         persist: true,
@@ -49,10 +49,8 @@ export const useDropAllExpired = () => {
         return new Error((e as Error).message)
       }
     },
-    {
-      onSuccess: () => {
-        queryClient.resetQueries()
-      }
+    onSuccess: () => {
+      queryClient.resetQueries()
     }
-  )
+  })
 }