Implement RTK Query approach for fetching wpcom sites

common/lib/cache-function-ttl.ts

@@ -31,7 +31,7 @@ export function cacheFunctionTTL< Args extends unknown[], Return >(
 }
 
 function pruneCache(): void {
-	for ( const [ fn, cachedResults ] of cache ) {
+	for ( const [ _, cachedResults ] of cache ) {
 		for ( const cachedResult of cachedResults ) {
 			if ( Date.now() - cachedResult.timestamp >= cachedResult.ttl ) {
 				cachedResults.delete( cachedResult );

src/components/publish-site-button.tsx

@@ -1,5 +1,6 @@
 import { cloudUpload } from '@wordpress/icons';
 import { useI18n } from '@wordpress/react-i18n';
+import { useCallback } from 'react';
 import Button from 'src/components/button';
 import { Tooltip } from 'src/components/tooltip';
 import { useSyncSites } from 'src/hooks/sync-sites';
@@ -12,24 +13,38 @@ import {
 	connectedSitesActions,
 	useGetConnectedSitesForLocalSiteQuery,
 } from 'src/stores/sync/connected-sites';
+import { useGetWpComSitesQuery } from 'src/stores/sync/wpcom-sites';
 
 export const PublishSiteButton = () => {
 	const { __ } = useI18n();
 	const dispatch = useAppDispatch();
 	const { setSelectedTab } = useContentTabs();
-	const { user } = useAuth();
+	const { user, isAuthenticated } = useAuth();
 	const { selectedSite } = useSiteDetails();
 	const { data: connectedSites = [] } = useGetConnectedSitesForLocalSiteQuery( {
 		localSiteId: selectedSite?.id,
 		userId: user?.id,
 	} );
 	const { isAnySitePulling, isAnySitePushing } = useSyncSites();
 	const { streamlineOnboarding } = useFeatureFlags();
+
+	const connectedSiteIds = connectedSites.map( ( { id } ) => id );
+	const { isUninitialized: isUninitializedSyncSites, refetch: refetchWpComSites } =
+		useGetWpComSitesQuery( { connectedSiteIds, userId: user?.id } );
+
 	const isAnySiteSyncing = isAnySitePulling || isAnySitePushing;
-	const handlePublishClick = () => {
+
+	const handlePublishClick = useCallback( () => {
 		setSelectedTab( 'sync' );
+		if ( isAuthenticated && ! isUninitializedSyncSites ) {
+			refetchWpComSites().catch( ( error ) => {
+				// Query might not be ready to refetch yet (e.g., was skipped due to offline)
+				// Silently ignore the error as the query will start automatically when conditions are met
+				console.warn( 'Failed to refetch sites on modal open:', error );
+			} );
+		}
 		dispatch( connectedSitesActions.openModal( 'push' ) );
-	};
+	}, [ setSelectedTab, dispatch, isAuthenticated, isUninitializedSyncSites, refetchWpComSites ] );
 
 	if ( ! streamlineOnboarding || connectedSites.length !== 0 ) return null;
 

src/hooks/sync-sites/sync-sites-context.tsx

@@ -10,22 +10,16 @@ import {
 	mapImportResponseToPushState,
 } from 'src/hooks/sync-sites/use-sync-push';
 import { useAuth } from 'src/hooks/use-auth';
-import { useFetchWpComSites } from 'src/hooks/use-fetch-wpcom-sites';
 import { useFormatLocalizedTimestamps } from 'src/hooks/use-format-localized-timestamps';
-import { useSiteDetails } from 'src/hooks/use-site-details';
 import { useSyncStatesProgressInfo } from 'src/hooks/use-sync-states-progress-info';
 import { getIpcApi } from 'src/lib/get-ipc-api';
-import {
-	useGetConnectedSitesForLocalSiteQuery,
-	useUpdateSiteTimestampMutation,
-} from 'src/stores/sync/connected-sites';
+import { useUpdateSiteTimestampMutation } from 'src/stores/sync/connected-sites';
 import type { ImportResponse } from 'src/hooks/use-sync-states-progress-info';
 
 type GetLastSyncTimeText = ( timestamp: string | null, type: 'pull' | 'push' ) => string;
 
 export type SyncSitesContextType = Omit< UseSyncPull, 'pullStates' > &
-	Omit< UseSyncPush, 'pushStates' > &
-	ReturnType< typeof useFetchWpComSites > & {
+	Omit< UseSyncPush, 'pushStates' > & {
 		getLastSyncTimeText: GetLastSyncTimeText;
 	};
 
@@ -53,13 +47,6 @@ export function SyncSitesProvider( { children }: { children: React.ReactNode } )
 		[ formatRelativeTime ]
 	);
 
-	const { selectedSite } = useSiteDetails();
-	const { user } = useAuth();
-	const { data: connectedSites = [] } = useGetConnectedSitesForLocalSiteQuery( {
-		localSiteId: selectedSite?.id,
-		userId: user?.id,
-	} );
-
 	const [ updateSiteTimestamp ] = useUpdateSiteTimestampMutation();
 
 	const { pullSite, isAnySitePulling, isSiteIdPulling, clearPullState, getPullState, cancelPull } =
@@ -79,10 +66,7 @@ export function SyncSitesProvider( { children }: { children: React.ReactNode } )
 				updateSiteTimestamp( { siteId: remoteSiteId, localSiteId, type: 'push' } ),
 		} );
 
-	const { syncSites, isFetching, refetchSites } = useFetchWpComSites(
-		connectedSites.map( ( { id } ) => id )
-	);
-	useListenDeepLinkConnection( { refetchSites } );
+	useListenDeepLinkConnection();
 
 	const { client } = useAuth();
 	const { pushStatesProgressInfo } = useSyncStatesProgressInfo();
@@ -154,9 +138,6 @@ export function SyncSitesProvider( { children }: { children: React.ReactNode } )
 				isSiteIdPulling,
 				clearPullState,
 				cancelPull,
-				syncSites,
-				refetchSites,
-				isFetching,
 				getPullState,
 				getPushState,
 				pushSite,

src/hooks/sync-sites/use-listen-deep-link-connection.ts

@@ -1,21 +1,32 @@
-import { SyncSitesContextType } from 'src/hooks/sync-sites/sync-sites-context';
+import { useAuth } from 'src/hooks/use-auth';
 import { useContentTabs } from 'src/hooks/use-content-tabs';
 import { useIpcListener } from 'src/hooks/use-ipc-listener';
 import { useSiteDetails } from 'src/hooks/use-site-details';
-import { useConnectSiteMutation } from 'src/stores/sync/connected-sites';
+import {
+	useConnectSiteMutation,
+	useGetConnectedSitesForLocalSiteQuery,
+} from 'src/stores/sync/connected-sites';
+import { useGetWpComSitesQuery } from 'src/stores/sync/wpcom-sites';
 
-export function useListenDeepLinkConnection( {
-	refetchSites,
-}: {
-	refetchSites: SyncSitesContextType[ 'refetchSites' ];
-} ) {
+export function useListenDeepLinkConnection() {
 	const [ connectSite ] = useConnectSiteMutation();
 	const { selectedSite, setSelectedSiteId } = useSiteDetails();
 	const { setSelectedTab, selectedTab } = useContentTabs();
+	const { user } = useAuth();
+	const { data: connectedSites = [] } = useGetConnectedSitesForLocalSiteQuery( {
+		localSiteId: selectedSite?.id,
+		userId: user?.id,
+	} );
+	const connectedSiteIds = connectedSites.map( ( { id } ) => id );
+	const { refetch: refetchWpComSites } = useGetWpComSitesQuery( {
+		connectedSiteIds,
+		userId: user?.id,
+	} );
 
 	useIpcListener( 'sync-connect-site', async ( _event, { remoteSiteId, studioSiteId } ) => {
 		// Fetch latest sites from network before checking
-		const latestSites = await refetchSites();
+		const result = await refetchWpComSites();
+		const latestSites = result.data ?? [];
 		const newConnectedSite = latestSites.find( ( site ) => site.id === remoteSiteId );
 		if ( newConnectedSite ) {
 			if ( selectedSite?.id && selectedSite.id !== studioSiteId ) {

src/hooks/sync-sites/use-sync-pull.ts

@@ -20,7 +20,7 @@ import {
 } from 'src/hooks/use-sync-states-progress-info';
 import { getIpcApi } from 'src/lib/get-ipc-api';
 import { getHostnameFromUrl } from 'src/lib/url-utils';
-import type { SyncSite } from 'src/hooks/use-fetch-wpcom-sites/types';
+import type { SyncSite } from 'src/modules/sync/types';
 import type { SyncOption } from 'src/types';
 
 export type SyncBackupState = {

src/hooks/sync-sites/use-sync-push.ts

@@ -17,8 +17,8 @@ import {
 } from 'src/hooks/use-sync-states-progress-info';
 import { getIpcApi } from 'src/lib/get-ipc-api';
 import { getHostnameFromUrl } from 'src/lib/url-utils';
-import type { SyncSite } from 'src/hooks/use-fetch-wpcom-sites/types';
 import type { ImportResponse } from 'src/hooks/use-sync-states-progress-info';
+import type { SyncSite } from 'src/modules/sync/types';
 import type { SyncOption } from 'src/types';
 
 export type SyncPushState = {

src/hooks/tests/get-sync-support.test.ts

@@ -1,4 +1,4 @@
-import { getSyncSupport } from 'src/hooks/use-fetch-wpcom-sites';
+import { getSyncSupport } from 'src/modules/sync/lib/sync-support';
 
 // Mocks for site shapes
 const baseSite = {

src/hooks/tests/reconcile-connected-sites.test.ts

@@ -1,5 +1,5 @@
-import { reconcileConnectedSites } from 'src/hooks/use-fetch-wpcom-sites/reconcile-connected-sites';
-import type { SyncSite } from 'src/hooks/use-fetch-wpcom-sites/types';
+import { reconcileConnectedSites } from 'src/modules/sync/lib/reconcile-connected-sites';
+import type { SyncSite } from 'src/modules/sync/types';
 
 describe( 'reconcileConnectedSites', () => {
 	test( 'should update relevant properties', () => {

src/hooks/tests/use-add-site.test.tsx

@@ -9,7 +9,7 @@ import { useSiteDetails } from 'src/hooks/use-site-details';
 import { getWordPressProvider } from 'src/lib/wordpress-provider';
 import { store } from 'src/stores';
 import { setProviderConstants } from 'src/stores/provider-constants-slice';
-import type { SyncSite } from 'src/hooks/use-fetch-wpcom-sites/types';
+import type { SyncSite } from 'src/modules/sync/types';
 
 jest.mock( 'src/hooks/use-site-details' );
 jest.mock( 'src/hooks/use-feature-flags' );

src/hooks/use-add-site.ts

@@ -14,7 +14,7 @@ import {
 	selectDefaultWordPressVersion,
 } from 'src/stores/provider-constants-slice';
 import { useConnectSiteMutation } from 'src/stores/sync/connected-sites';
-import type { SyncSite } from 'src/hooks/use-fetch-wpcom-sites/types';
+import type { SyncSite } from 'src/modules/sync/types';
 import type { Blueprint } from 'src/stores/wpcom-api';
 import type { SyncOption } from 'src/types';