chore: Upgrade `@tanstack/query` to v5 (#33898)

Co-authored-by: Tasso <tasso.evangelista@rocket.chat>

apps/meteor/app/livechat/client/lib/stream/queueManager.ts

@@ -29,14 +29,14 @@ const events = {
 };
 
 const invalidateRoomQueries = async (rid: string) => {
-	await queryClient.invalidateQueries(['rooms', { reference: rid, type: 'l' }]);
-	queryClient.removeQueries(['rooms', rid]);
-	queryClient.removeQueries(['/v1/rooms.info', rid]);
+	await queryClient.invalidateQueries({ queryKey: ['rooms', { reference: rid, type: 'l' }] });
+	queryClient.removeQueries({ queryKey: ['rooms', rid] });
+	queryClient.removeQueries({ queryKey: ['/v1/rooms.info', rid] });
 };
 
 const removeInquiry = async (inquiry: ILivechatInquiryRecord) => {
 	LivechatInquiry.remove(inquiry._id);
-	return queryClient.invalidateQueries(['rooms', { reference: inquiry.rid, type: 'l' }]);
+	return queryClient.invalidateQueries({ queryKey: ['rooms', { reference: inquiry.rid, type: 'l' }] });
 };
 
 const getInquiriesFromAPI = async () => {

apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/hooks/useVoipItemsSection.tsx

@@ -40,12 +40,12 @@ export const useVoipItemsSection = (): { items: GenericMenuItemProps[] } | undef
 			return t(clientError.message);
 		}
 
-		if (!isReady || toggleVoip.isLoading) {
+		if (!isReady || toggleVoip.isPending) {
 			return t('Loading');
 		}
 
 		return '';
-	}, [clientError, isReady, toggleVoip.isLoading, t]);
+	}, [clientError, isReady, toggleVoip.isPending, t]);
 
 	return useMemo(() => {
 		if (!isEnabled) {
@@ -57,7 +57,7 @@ export const useVoipItemsSection = (): { items: GenericMenuItemProps[] } | undef
 				{
 					id: 'toggle-voip',
 					icon: isRegistered ? 'phone-disabled' : 'phone',
-					disabled: !isReady || toggleVoip.isLoading,
+					disabled: !isReady || toggleVoip.isPending,
 					onClick: () => toggleVoip.mutate(),
 					content: (
 						<Box is='span' title={tooltip}>

apps/meteor/client/apps/gameCenter/GameCenter.tsx

@@ -36,7 +36,7 @@ const GameCenter = (): ReactElement => {
 					handleClose={handleClose}
 					handleOpenGame={setOpenedGame}
 					games={result.data}
-					isLoading={result.isLoading}
+					isLoading={result.isPending}
 				/>
 			)}
 

apps/meteor/client/apps/gameCenter/hooks/useExternalComponentsQuery.ts

@@ -3,13 +3,13 @@ import { useQuery } from '@tanstack/react-query';
 
 export const useExternalComponentsQuery = () => {
 	const getExternalComponents = useEndpoint('GET', '/apps/externalComponents');
-	return useQuery(
-		['apps/external-components'],
-		async () => {
+	return useQuery({
+		queryKey: ['apps/external-components'],
+
+		queryFn: async () => {
 			return (await getExternalComponents()).externalComponents;
 		},
-		{
-			staleTime: 10_000,
-		},
-	);
+
+		staleTime: 10_000,
+	});
 };

apps/meteor/client/components/CreateDiscussion/CreateDiscussion.tsx

@@ -245,7 +245,7 @@ const CreateDiscussion = ({ onClose, defaultParentRoom, parentMessageId, nameSug
 			<Modal.Footer>
 				<Modal.FooterControllers>
 					<Button onClick={onClose}>{t('Cancel')}</Button>
-					<Button type='submit' primary loading={createDiscussionMutation.isLoading}>
+					<Button type='submit' primary loading={createDiscussionMutation.isPending}>
 						{t('Create')}
 					</Button>
 				</Modal.FooterControllers>

apps/meteor/client/components/CreateDiscussion/DefaultParentRoomField.tsx

@@ -18,11 +18,13 @@ const DefaultParentRoomField = ({ defaultParentRoom }: { defaultParentRoom: stri
 
 	const roomsInfoEndpoint = useEndpoint('GET', '/v1/rooms.info');
 
-	const { data, isLoading, isError } = useQuery(['defaultParentRoomInfo', query], async () => roomsInfoEndpoint(query), {
+	const { data, isPending, isError } = useQuery({
+		queryKey: ['defaultParentRoomInfo', query],
+		queryFn: async () => roomsInfoEndpoint(query),
 		refetchOnWindowFocus: false,
 	});
 
-	if (isLoading) {
+	if (isPending) {
 		return <Skeleton width='full' />;
 	}
 

apps/meteor/client/components/Omnichannel/Tags.tsx

@@ -20,7 +20,7 @@ type TagsProps = {
 const Tags = ({ tags = [], handler, error, tagRequired, department }: TagsProps): ReactElement => {
 	const { t } = useTranslation();
 
-	const { data: tagsResult, isInitialLoading } = useLivechatTags({
+	const { data: tagsResult, isLoading } = useLivechatTags({
 		department,
 		viewAll: !department,
 	});
@@ -60,7 +60,7 @@ const Tags = ({ tags = [], handler, error, tagRequired, department }: TagsProps)
 		handleTagValue('');
 	});
 
-	if (isInitialLoading) {
+	if (isLoading) {
 		return <FormSkeleton />;
 	}
 

apps/meteor/client/components/Omnichannel/hooks/useLivechatTags.ts

@@ -14,16 +14,16 @@ export const useLivechatTags = (options: Props) => {
 	const { isEnterprise } = useOmnichannel();
 
 	const { department, text, viewAll } = options;
-	return useQuery(
-		['/v1/livechat/tags', text, department],
-		() =>
+	return useQuery({
+		queryKey: ['/v1/livechat/tags', text, department],
+
+		queryFn: () =>
 			getTags({
 				text: text || '',
 				...(department && { department }),
 				viewAll: viewAll ? 'true' : 'false',
 			}),
-		{
-			enabled: isEnterprise,
-		},
-	);
+
+		enabled: isEnterprise,
+	});
 };

apps/meteor/client/components/Omnichannel/modals/CloseChatModalData.tsx

@@ -21,9 +21,12 @@ const CloseChatModalData = ({
 	) => Promise<void>;
 }) => {
 	const getDepartment = useEndpoint('GET', '/v1/livechat/department/:_id', { _id: departmentId });
-	const { data, isLoading } = useQuery(['/v1/livechat/department/:_id', departmentId], () => getDepartment({}));
+	const { data, isPending } = useQuery({
+		queryKey: ['/v1/livechat/department/:_id', departmentId],
+		queryFn: () => getDepartment({}),
+	});
 
-	if (isLoading) {
+	if (isPending) {
 		return <FormSkeleton />;
 	}
 

apps/meteor/client/components/RoomAutoComplete/RoomAutoComplete.tsx

@@ -3,7 +3,7 @@ import { AutoComplete, Option, Box } from '@rocket.chat/fuselage';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
 import { RoomAvatar } from '@rocket.chat/ui-avatar';
 import { useEndpoint } from '@rocket.chat/ui-contexts';
-import { useQuery } from '@tanstack/react-query';
+import { keepPreviousData, useQuery } from '@tanstack/react-query';
 import type { ComponentProps, Dispatch, ReactElement, SetStateAction } from 'react';
 import { memo, useMemo, useState } from 'react';
 
@@ -37,13 +37,11 @@ const RoomAutoComplete = ({ value, onChange, scope = 'regular', renderRoomIcon,
 	const filterDebounced = useDebouncedValue(filter, 300);
 	const roomsAutoCompleteEndpoint = useEndpoint('GET', ROOM_AUTOCOMPLETE_PARAMS[scope].endpoint);
 
-	const result = useQuery(
-		[ROOM_AUTOCOMPLETE_PARAMS[scope].key, filterDebounced],
-		() => roomsAutoCompleteEndpoint(generateQuery(filterDebounced)),
-		{
-			keepPreviousData: true,
-		},
-	);
+	const result = useQuery({
+		queryKey: [ROOM_AUTOCOMPLETE_PARAMS[scope].key, filterDebounced],
+		queryFn: () => roomsAutoCompleteEndpoint(generateQuery(filterDebounced)),
+		placeholderData: keepPreviousData,
+	});
 
 	const options = useMemo(
 		() =>

apps/meteor/client/components/RoomAutoCompleteMultiple/RoomAutoCompleteMultiple.tsx

@@ -2,7 +2,7 @@ import { AutoComplete, Option, Chip, Box, Skeleton } from '@rocket.chat/fuselage
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
 import { RoomAvatar } from '@rocket.chat/ui-avatar';
 import { useEndpoint } from '@rocket.chat/ui-contexts';
-import { useQuery } from '@tanstack/react-query';
+import { keepPreviousData, useQuery } from '@tanstack/react-query';
 import type { ReactElement, ComponentProps } from 'react';
 import { memo, useMemo, useState } from 'react';
 
@@ -21,8 +21,10 @@ const RoomAutoCompleteMultiple = ({ value, onChange, ...props }: RoomAutoComplet
 	const filterDebounced = useDebouncedValue(filter, 300);
 	const autocomplete = useEndpoint('GET', '/v1/rooms.autocomplete.channelAndPrivate');
 
-	const result = useQuery(['rooms.autocomplete.channelAndPrivate', filterDebounced], () => autocomplete(generateQuery(filterDebounced)), {
-		keepPreviousData: true,
+	const result = useQuery({
+		queryKey: ['rooms.autocomplete.channelAndPrivate', filterDebounced],
+		queryFn: () => autocomplete(generateQuery(filterDebounced)),
+		placeholderData: keepPreviousData,
 	});
 
 	const options = useMemo(
@@ -36,7 +38,7 @@ const RoomAutoCompleteMultiple = ({ value, onChange, ...props }: RoomAutoComplet
 		[result.data?.items, result.isSuccess],
 	);
 
-	if (result.isLoading) {
+	if (result.isPending) {
 		return <Skeleton />;
 	}
 

apps/meteor/client/components/UserAutoCompleteMultiple/UserAutoCompleteMultiple.tsx

@@ -19,7 +19,10 @@ const UserAutoCompleteMultiple = ({ onChange, ...props }: UserAutoCompleteMultip
 	const [filter, setFilter] = useState('');
 	const debouncedFilter = useDebouncedValue(filter, 1000);
 	const usersAutoCompleteEndpoint = useEndpoint('GET', '/v1/users.autocomplete');
-	const { data } = useQuery(['usersAutoComplete', debouncedFilter], async () => usersAutoCompleteEndpoint(query(debouncedFilter)));
+	const { data } = useQuery({
+		queryKey: ['usersAutoComplete', debouncedFilter],
+		queryFn: async () => usersAutoCompleteEndpoint(query(debouncedFilter)),
+	});
 
 	const options = useMemo(() => data?.items.map((user) => ({ value: user.username, label: user.name })) || [], [data]);
 

apps/meteor/client/components/UserAutoCompleteMultiple/UserAutoCompleteMultipleFederated.tsx

@@ -2,7 +2,7 @@ import { MultiSelectFiltered, Icon, Box, Chip } from '@rocket.chat/fuselage';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
 import { UserAvatar } from '@rocket.chat/ui-avatar';
 import { useEndpoint } from '@rocket.chat/ui-contexts';
-import { useQuery } from '@tanstack/react-query';
+import { keepPreviousData, useQuery } from '@tanstack/react-query';
 import type { ReactElement, AllHTMLAttributes } from 'react';
 import { memo, useState, useCallback, useMemo } from 'react';
 
@@ -38,9 +38,10 @@ const UserAutoCompleteMultipleFederated = ({
 	const debouncedFilter = useDebouncedValue(filter, 500);
 	const getUsers = useEndpoint('GET', '/v1/users.autocomplete');
 
-	const { data } = useQuery(
-		['users.autocomplete', debouncedFilter],
-		async () => {
+	const { data } = useQuery({
+		queryKey: ['users.autocomplete', debouncedFilter],
+
+		queryFn: async () => {
 			const users = await getUsers({ selector: JSON.stringify({ term: debouncedFilter }) });
 			const options = users.items.map((item): [string, UserAutoCompleteOptionType] => [item.username, item]);
 
@@ -52,8 +53,9 @@ const UserAutoCompleteMultipleFederated = ({
 
 			return options;
 		},
-		{ keepPreviousData: true },
-	);
+
+		placeholderData: keepPreviousData,
+	});
 
 	const options = useMemo(() => data || [], [data]);
 

apps/meteor/client/components/message/MessageToolbarHolder.tsx

@@ -22,9 +22,10 @@ const MessageToolbarHolder = ({ message, context }: MessageToolbarHolderProps):
 
 	const showToolbar = isVisible || isToolbarMenuOpen;
 
-	const depsQueryResult = useQuery(
-		['toolbox', message._id, context],
-		async () => {
+	const depsQueryResult = useQuery({
+		queryKey: ['toolbox', message._id, context],
+
+		queryFn: async () => {
 			const room = await chat?.data.findRoom();
 			const subscription = await chat?.data.findSubscription();
 			return {
@@ -32,10 +33,9 @@ const MessageToolbarHolder = ({ message, context }: MessageToolbarHolderProps):
 				subscription,
 			};
 		},
-		{
-			enabled: showToolbar,
-		},
-	);
+
+		enabled: showToolbar,
+	});
 
 	return (
 		<MessageToolbarWrapper ref={ref} visible={isToolbarMenuOpen}>

apps/meteor/client/components/message/content/attachments/default/ActionAttachmentButton.tsx

@@ -28,7 +28,7 @@ const ActionAttachmentButton = ({ children, processingType, msg, mid }: ActionAt
 			small
 			value={msg}
 			id={mid}
-			disabled={performActionMutation.isLoading}
+			disabled={performActionMutation.isPending}
 			onClick={(event): void => {
 				event.preventDefault();
 

apps/meteor/client/components/message/content/attachments/default/hooks/usePerformActionMutation.ts

@@ -17,26 +17,30 @@ export const usePerformActionMutation = (
 ): UseMutationResult<void, Error, UsePerfomActionMutationParams> => {
 	const chat = useChat();
 
-	return useMutation(async ({ processingType, msg, mid }) => {
-		if (!chat) {
-			return;
-		}
-
-		switch (processingType) {
-			case 'sendMessage':
-				if (!msg) return;
-				await chat.flows.sendMessage({ text: msg });
+	return useMutation({
+		mutationFn: async ({ processingType, msg, mid }) => {
+			if (!chat) {
 				return;
-
-			case 'respondWithMessage':
-				if (!msg) return;
-				await chat.composer?.replyWith(msg);
-				return;
-
-			case 'respondWithQuotedMessage':
-				if (!mid) return;
-				const message = await chat.data.getMessageByID(mid);
-				await chat.composer?.quoteMessage(message);
-		}
-	}, options);
+			}
+
+			switch (processingType) {
+				case 'sendMessage':
+					if (!msg) return;
+					await chat.flows.sendMessage({ text: msg });
+					return;
+
+				case 'respondWithMessage':
+					if (!msg) return;
+					await chat.composer?.replyWith(msg);
+					return;
+
+				case 'respondWithQuotedMessage':
+					if (!mid) return;
+					const message = await chat.data.getMessageByID(mid);
+					await chat.composer?.quoteMessage(message);
+			}
+		},
+
+		...options,
+	});
 };

apps/meteor/client/components/message/content/reactions/ReactionTooltip.tsx

@@ -42,9 +42,10 @@ const ReactionTooltip = ({ emojiName, usernames, mine, messageId, showRealName,
 
 	const getMessage = useGetMessageByID();
 
-	const { data: users, isLoading } = useQuery(
-		['chat.getMessage', 'reactions', messageId, usernames],
-		async () => {
+	const { data: users, isLoading } = useQuery({
+		queryKey: ['chat.getMessage', 'reactions', messageId, usernames],
+
+		queryFn: async () => {
 			// This happens if the only reaction is from the current user
 			if (!usernames.length) {
 				return [];
@@ -70,8 +71,9 @@ const ReactionTooltip = ({ emojiName, usernames, mine, messageId, showRealName,
 
 			return reactions[emojiName].names || usernames;
 		},
-		{ staleTime: 1000 * 60 * 5 },
-	);
+
+		staleTime: 1000 * 60 * 5,
+	});
 
 	if (isLoading) {
 		return (

apps/meteor/client/components/message/content/reactions/useToggleReactionMutation.ts

@@ -14,11 +14,15 @@ export const useToggleReactionMutation = (
 	const uid = useUserId();
 	const reactToMessage = useEndpoint('POST', '/v1/chat.react');
 
-	return useMutation(async ({ mid, reaction }) => {
-		if (!uid) {
-			throw new Error('Not logged in');
-		}
+	return useMutation({
+		mutationFn: async ({ mid, reaction }) => {
+			if (!uid) {
+				throw new Error('Not logged in');
+			}
 
-		await reactToMessage({ messageId: mid, reaction });
-	}, options);
+			await reactToMessage({ messageId: mid, reaction });
+		},
+
+		...options,
+	});
 };

apps/meteor/client/components/message/hooks/usePinMessageMutation.ts

@@ -26,7 +26,7 @@ export const usePinMessageMutation = () => {
 			updatePinMessage(message, { pinned: false });
 		},
 		onSettled: (_data, _error, message) => {
-			queryClient.invalidateQueries(roomsQueryKeys.pinnedMessages(message.rid));
+			queryClient.invalidateQueries({ queryKey: roomsQueryKeys.pinnedMessages(message.rid) });
 		},
 	});
 };