feat(refactor): @apollo/client v3 - v4 migration

packages/app/src/StakingApi/UnclaimedRewardsApi.tsx

@@ -18,10 +18,10 @@ export const UnclaimedRewardsApi = ({ who, network }: Props) => {
 
 	// Update unclaimed rewards on total change
 	useEffect(() => {
-		if (!loading && !error && data?.unclaimedRewards) {
-			setUnclaimedRewards(data?.unclaimedRewards)
+		if (!loading && !error) {
+			setUnclaimedRewards(data.unclaimedRewards)
 		}
-	}, [data?.unclaimedRewards.total])
+	}, [data.unclaimedRewards.total])
 
 	return null
 }

packages/app/src/canvas/Pool/Overview/Performance/ActiveGraph.tsx

@@ -29,16 +29,20 @@ export const ActiveGraph = ({
 	const { i18n, t } = useTranslation()
 	const { getThemeValue } = useThemeValues()
 	const { unit } = getStakingChainData(network)
-	const { data, loading, error } = useRewards({
+	const {
+		data: { allRewards },
+		loading,
+		error,
+	} = useRewards({
 		network,
 		who: stash,
 		fromEra,
 	})
 
 	const list =
-		loading || error || data?.allRewards === undefined
+		loading || error
 			? []
-			: data.allRewards.map((reward) => ({
+			: allRewards.map((reward) => ({
 					era: reward.era,
 					reward: planckToUnit(reward.reward, units),
 					start: reward.timestamp,

packages/app/src/canvas/Pool/index.tsx

@@ -56,8 +56,8 @@ export const Pool = () => {
 	// pools
 	const getPoolCandidates = async () => {
 		if (pluginEnabled('staking_api')) {
-			const result = await fetchPoolCandidates(network)
-			return result?.poolCandidates || []
+			const { poolCandidates } = await fetchPoolCandidates(network)
+			return poolCandidates
 		} else {
 			return bondedPools
 				.filter(({ state }) => state === 'Open')

packages/app/src/canvas/PoolMembers/Lists/FetchPage.tsx

@@ -47,15 +47,15 @@ export const MembersListInner = ({
 				fetchingMemberList.current = true
 				// Calculate offset based on page number (1-indexed)
 				const offset = (page - 1) * itemsPerPage
-				const result = await fetchPoolMembers(
+				const { poolMembers } = await fetchPoolMembers(
 					network,
 					poolId,
 					itemsPerPage,
 					offset,
 				)
 				fetchingMemberList.current = false
-				if (result?.members) {
-					fetchPoolMemberData(result.members.map(({ address }) => address))
+				if (poolMembers.members.length > 0) {
+					fetchPoolMemberData(poolMembers.members.map(({ address }) => address))
 				}
 				setFetchedPoolMembersApi('synced')
 			}

packages/app/src/canvas/ValidatorMetrics/EraPoints/ActiveGraph.tsx

@@ -30,11 +30,7 @@ export const ActiveGraph = ({
 		fromEra,
 	})
 
-	const list =
-		loading || error || data?.validatorEraPoints === undefined
-			? []
-			: data.validatorEraPoints
-
+	const list = loading || error ? [] : data.validatorEraPoints
 	const sorted = [...list].sort((a, b) => a.era - b.era)
 
 	return (

packages/app/src/canvas/ValidatorMetrics/Rewards/ActiveGraph.tsx

@@ -34,7 +34,7 @@ export const ActiveGraph = ({
 	const { units, unit } = getStakingChainData(network)
 
 	const list =
-		loading || error || data?.validatorRewards === undefined
+		loading || error
 			? []
 			: data.validatorRewards.map((reward) => ({
 					era: reward.era,

packages/app/src/contexts/ActiveStaker/index.tsx

@@ -27,12 +27,12 @@ export const ActiveStakerProvider = ({ children }: { children: ReactNode }) => {
 
 	// Active nominator data from Staking API
 	const [activeNominatorData, setActiveNominatorData] = useState<
-		ActiveStatusWithNominees | null | undefined
+		ActiveStatusWithNominees | undefined
 	>(undefined)
 
 	// Active pool data from Staking API
 	const [activePoolData, setActivePoolData] = useState<
-		ActiveStatusWithNominees | null | undefined
+		ActiveStatusWithNominees | undefined
 	>(undefined)
 
 	// Handle fetching of active nominator status

packages/app/src/contexts/EraStakers/index.tsx

@@ -214,8 +214,11 @@ export const EraStakersProvider = ({ children }: { children: ReactNode }) => {
 
 	// Fetches and sets the total active nominators for the current era
 	const handleEraTotalNominators = async () => {
-		const result = await fetchEraTotalNominators(network, activeEra.index)
-		setActiveNominatorsCount(result || 0)
+		const { eraTotalNominators } = await fetchEraTotalNominators(
+			network,
+			activeEra.index,
+		)
+		setActiveNominatorsCount(eraTotalNominators.totalNominators)
 	}
 
 	// Fetches and sets the previous era's reward points

packages/app/src/contexts/TokenPrice/index.tsx

@@ -30,10 +30,10 @@ export const TokenPricesProvider = ({ children }: { children: ReactNode }) => {
 		useState<TokenPricesContextInterface>(defaultTokenPrice)
 
 	const getTokenPrice = async () => {
-		const result = await fetchTokenPrice(
+		const { tokenPrice } = await fetchTokenPrice(
 			`${unit}${currency}${currency === 'USD' ? 'T' : ''}`,
 		)
-		setTokenPrice(result || defaultTokenPrice)
+		setTokenPrice(tokenPrice || defaultTokenPrice)
 	}
 
 	useEffect(() => {

packages/app/src/contexts/Validators/ValidatorEntries/index.tsx

@@ -302,10 +302,12 @@ export const ValidatorsProvider = ({ children }: { children: ReactNode }) => {
 	}
 
 	const getValidatorStats = async (): Promise<void> => {
-		const result = await fetchValidatorStats(network)
-		setActiveValidatorRanks(result.activeValidatorRanks)
-		setAvgCommission(Number(result.averageValidatorCommission.toFixed(2)))
-		setAvgRewardRate(result.averageRewardRate.rate)
+		const { validatorStats } = await fetchValidatorStats(network)
+		setActiveValidatorRanks(validatorStats.activeValidatorRanks)
+		setAvgCommission(
+			Number(validatorStats.averageValidatorCommission.toFixed(2)),
+		)
+		setAvgRewardRate(validatorStats.averageRewardRate.rate)
 	}
 
 	const getValidatorRank = (validator: string): number | undefined => {

packages/app/src/library/GenerateNominations/Prompts/SearchValidators.tsx

@@ -49,16 +49,15 @@ export const SearchValidators = ({ callback, nominations }: PromptProps) => {
 			setIsSearching(true)
 			try {
 				const result = await fetchSearchValidators(network, term)
-				if (result) {
-					const transformedValidators: Validator[] = result.validators.map(
-						(validator) => ({
+				if (result.searchValidators.validators.length > 0) {
+					const transformedValidators: Validator[] =
+						result.searchValidators.validators.map((validator) => ({
 							address: validator.address,
 							prefs: {
 								commission: validator.commission,
 								blocked: validator.blocked,
 							},
-						}),
-					)
+						}))
 					setSearchResults(transformedValidators)
 				} else {
 					setSearchResults([])

packages/app/src/pages/Overview/Payouts/ActiveGraph.tsx

@@ -48,21 +48,22 @@ export const ActiveGraph = ({
 	fromDate.setDate(fromDate.getDate() - days)
 	fromDate.setHours(0, 0, 0, 0)
 
-	const { data: poolRewardsData, loading: poolRewardsLoading } = usePoolRewards(
-		{
-			network,
-			who: activeAddress || '',
-			from: getUnixTime(fromDate),
-		},
-	)
+	const {
+		data: { poolRewards },
+		loading: poolRewardsLoading,
+	} = usePoolRewards({
+		network,
+		who: activeAddress || '',
+		from: getUnixTime(fromDate),
+	})
 
-	const nominatorRewards = nominatorRewardData?.allRewards ?? []
+	const nominatorRewards = nominatorRewardData.allRewards
 	const payouts =
 		nominatorRewards.filter((reward: NominatorReward) => reward.claimed) ?? []
 	const unclaimedPayouts =
 		nominatorRewards.filter((reward: NominatorReward) => !reward.claimed) ?? []
 
-	const poolClaims = poolRewardsData?.poolRewards ?? []
+	const poolClaims = poolRewards ?? []
 	const allRewards = (nominatorRewards as RewardResults)
 		.concat(poolClaims)
 		.sort((a, b) => b.timestamp - a.timestamp)

packages/app/src/pages/Rewards/Stats/RewardTrend.tsx

@@ -39,10 +39,10 @@ export const RewardTrend = () => {
 	// Fetch the reward trend on account, network changes. Ensure the active era is greater than 0
 	const getRewardTrend = async () => {
 		if (activeAddress && activeEra.index > 0) {
-			const result = membership
+			const { rewardTrend } = membership
 				? await fetchPoolRewardTrend(network, activeAddress, duration)
 				: await fetchNominatorRewardTrend(network, activeAddress, eras)
-			setRewardTrend(result)
+			setRewardTrend(rewardTrend)
 		}
 	}
 

packages/app/src/pages/Rewards/index.tsx

@@ -53,7 +53,7 @@ export const Rewards = () => {
 	const getPayoutData = async () => {
 		const fromDate = subDays(startOfToday(), MaxPayoutDays)
 
-		const [allRewards, poolRewards] = await Promise.all([
+		const [{ allRewards }, { poolRewards }] = await Promise.all([
 			fetchRewards(
 				network,
 				activeAddress || '',
@@ -64,8 +64,10 @@ export const Rewards = () => {
 
 		const payouts =
 			allRewards.filter((reward: NominatorReward) => reward.claimed) ?? []
+
 		const unclaimedPayouts =
 			allRewards.filter((reward: NominatorReward) => !reward.claimed) ?? []
+
 		const poolClaims = poolRewards ?? []
 
 		// Filter zero rewards and order via timestamp, most recent first

packages/global-bus/src/networkConfig/util.ts

@@ -11,7 +11,7 @@ import { DefaultNetwork, NetworkList, SystemChainList } from 'consts/networks'
 import { getDefaultRpcEndpoints, getEnabledNetworks } from 'consts/util'
 import { fetchRpcEndpointHealth } from 'plugin-staking-api'
 import type {
-	RpcEndpointChainHealth,
+	RpcEndpointHealthData,
 	RpcHealthLabels,
 } from 'plugin-staking-api/types'
 import type {
@@ -95,13 +95,13 @@ export const getInitialRpcEndpoints = async (
 			const result = (await withTimeout(
 				2000,
 				fetchRpcEndpointHealth(network),
-			)) as RpcEndpointChainHealth | undefined
+			)) as RpcEndpointHealthData | undefined
 
 			// Cache the fresh data if it was successfully fetched
-			if (result && result.chains.length > 0) {
+			if (result && result.rpcEndpointHealth.chains.length > 0) {
 				// Format result to only include endpoint labels
 				const healthLabels: RpcHealthLabels = {
-					chains: result.chains.map((chain) => ({
+					chains: result.rpcEndpointHealth.chains.map((chain) => ({
 						...chain,
 						endpoints: chain.endpoints.map((endpoint) => endpoint.label),
 					})),

packages/plugin-staking-api/package.json

@@ -13,7 +13,8 @@
 		"./types": "./src/types.ts"
 	},
 	"dependencies": {
-		"@apollo/client": "^3.13.9",
-		"graphql": "^16.11.0"
+		"@apollo/client": "^4.0.11",
+		"graphql": "^16.11.0",
+		"rxjs": "^7.8.2"
 	}
 }

packages/plugin-staking-api/src/Client.ts

@@ -1,13 +1,15 @@
 // Copyright 2025 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import { ApolloClient, InMemoryCache } from '@apollo/client'
+import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client'
 
 const STAKING_API_ENDPOINT = 'https://api.staking.polkadot.cloud'
 
 const client = new ApolloClient({
-	uri: STAKING_API_ENDPOINT,
 	cache: new InMemoryCache(),
+	link: new HttpLink({
+		uri: STAKING_API_ENDPOINT,
+	}),
 })
 
 export { client }

packages/plugin-staking-api/src/index.ts

@@ -1,12 +1,11 @@
 // Copyright 2025 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import { ApolloProvider } from '@apollo/client'
+import { ApolloProvider } from '@apollo/client/react'
 
 export * from './Client'
 export * from './queries/eraTotalNominators'
 export * from './queries/getStakerWithNominees'
-export * from './queries/isActiveStaker'
 export * from './queries/nominatorRewardTrend'
 export * from './queries/poolCandidates'
 export * from './queries/poolEraPoints'

packages/plugin-staking-api/src/queries/activeValidatorRanks.ts

@@ -1,9 +1,9 @@
 // Copyright 2025 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import { gql, useQuery } from '@apollo/client'
+import { gql } from '@apollo/client'
 import { client } from '../Client'
-import type { ActiveValidatorRank, ActiveValidatorRanksResult } from '../types'
+import type { ActiveValidatorRanksData } from '../types'
 
 const QUERY = gql`
   query ActiveValidatorRanks($network: String!) {
@@ -14,29 +14,20 @@ const QUERY = gql`
   }
 `
 
-export const useActiveValidatorRanks = ({
-	network,
-}: {
-	network: string
-}): ActiveValidatorRanksResult => {
-	const { loading, error, data, refetch } = useQuery(QUERY, {
-		variables: { network },
-	})
-	return { loading, error, data, refetch }
+const DEFAULT: ActiveValidatorRanksData = {
+	activeValidatorRanks: [],
 }
 
 export const fetchActiveValidatorRanks = async (
 	network: string,
-): Promise<{ activeValidatorRanks: ActiveValidatorRank[] }> => {
+): Promise<ActiveValidatorRanksData> => {
 	try {
-		const result = await client.query({
+		const result = await client.query<ActiveValidatorRanksData>({
 			query: QUERY,
 			variables: { network },
 		})
-		return result.data
+		return result?.data || DEFAULT
 	} catch {
-		return {
-			activeValidatorRanks: [],
-		}
+		return DEFAULT
 	}
 }