From 9e70c7a32d3477eea8be0ead043356e6714456d2 Mon Sep 17 00:00:00 2001 From: Yana Date: Thu, 20 Mar 2025 20:09:40 +0200 Subject: [PATCH] Add caching on tanstack queries --- explorer-v2/src/app/api/index.tsx | 1 + .../AccountBalancesCard.tsx | 12 ++++++-- .../accountPageComponents/AccountInfoCard.tsx | 3 ++ .../NetworkStakeCard.tsx | 29 ++++++++++--------- .../landingPageComponents/NoiseCard.tsx | 5 +++- .../StakersNumberCard.tsx | 11 ++++--- .../landingPageComponents/TokenomicsCard.tsx | 9 ++++++ .../nodeTable/NodeTableWithAction.tsx | 6 ++++ .../nymNodePageComponents/BasicInfoCard.tsx | 3 ++ .../nymNodePageComponents/NodeDataCard.tsx | 6 ++++ .../NodeDelegationsCard.tsx | 3 ++ .../NodeParametersCard.tsx | 6 ++++ .../nymNodePageComponents/NodeProfileCard.tsx | 3 ++ .../nymNodePageComponents/NodeRoleCard.tsx | 9 ++++++ .../components/staking/OriginalStakeCard.tsx | 3 ++ .../staking/StakeTableWithAction.tsx | 6 ++++ .../staking/SubHeaderRowActions.tsx | 3 ++ .../components/staking/TotalRewardsCard.tsx | 3 ++ .../src/components/staking/TotalStakeCard.tsx | 3 ++ explorer-v2/src/providers/QueryProvider.tsx | 1 - 20 files changed, 103 insertions(+), 22 deletions(-) diff --git a/explorer-v2/src/app/api/index.tsx b/explorer-v2/src/app/api/index.tsx index 687372c2f2..8cab86c860 100644 --- a/explorer-v2/src/app/api/index.tsx +++ b/explorer-v2/src/app/api/index.tsx @@ -239,6 +239,7 @@ export const fetchObservatoryNodes = async (): Promise => { page++; // Move to the next page } } + console.log("fetching nodes") return allNodes; }; diff --git a/explorer-v2/src/components/accountPageComponents/AccountBalancesCard.tsx b/explorer-v2/src/components/accountPageComponents/AccountBalancesCard.tsx index a7f07be196..4cc228e073 100644 --- a/explorer-v2/src/components/accountPageComponents/AccountBalancesCard.tsx +++ b/explorer-v2/src/components/accountPageComponents/AccountBalancesCard.tsx @@ -70,6 +70,9 @@ export const AccountBalancesCard = (props: IAccountBalancesCardProps) => { queryKey: ["accountBalance", address], queryFn: () => fetchAccountBalance(address), enabled: !!address, + staleTime: 10 * 60 * 1000, // 10 minutes + refetchOnWindowFocus: false, // Prevents unnecessary refetching + refetchOnReconnect: false, }); const { @@ -79,6 +82,9 @@ export const AccountBalancesCard = (props: IAccountBalancesCardProps) => { } = useQuery({ queryKey: ["nymPrice"], queryFn: fetchNymPrice, + staleTime: 10 * 60 * 1000, // 10 minutes + refetchOnWindowFocus: false, // Prevents unnecessary refetching + refetchOnReconnect: false, }); if (isLoading || isLoadingPrice) { @@ -120,9 +126,9 @@ export const AccountBalancesCard = (props: IAccountBalancesCardProps) => { const spendableAllocation = accountInfo.balances.length > 0 ? getAllocation( - Number(accountInfo.balances[0].amount), - Number(accountInfo.total_value.amount), - ) + Number(accountInfo.balances[0].amount), + Number(accountInfo.total_value.amount), + ) : 0; const delegationsNYM = getNymsFormated( diff --git a/explorer-v2/src/components/accountPageComponents/AccountInfoCard.tsx b/explorer-v2/src/components/accountPageComponents/AccountInfoCard.tsx index a252ef1ba2..17d99c6ca7 100644 --- a/explorer-v2/src/components/accountPageComponents/AccountInfoCard.tsx +++ b/explorer-v2/src/components/accountPageComponents/AccountInfoCard.tsx @@ -18,6 +18,9 @@ export const AccountInfoCard = (props: IAccountInfoCardProps) => { queryKey: ["accountBalance", address], queryFn: () => fetchAccountBalance(address), enabled: !!address, + staleTime: 10 * 60 * 1000, // 10 minutes + refetchOnWindowFocus: false, // Prevents unnecessary refetching + refetchOnReconnect: false, }); if (isLoading) { diff --git a/explorer-v2/src/components/landingPageComponents/NetworkStakeCard.tsx b/explorer-v2/src/components/landingPageComponents/NetworkStakeCard.tsx index be4cd9902b..4821be6462 100644 --- a/explorer-v2/src/components/landingPageComponents/NetworkStakeCard.tsx +++ b/explorer-v2/src/components/landingPageComponents/NetworkStakeCard.tsx @@ -15,6 +15,9 @@ export const NetworkStakeCard = () => { } = useQuery({ queryKey: ["noise"], queryFn: fetchNoise, + staleTime: 10 * 60 * 1000, // 10 minutes + refetchOnWindowFocus: false, // Prevents unnecessary refetching + refetchOnReconnect: false, }); if (isStakingLoading) { @@ -46,20 +49,20 @@ export const NetworkStakeCard = () => { packetsAndStaking[packetsAndStaking.length - 1]?.total_stake / 1_000_000; - const startDate = new Date("2025-02-26").getTime(); // Convert to timestamp + const startDate = new Date("2025-02-26").getTime(); // Convert to timestamp + + const data = packetsAndStakingData + .slice(0, -1) // Exclude the last element + .filter((item: IPacketsAndStakingData) => { + const itemDate = new Date(item.date_utc).getTime(); // Convert each date to timestamp + return itemDate >= startDate; // Compare timestamps + }) + .map((item: IPacketsAndStakingData) => ({ + date_utc: item.date_utc, + numericData: item.total_stake / 1000000, + })); + - const data = packetsAndStakingData - .slice(0, -1) // Exclude the last element - .filter((item: IPacketsAndStakingData) => { - const itemDate = new Date(item.date_utc).getTime(); // Convert each date to timestamp - return itemDate >= startDate; // Compare timestamps - }) - .map((item: IPacketsAndStakingData) => ({ - date_utc: item.date_utc, - numericData: item.total_stake / 1000000, - })); - - const stakeLineGraphData = { color: "#00CA33", diff --git a/explorer-v2/src/components/landingPageComponents/NoiseCard.tsx b/explorer-v2/src/components/landingPageComponents/NoiseCard.tsx index 08aff8c6aa..80e1b6c46a 100644 --- a/explorer-v2/src/components/landingPageComponents/NoiseCard.tsx +++ b/explorer-v2/src/components/landingPageComponents/NoiseCard.tsx @@ -13,6 +13,9 @@ export const NoiseCard = () => { const { data, isLoading, isError } = useQuery({ queryKey: ["noise"], queryFn: fetchNoise, + staleTime: 10 * 60 * 1000, // 10 minutes + refetchOnWindowFocus: false, // Prevents unnecessary refetching + refetchOnReconnect: false, }); if (isLoading) { @@ -43,7 +46,7 @@ export const NoiseCard = () => { const noiseLast24H = todaysData.total_packets_sent + todaysData.total_packets_received; - + const noisePrevious24H = yesterdaysData.total_packets_sent + yesterdaysData.total_packets_received; diff --git a/explorer-v2/src/components/landingPageComponents/StakersNumberCard.tsx b/explorer-v2/src/components/landingPageComponents/StakersNumberCard.tsx index 87759eefee..8b0765d04d 100644 --- a/explorer-v2/src/components/landingPageComponents/StakersNumberCard.tsx +++ b/explorer-v2/src/components/landingPageComponents/StakersNumberCard.tsx @@ -7,12 +7,15 @@ import ExplorerCard from "../cards/ExplorerCard"; export const RewardsCard = () => { const { - data: observatoryNodes, + data: nymNodes, isLoading, isError, } = useQuery({ - queryKey: ["observatoryNodes"], + queryKey: ["nymNodes"], queryFn: () => fetchObservatoryNodes(), + staleTime: 10 * 60 * 1000, // 10 minutes + refetchOnWindowFocus: false, // Prevents unnecessary refetching + refetchOnReconnect: false, }); if (isLoading) { @@ -23,7 +26,7 @@ export const RewardsCard = () => { ); } - if (isError || !observatoryNodes) { + if (isError || !nymNodes) { return ( @@ -38,7 +41,7 @@ export const RewardsCard = () => { 0, ); }; - const allStakers = getActiveStakersNumber(observatoryNodes); + const allStakers = getActiveStakersNumber(nymNodes); return ( diff --git a/explorer-v2/src/components/landingPageComponents/TokenomicsCard.tsx b/explorer-v2/src/components/landingPageComponents/TokenomicsCard.tsx index 4a7cab17e4..40cb9748a0 100644 --- a/explorer-v2/src/components/landingPageComponents/TokenomicsCard.tsx +++ b/explorer-v2/src/components/landingPageComponents/TokenomicsCard.tsx @@ -16,6 +16,9 @@ export const TokenomicsCard = () => { } = useQuery({ queryKey: ["nymPrice"], queryFn: fetchNymPrice, + staleTime: 10 * 60 * 1000, // 10 minutes + refetchOnWindowFocus: false, // Prevents unnecessary refetching + refetchOnReconnect: false, }); const { @@ -25,6 +28,9 @@ export const TokenomicsCard = () => { } = useQuery({ queryKey: ["epochRewards"], queryFn: fetchEpochRewards, + staleTime: 10 * 60 * 1000, // 10 minutes + refetchOnWindowFocus: false, // Prevents unnecessary refetching + refetchOnReconnect: false, }); const { @@ -34,6 +40,9 @@ export const TokenomicsCard = () => { } = useQuery({ queryKey: ["noise"], queryFn: fetchNoise, + staleTime: 10 * 60 * 1000, // 10 minutes + refetchOnWindowFocus: false, // Prevents unnecessary refetching + refetchOnReconnect: false, }); if (isLoading || isEpochLoading || isStakingLoading) { diff --git a/explorer-v2/src/components/nodeTable/NodeTableWithAction.tsx b/explorer-v2/src/components/nodeTable/NodeTableWithAction.tsx index 1786d17af8..160090590b 100644 --- a/explorer-v2/src/components/nodeTable/NodeTableWithAction.tsx +++ b/explorer-v2/src/components/nodeTable/NodeTableWithAction.tsx @@ -66,6 +66,9 @@ const NodeTableWithAction = () => { } = useQuery({ queryKey: ["epochRewards"], queryFn: fetchEpochRewards, + staleTime: 10 * 60 * 1000, // 10 minutes + refetchOnWindowFocus: false, // Prevents unnecessary refetching + refetchOnReconnect: false, }); // Use React Query to fetch Nym nodes @@ -76,6 +79,9 @@ const NodeTableWithAction = () => { } = useQuery({ queryKey: ["nymNodes"], queryFn: fetchObservatoryNodes, + staleTime: 10 * 60 * 1000, // 10 minutes + refetchOnWindowFocus: false, // Prevents unnecessary refetching + refetchOnReconnect: false, }); // Handle loading state diff --git a/explorer-v2/src/components/nymNodePageComponents/BasicInfoCard.tsx b/explorer-v2/src/components/nymNodePageComponents/BasicInfoCard.tsx index 8edca43ae6..a5e948d939 100644 --- a/explorer-v2/src/components/nymNodePageComponents/BasicInfoCard.tsx +++ b/explorer-v2/src/components/nymNodePageComponents/BasicInfoCard.tsx @@ -20,6 +20,9 @@ export const BasicInfoCard = ({ id }: IBasicInfoCardProps) => { } = useQuery({ queryKey: ["nodeInfo", id], queryFn: () => fetchNodeInfo(id), + staleTime: 10 * 60 * 1000, // 10 minutes + refetchOnWindowFocus: false, // Prevents unnecessary refetching + refetchOnReconnect: false, }); if (isLoading) { diff --git a/explorer-v2/src/components/nymNodePageComponents/NodeDataCard.tsx b/explorer-v2/src/components/nymNodePageComponents/NodeDataCard.tsx index 689b9f7550..d8a14919f9 100644 --- a/explorer-v2/src/components/nymNodePageComponents/NodeDataCard.tsx +++ b/explorer-v2/src/components/nymNodePageComponents/NodeDataCard.tsx @@ -20,6 +20,9 @@ export const NodeDataCard = ({ id }: INodeMetricsCardProps) => { } = useQuery({ queryKey: ["epochRewards"], queryFn: fetchEpochRewards, + staleTime: 10 * 60 * 1000, // 10 minutes + refetchOnWindowFocus: false, // Prevents unnecessary refetching + refetchOnReconnect: false, }); // Fetch node information @@ -30,6 +33,9 @@ export const NodeDataCard = ({ id }: INodeMetricsCardProps) => { } = useQuery({ queryKey: ["nodeInfo", id], queryFn: () => fetchNodeInfo(id), + staleTime: 10 * 60 * 1000, // 10 minutes + refetchOnWindowFocus: false, // Prevents unnecessary refetching + refetchOnReconnect: false, }); if (isEpochLoading || isNodeLoading) { diff --git a/explorer-v2/src/components/nymNodePageComponents/NodeDelegationsCard.tsx b/explorer-v2/src/components/nymNodePageComponents/NodeDelegationsCard.tsx index 3db9996a40..c4c05a891f 100644 --- a/explorer-v2/src/components/nymNodePageComponents/NodeDelegationsCard.tsx +++ b/explorer-v2/src/components/nymNodePageComponents/NodeDelegationsCard.tsx @@ -18,6 +18,9 @@ const NodeDelegationsCard = ({ id }: NodeDelegationsCardProps) => { } = useQuery({ queryKey: ["nodeDelegations", id], queryFn: () => fetchNodeDelegations(id), + staleTime: 10 * 60 * 1000, // 10 minutes + refetchOnWindowFocus: false, // Prevents unnecessary refetching + refetchOnReconnect: false, }); if (isLoading) { diff --git a/explorer-v2/src/components/nymNodePageComponents/NodeParametersCard.tsx b/explorer-v2/src/components/nymNodePageComponents/NodeParametersCard.tsx index 305896f3b0..f8426abb9d 100644 --- a/explorer-v2/src/components/nymNodePageComponents/NodeParametersCard.tsx +++ b/explorer-v2/src/components/nymNodePageComponents/NodeParametersCard.tsx @@ -21,6 +21,9 @@ export const NodeParametersCard = ({ id }: INodeParametersCardProps) => { } = useQuery({ queryKey: ["epochRewards"], queryFn: fetchEpochRewards, + staleTime: 10 * 60 * 1000, // 10 minutes + refetchOnWindowFocus: false, // Prevents unnecessary refetching + refetchOnReconnect: false, }); // Fetch node information @@ -31,6 +34,9 @@ export const NodeParametersCard = ({ id }: INodeParametersCardProps) => { } = useQuery({ queryKey: ["nodeInfo", id], queryFn: () => fetchNodeInfo(id), + staleTime: 10 * 60 * 1000, // 10 minutes + refetchOnWindowFocus: false, // Prevents unnecessary refetching + refetchOnReconnect: false, }); if (isEpochLoading || isNodeLoading) { diff --git a/explorer-v2/src/components/nymNodePageComponents/NodeProfileCard.tsx b/explorer-v2/src/components/nymNodePageComponents/NodeProfileCard.tsx index c55ddc4a7a..f603b9227f 100644 --- a/explorer-v2/src/components/nymNodePageComponents/NodeProfileCard.tsx +++ b/explorer-v2/src/components/nymNodePageComponents/NodeProfileCard.tsx @@ -42,6 +42,9 @@ export const NodeProfileCard = ({ id }: INodeProfileCardProps) => { } = useQuery({ queryKey: ["nodeInfo", id], queryFn: () => fetchNodeInfo(id), + staleTime: 10 * 60 * 1000, // 10 minutes + refetchOnWindowFocus: false, // Prevents unnecessary refetching + refetchOnReconnect: false, }); const handleStakeOnNode = async ({ diff --git a/explorer-v2/src/components/nymNodePageComponents/NodeRoleCard.tsx b/explorer-v2/src/components/nymNodePageComponents/NodeRoleCard.tsx index fdb24001af..ba94c6722f 100644 --- a/explorer-v2/src/components/nymNodePageComponents/NodeRoleCard.tsx +++ b/explorer-v2/src/components/nymNodePageComponents/NodeRoleCard.tsx @@ -152,6 +152,9 @@ export const NodeRoleCard = ({ id }: INodeRoleCardProps) => { } = useQuery({ queryKey: ["nodeInfo", id], queryFn: () => fetchNodeInfo(id), + staleTime: 10 * 60 * 1000, // 10 minutes + refetchOnWindowFocus: false, // Prevents unnecessary refetching + refetchOnReconnect: false, }); const { data: epochRewardsData, @@ -160,6 +163,9 @@ export const NodeRoleCard = ({ id }: INodeRoleCardProps) => { } = useQuery({ queryKey: ["epochRewards"], queryFn: fetchEpochRewards, + staleTime: 10 * 60 * 1000, // 10 minutes + refetchOnWindowFocus: false, // Prevents unnecessary refetching + refetchOnReconnect: false, }); // Extract node roles once `nodeInfo` is available @@ -177,6 +183,9 @@ export const NodeRoleCard = ({ id }: INodeRoleCardProps) => { queryKey: ["gatewayStatus", nodeInfo?.identity_key], queryFn: () => fetchGatewayStatus(nodeInfo?.identity_key || ""), enabled: !!nodeInfo?.identity_key && shouldFetchGatewayStatus, // ✅ Only fetch if needed + staleTime: 10 * 60 * 1000, // 10 minutes + refetchOnWindowFocus: false, // Prevents unnecessary refetching + refetchOnReconnect: false, }); if (isLoading || isEpochLoading) { diff --git a/explorer-v2/src/components/staking/OriginalStakeCard.tsx b/explorer-v2/src/components/staking/OriginalStakeCard.tsx index bfc0dde890..ed2f262ce2 100644 --- a/explorer-v2/src/components/staking/OriginalStakeCard.tsx +++ b/explorer-v2/src/components/staking/OriginalStakeCard.tsx @@ -19,6 +19,9 @@ const OriginalStakeCard = () => { queryKey: ["originalStake", address], queryFn: () => fetchOriginalStake(address || ""), enabled: !!address, // Only fetch if address exists + staleTime: 10 * 60 * 1000, // 10 minutes + refetchOnWindowFocus: false, // Prevents unnecessary refetching + refetchOnReconnect: false, }); if (!address) { diff --git a/explorer-v2/src/components/staking/StakeTableWithAction.tsx b/explorer-v2/src/components/staking/StakeTableWithAction.tsx index bdf24ef5e6..17ca0e93e8 100644 --- a/explorer-v2/src/components/staking/StakeTableWithAction.tsx +++ b/explorer-v2/src/components/staking/StakeTableWithAction.tsx @@ -64,6 +64,9 @@ const StakeTableWithAction = () => { } = useQuery({ queryKey: ["epochRewards"], queryFn: fetchEpochRewards, + staleTime: 10 * 60 * 1000, // 10 minutes + refetchOnWindowFocus: false, // Prevents unnecessary refetching + refetchOnReconnect: false, }); // Use React Query to fetch Nym nodes @@ -74,6 +77,9 @@ const StakeTableWithAction = () => { } = useQuery({ queryKey: ["nymNodes"], queryFn: fetchObservatoryNodes, + staleTime: 10 * 60 * 1000, // 10 minutes + refetchOnWindowFocus: false, // Prevents unnecessary refetching + refetchOnReconnect: false, }); // Handle loading state diff --git a/explorer-v2/src/components/staking/SubHeaderRowActions.tsx b/explorer-v2/src/components/staking/SubHeaderRowActions.tsx index 645f2462b3..514e01b299 100644 --- a/explorer-v2/src/components/staking/SubHeaderRowActions.tsx +++ b/explorer-v2/src/components/staking/SubHeaderRowActions.tsx @@ -59,6 +59,9 @@ const SubHeaderRowActions = () => { queryKey: ["totalStakerRewards", address], queryFn: () => fetchTotalStakerRewards(address || ""), enabled: !!address, // Only fetch if address is available + staleTime: 10 * 60 * 1000, // 10 minutes + refetchOnWindowFocus: false, // Prevents unnecessary refetching + refetchOnReconnect: false, }); const handleRefetch = useCallback(async () => { diff --git a/explorer-v2/src/components/staking/TotalRewardsCard.tsx b/explorer-v2/src/components/staking/TotalRewardsCard.tsx index 3017a7ca37..e39ae6c653 100644 --- a/explorer-v2/src/components/staking/TotalRewardsCard.tsx +++ b/explorer-v2/src/components/staking/TotalRewardsCard.tsx @@ -19,6 +19,9 @@ const TotalRewardsCard = () => { queryKey: ["totalStakerRewards", address], queryFn: () => fetchTotalStakerRewards(address || ""), enabled: !!address, // Only fetch if address exists + staleTime: 10 * 60 * 1000, // 10 minutes + refetchOnWindowFocus: false, // Prevents unnecessary refetching + refetchOnReconnect: false, }); if (!address) { diff --git a/explorer-v2/src/components/staking/TotalStakeCard.tsx b/explorer-v2/src/components/staking/TotalStakeCard.tsx index 020d0c73a6..dc203eadd6 100644 --- a/explorer-v2/src/components/staking/TotalStakeCard.tsx +++ b/explorer-v2/src/components/staking/TotalStakeCard.tsx @@ -19,6 +19,9 @@ const TotalStakeCard = () => { queryKey: ["totalStake", address], queryFn: () => fetchBalances(address || ""), enabled: !!address, // Only fetch if address exists + staleTime: 10 * 60 * 1000, // 10 minutes + refetchOnWindowFocus: false, // Prevents unnecessary refetching + refetchOnReconnect: false, }); if (!address) { diff --git a/explorer-v2/src/providers/QueryProvider.tsx b/explorer-v2/src/providers/QueryProvider.tsx index 00e9a75db2..c757fb8f1c 100644 --- a/explorer-v2/src/providers/QueryProvider.tsx +++ b/explorer-v2/src/providers/QueryProvider.tsx @@ -11,7 +11,6 @@ interface QueryProviderProps { export const QueryProvider = ({ children }: QueryProviderProps) => { // Create QueryClient instance const [queryClient] = useState(() => new QueryClient()); - return ( {children}