From 03fafd0d5de92c315f42bcbb9cfe213da1389b6e Mon Sep 17 00:00:00 2001
From: Rafael Agostini <rafael.agostini@automattic.com>
Date: Thu, 16 Jan 2025 20:55:05 -0500
Subject: [PATCH] Update to prevent fetch location API if tab is gated

---
 .../stats-locations/stats-locations.tsx       |  6 +++--
 .../stats/hooks/use-location-views-query.ts   | 26 +++++++++++++------
 2 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/client/my-sites/stats/features/modules/stats-locations/stats-locations.tsx b/client/my-sites/stats/features/modules/stats-locations/stats-locations.tsx
index bd100ea100b7f..151717bc2b57c 100644
--- a/client/my-sites/stats/features/modules/stats-locations/stats-locations.tsx
+++ b/client/my-sites/stats/features/modules/stats-locations/stats-locations.tsx
@@ -94,7 +94,9 @@ const StatsLocations: React.FC< StatsModuleLocationsProps > = ( { query, summary
 		data = [],
 		isLoading: isRequestingData,
 		isError,
-	} = useLocationViewsQuery< StatsLocationViewsData >( siteId, geoMode, query );
+	} = useLocationViewsQuery< StatsLocationViewsData >( siteId, geoMode, query, {
+		enabled: ! shouldGate,
+	} );
 
 	const changeViewButton = ( selection: SelectOptionType ) => {
 		const filter = selection.value;
@@ -163,7 +165,7 @@ const StatsLocations: React.FC< StatsModuleLocationsProps > = ( { query, summary
 			{ ! shouldGateStatsModule && siteId && statType && (
 				<QuerySiteStats statType={ statType } siteId={ siteId } query={ query } />
 			) }
-			{ isRequestingData && (
+			{ isRequestingData && ! shouldGate && (
 				<StatsCardSkeleton isLoading={ isRequestingData } title={ title } type={ 3 } withHero />
 			) }
 			{ ( ( ! isRequestingData && ! isError && hasLocationData ) || shouldGate ) && (
diff --git a/client/my-sites/stats/hooks/use-location-views-query.ts b/client/my-sites/stats/hooks/use-location-views-query.ts
index c40ade21cef8c..b1a200950d960 100644
--- a/client/my-sites/stats/hooks/use-location-views-query.ts
+++ b/client/my-sites/stats/hooks/use-location-views-query.ts
@@ -1,4 +1,4 @@
-import { useQuery } from '@tanstack/react-query';
+import { useQuery, UseQueryOptions } from '@tanstack/react-query';
 import wpcom from 'calypso/lib/wp';
 import { normalizers } from 'calypso/state/stats/lists/utils';
 import getDefaultQueryParams from './default-query-params';
@@ -19,25 +19,35 @@ function queryStatsLocationViews(
 	return wpcom.req.get( `/sites/${ siteId }/stats/location-views/${ geoMode }`, query );
 }
 
+// For now, we are only allowing the enabled option to be passed.
+// We can add more options later if needed.
+type CustomQueryOptions< TData = unknown, TError = Error > = Pick<
+	UseQueryOptions< TData, TError >,
+	'enabled'
+>;
+
 const useLocationViewsQuery = < T = StatsLocationViewsData >(
 	siteId: number,
 	geoMode: 'country' | 'region' | 'city',
-	query: QueryStatsParams
+	query: QueryStatsParams,
+	options?: CustomQueryOptions< T, Error >
 ) => {
 	return useQuery( {
 		...getDefaultQueryParams(),
-		queryKey: [ 'stats', 'location-views', siteId, geoMode, query ],
-		queryFn: () =>
-			queryStatsLocationViews( siteId, geoMode, processQueryParams( query ) ) as Promise< T >,
+		...options,
+		queryKey: [ 'stats', 'location-views', siteId, geoMode, JSON.stringify( query ) ],
+		queryFn: () => queryStatsLocationViews( siteId, geoMode, processQueryParams( query ) ),
 		select: ( data ) => {
 			const normalizedStats = normalizers.statsCountryViews(
 				data as StatsLocationViewsData,
 				query
 			);
 
-			return Array.isArray( normalizedStats ) && normalizedStats?.length && query?.max
-				? normalizedStats.slice( 0, query.max )
-				: normalizedStats;
+			if ( ! Array.isArray( normalizedStats ) ) {
+				return [];
+			}
+
+			return query?.max ? normalizedStats.slice( 0, query.max ) : normalizedStats;
 		},
 		staleTime: 1000 * 60 * 5, // Cache for 5 minutes
 	} );