[FIX] Too many REST API requests (#26330)

apps/meteor/app/apps/client/gameCenter/tabBar.ts

 import { useMemo } from 'react';
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
 
 import { addAction } from '../../../../client/views/room/lib/Toolbox';
-import { useEndpointData } from '../../../../client/hooks/useEndpointData';
-import { AsyncStatePhase } from '../../../../client/hooks/useAsyncState';
 
 addAction('game-center', () => {
-	const { value = { externalComponents: [] }, phase: state, error } = useEndpointData('/apps/externalComponents');
+	const getExternalComponents = useEndpoint('GET', '/apps/externalComponents');
+	const result = useQuery(['apps/external-components'], () => getExternalComponents(), {
+		staleTime: 10_000,
+	});
 
-	const hasExternalComponents = value && value.externalComponents.length > 0;
-	const hasError = !!error;
 	return useMemo(
 		() =>
-			state === AsyncStatePhase.RESOLVED && !hasError && hasExternalComponents
+			result.isSuccess && result.data.externalComponents.length > 0
 				? {
 						groups: ['channel', 'group', 'direct', 'direct_multiple', 'team'],
 						id: 'game-center',
@@ -21,6 +22,6 @@ addAction('game-center', () => {
 						order: -1,
 				  }
 				: null,
-		[hasError, hasExternalComponents, state],
+		[result.data?.externalComponents.length, result.isSuccess],
 	);
 });

apps/meteor/app/ui/client/views/app/room.js

@@ -27,6 +27,8 @@ import { RoomManager as NewRoomManager } from '../../../../../client/lib/RoomMan
 import { isLayoutEmbedded } from '../../../../../client/lib/utils/isLayoutEmbedded';
 import { handleError } from '../../../../../client/lib/utils/handleError';
 import { roomCoordinator } from '../../../../../client/lib/rooms/roomCoordinator';
+import { queryClient } from '../../../../../client/lib/queryClient';
+import { call } from '../../../../../client/lib/utils/call';
 
 export const chatMessages = {};
 
@@ -750,16 +752,24 @@ Meteor.startup(() => {
 			this.tabBar.close();
 		};
 
-		Meteor.call('getRoomRoles', this.data._id, function (error, results) {
-			if (error) {
+		queryClient
+			.fetchQuery({
+				queryKey: ['room', this.data._id, 'roles'],
+				queryFn: () => call('getRoomRoles', this.data._id),
+				staleTime: 15_000,
+			})
+			.then((results) => {
+				Array.from(results).forEach(({ _id, ...data }) => {
+					const {
+						rid,
+						u: { _id: uid },
+					} = data;
+					RoomRoles.upsert({ rid, 'u._id': uid }, data);
+				});
+			})
+			.catch((error) => {
 				handleError(error);
-			}
-
-			return Array.from(results).forEach((record) => {
-				delete record._id;
-				RoomRoles.upsert({ 'rid': record.rid, 'u._id': record.u._id }, record);
 			});
-		});
 
 		this.rolesObserve = RoomRoles.find({ rid: this.data._id }).observe({
 			added: (role) => {

apps/meteor/ee/client/lib/onToggledFeature.ts

@@ -17,6 +17,7 @@ export const onToggledFeature = (
 	const observer = new QueryObserver(queryClient, {
 		queryKey: ['ee.features'],
 		queryFn: fetchFeatures,
+		staleTime: Infinity,
 	});
 
 	let enabled = false;