Update code to new react-query API

src/actions/streaming.ts

@@ -43,7 +43,9 @@ const removeChatMessage = (payload: string) => {
   // If the user just deleted the "last_message", then let's invalidate
   // the Chat Search query so the Chat List will show the new "last_message".
   if (isLastMessage(chatMessageId)) {
-    queryClient.invalidateQueries(ChatKeys.chatSearch());
+    queryClient.invalidateQueries({
+      queryKey: ChatKeys.chatSearch(),
+    });
   }
 
   removePageItem(ChatKeys.chatMessages(chatId), chatMessageId, (o: any, n: any) => String(o.id) === String(n));

src/api/hooks/groups/useGroupValidation.ts

@@ -31,7 +31,9 @@ function useGroupValidation(name: string = '') {
     return data;
   };
 
-  const queryInfo = useQuery<Validation>(ValidationKeys.validation(name), getValidation, {
+  const queryInfo = useQuery<Validation>({
+    queryKey: ValidationKeys.validation(name),
+    queryFn: getValidation,
     enabled: features.groupsValidation && !!name,
   });
 

src/features/account/components/header.tsx

@@ -92,16 +92,17 @@ const Header: React.FC<IHeader> = ({ account }) => {
 
   const { getOrCreateChatByAccountId } = useChats();
 
-  const createAndNavigateToChat = useMutation((accountId: string) => {
+  const createAndNavigateToChat = useMutation({
-    return getOrCreateChatByAccountId(accountId);
+    mutationFn: (accountId: string) => getOrCreateChatByAccountId(accountId),
-  }, {
     onError: (error: AxiosError) => {
       const data = error.response?.data as any;
       toast.error(data?.error);
     },
     onSuccess: (response) => {
       history.push(`/chats/${response.data.id}`);
-      queryClient.invalidateQueries(ChatKeys.chatSearch());
+      queryClient.invalidateQueries({
+        queryKey: ChatKeys.chatSearch(),
+      });
     },
   });
 
@@ -571,7 +572,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
           theme='outlined'
           className='px-2'
           iconClassName='h-4 w-4'
-          disabled={createAndNavigateToChat.isLoading}
+          disabled={createAndNavigateToChat.isPending}
         />
       );
     } else if (account.pleroma?.accepts_chat_messages) {

src/features/chats/components/chat-message-list-intro.tsx

@@ -92,7 +92,7 @@ const ChatMessageListIntro = () => {
             theme='primary'
             block
             onClick={() => acceptChat.mutate()}
-            disabled={acceptChat.isLoading}
+            disabled={acceptChat.isPending}
           >
             {intl.formatMessage(messages.accept)}
           </Button>

src/features/chats/components/chat-message.tsx

@@ -68,9 +68,12 @@ const ChatMessage = (props: IChatMessage) => {
   const [isReactionSelectorOpen, setIsReactionSelectorOpen] = useState<boolean>(false);
   const [isMenuOpen, setIsMenuOpen] = useState<boolean>(false);
 
-  const handleDeleteMessage = useMutation((chatMessageId: string) => deleteChatMessage(chatMessageId), {
+  const handleDeleteMessage = useMutation({
+    mutationFn: (chatMessageId: string) => deleteChatMessage(chatMessageId),
     onSettled: () => {
-      queryClient.invalidateQueries(ChatKeys.chatMessages(chat.id));
+      queryClient.invalidateQueries({
+        queryKey: ChatKeys.chatMessages(chat.id),
+      });
     },
   });
 

src/features/chats/components/chat-page/components/chat-page-settings.tsx

@@ -84,7 +84,7 @@ const ChatPageSettings = () => {
           </List>
         </CardBody>
 
-        <Button type='submit' theme='primary' disabled={updateCredentials.isLoading}>
+        <Button type='submit' theme='primary' disabled={updateCredentials.isPending}>
           {intl.formatMessage(messages.submit)}
         </Button>
       </Form>

src/features/chats/components/chat-page/components/welcome.tsx

@@ -69,7 +69,7 @@ const Welcome = () => {
           {intl.formatMessage(messages.notice)}
         </Text>
 
-        <Button type='submit' theme='primary' block size='lg' disabled={updateCredentials.isLoading}>
+        <Button type='submit' theme='primary' block size='lg' disabled={updateCredentials.isPending}>
           {intl.formatMessage(messages.submit)}
         </Button>
       </Form>

src/features/chats/components/chat-search/chat-search.tsx

@@ -43,9 +43,8 @@ const ChatSearch = (props: IChatSearch) => {
   const hasSearchValue = debouncedValue && debouncedValue.length > 0;
   const hasSearchResults = (accounts || []).length > 0;
 
-  const handleClickOnSearchResult = useMutation((accountId: string) => {
+  const handleClickOnSearchResult = useMutation({
-    return getOrCreateChatByAccountId(accountId);
+    mutationFn: (accountId: string) => getOrCreateChatByAccountId(accountId),
-  }, {
     onError: (error: AxiosError) => {
       const data = error.response?.data as any;
       toast.error(data?.error);
@@ -57,7 +56,7 @@ const ChatSearch = (props: IChatSearch) => {
         changeScreen(ChatWidgetScreens.CHAT, response.data.id);
       }
 
-      queryClient.invalidateQueries(ChatKeys.chatSearch());
+      queryClient.invalidateQueries({ queryKey: ChatKeys.chatSearch() });
     },
   });
 

src/features/chats/components/chat.tsx

@@ -93,7 +93,7 @@ const Chat: React.FC<ChatInterface> = ({ chat, inputRef, className }) => {
   };
 
   const sendMessage = () => {
-    if (!isSubmitDisabled && !createChatMessage.isLoading) {
+    if (!isSubmitDisabled && !createChatMessage.isPending) {
       submitMessage();
 
       if (!chat.accepted) {

src/queries/__mocks__/client.ts

@@ -1,16 +1,10 @@
 import { QueryClient } from '@tanstack/react-query';
 
 const queryClient = new QueryClient({
-  logger: {
-    // eslint-disable-next-line no-console
-    log: console.log,
-    warn: console.warn,
-    error: () => { },
-  },
   defaultOptions: {
     queries: {
       staleTime: 0,
-      cacheTime: Infinity,
+      gcTime: Infinity,
       retry: false,
     },
   },

src/queries/accounts.ts

@@ -39,7 +39,8 @@ const useUpdateCredentials = () => {
   const api = useApi();
   const dispatch = useAppDispatch();
 
-  return useMutation((data: UpdateCredentialsData) => api.patch('/api/v1/accounts/update_credentials', data), {
+  return useMutation({
+    mutationFn: (data: UpdateCredentialsData) => api.patch('/api/v1/accounts/update_credentials', data),
     onMutate(variables) {
       const cachedAccount = account;
       dispatch(patchMeSuccess({ ...account, ...variables }));

src/queries/chats.ts

@@ -1,4 +1,4 @@
-import { InfiniteData, useInfiniteQuery, useMutation, useQuery } from '@tanstack/react-query';
+import { InfiniteData, keepPreviousData, useInfiniteQuery, useMutation, useQuery } from '@tanstack/react-query';
 import sumBy from 'lodash/sumBy';
 
 import { importFetchedAccount, importFetchedAccounts } from 'soapbox/actions/importer';
@@ -98,10 +98,13 @@ const useChatMessages = (chat: IChat) => {
     };
   };
 
-  const queryInfo = useInfiniteQuery(ChatKeys.chatMessages(chat.id), ({ pageParam }) => getChatMessages(chat.id, pageParam), {
+  const queryInfo = useInfiniteQuery({
+    queryKey: ChatKeys.chatMessages(chat.id),
+    queryFn: ({ pageParam }) => getChatMessages(chat.id, pageParam),
     enabled: !isBlocked,
-    cacheTime: 0,
+    gcTime: 0,
     staleTime: 0,
+    initialPageParam: { link: undefined as string | undefined },
     getNextPageParam: (config) => {
       if (config.hasMore) {
         return { link: config.link };
@@ -153,9 +156,12 @@ const useChats = (search?: string) => {
     };
   };
 
-  const queryInfo = useInfiniteQuery(ChatKeys.chatSearch(search), ({ pageParam }) => getChats(pageParam), {
+  const queryInfo = useInfiniteQuery({
-    keepPreviousData: true,
+    queryKey: ChatKeys.chatSearch(search),
+    queryFn: ({ pageParam }) => getChats(pageParam),
+    placeholderData: keepPreviousData,
     enabled: features.chats,
+    initialPageParam: { link: undefined as string | undefined },
     getNextPageParam: (config) => {
       if (config.hasMore) {
         return { link: config.link };
@@ -193,8 +199,10 @@ const useChat = (chatId?: string) => {
     }
   };
 
-  return useQuery<IChat | undefined>(ChatKeys.chat(chatId), getChat, {
+  return useQuery<IChat | undefined>({
-    cacheTime: 0,
+    queryKey: ChatKeys.chat(chatId),
+    queryFn: getChat,
+    gcTime: 0,
     enabled: !!chatId,
   });
 };
@@ -230,75 +238,78 @@ const useChatActions = (chatId: string) => {
       .catch(() => null);
   };
 
-  const createChatMessage = useMutation(
+  const createChatMessage = useMutation({
-    ({ chatId, content, mediaIds }: { chatId: string; content: string; mediaIds?: string[] }) => {
+    mutationFn: ({ chatId, content, mediaIds }: { chatId: string; content: string; mediaIds?: string[] }) => {
       return api.post<ChatMessage>(`/api/v1/pleroma/chats/${chatId}/messages`, {
         content,
         media_id: (mediaIds && mediaIds.length === 1) ? mediaIds[0] : undefined, // Pleroma backwards-compat
         media_ids: mediaIds,
       });
     },
-    {
+    retry: false,
-      retry: false,
+    onMutate: async (variables) => {
-      onMutate: async (variables) => {
+      // Cancel any outgoing refetches (so they don't overwrite our optimistic update)
-        // Cancel any outgoing refetches (so they don't overwrite our optimistic update)
+      await queryClient.cancelQueries({
-        await queryClient.cancelQueries(['chats', 'messages', variables.chatId]);
+        queryKey: ['chats', 'messages', variables.chatId],
+      });
 
-        // Snapshot the previous value
+      // Snapshot the previous value
-        const prevContent = variables.content;
+      const prevContent = variables.content;
-        const prevChatMessages = queryClient.getQueryData(['chats', 'messages', variables.chatId]);
+      const prevChatMessages = queryClient.getQueryData(['chats', 'messages', variables.chatId]);
-        const pendingId = String(Number(new Date()));
+      const pendingId = String(Number(new Date()));
 
-        // Optimistically update to the new value
+      // Optimistically update to the new value
-        queryClient.setQueryData(ChatKeys.chatMessages(variables.chatId), (prevResult: any) => {
+      queryClient.setQueryData(ChatKeys.chatMessages(variables.chatId), (prevResult: any) => {
-          const newResult = { ...prevResult };
+        const newResult = { ...prevResult };
-          newResult.pages = newResult.pages.map((page: any, idx: number) => {
+        newResult.pages = newResult.pages.map((page: any, idx: number) => {
-            if (idx === 0) {
+          if (idx === 0) {
-              return {
+            return {
-                ...page,
+              ...page,
-                result: [
+              result: [
-                  normalizeChatMessage({
+                normalizeChatMessage({
-                    content: variables.content,
+                  content: variables.content,
-                    id: pendingId,
+                  id: pendingId,
-                    created_at: new Date(),
+                  created_at: new Date(),
-                    account_id: account?.id,
+                  account_id: account?.id,
-                    pending: true,
+                  pending: true,
-                    unread: true,
+                  unread: true,
-                  }),
+                }),
-                  ...page.result,
+                ...page.result,
-                ],
+              ],
-              };
+            };
-            }
+          }
 
-            return page;
+          return page;
-          });
-
-          return newResult;
         });
 
-        return { prevChatMessages, prevContent, pendingId };
+        return newResult;
-      },
+      });
-      // If the mutation fails, use the context returned from onMutate to roll back
-      onError: (_error: any, variables, context: any) => {
-        queryClient.setQueryData(['chats', 'messages', variables.chatId], context.prevChatMessages);
-      },
-      onSuccess: (response: any, variables, context) => {
-        const nextChat = { ...chat, last_message: response.data };
-        updatePageItem(ChatKeys.chatSearch(), nextChat, (o, n) => o.id === n.id);
-        updatePageItem(
-          ChatKeys.chatMessages(variables.chatId),
-          normalizeChatMessage(response.data),
-          (o) => o.id === context.pendingId,
-        );
-        reOrderChatListItems();
-      },
-    },
-  );
 
-  const updateChat = useMutation((data: UpdateChatVariables) => api.patch<IChat>(`/api/v1/pleroma/chats/${chatId}`, data), {
+      return { prevChatMessages, prevContent, pendingId };
+    },
+    // If the mutation fails, use the context returned from onMutate to roll back
+    onError: (_error: any, variables, context: any) => {
+      queryClient.setQueryData(['chats', 'messages', variables.chatId], context.prevChatMessages);
+    },
+    onSuccess: (response: any, variables, context) => {
+      const nextChat = { ...chat, last_message: response.data };
+      updatePageItem(ChatKeys.chatSearch(), nextChat, (o, n) => o.id === n.id);
+      updatePageItem(
+        ChatKeys.chatMessages(variables.chatId),
+        normalizeChatMessage(response.data),
+        (o) => o.id === context.pendingId,
+      );
+      reOrderChatListItems();
+    },
+  });
+
+  const updateChat = useMutation({
+    mutationFn: (data: UpdateChatVariables) => api.patch<IChat>(`/api/v1/pleroma/chats/${chatId}`, data),
     onMutate: async (data) => {
       // Cancel any outgoing refetches (so they don't overwrite our optimistic update)
-      await queryClient.cancelQueries(ChatKeys.chat(chatId));
+      await queryClient.cancelQueries({
+        queryKey: ChatKeys.chat(chatId),
+      });
 
       // Snapshot the previous value
       const prevChat = { ...chat };
@@ -317,48 +328,49 @@ const useChatActions = (chatId: string) => {
       toast.error('Chat Settings failed to update.');
     },
     onSuccess() {
-      queryClient.invalidateQueries(ChatKeys.chat(chatId));
+      queryClient.invalidateQueries({ queryKey: ChatKeys.chat(chatId) });
-      queryClient.invalidateQueries(ChatKeys.chatSearch());
+      queryClient.invalidateQueries({ queryKey: ChatKeys.chatSearch() });
       toast.success('Chat Settings updated successfully');
     },
   });
 
   const deleteChatMessage = (chatMessageId: string) => api.delete<IChat>(`/api/v1/pleroma/chats/${chatId}/messages/${chatMessageId}`);
 
-  const acceptChat = useMutation(() => api.post<IChat>(`/api/v1/pleroma/chats/${chatId}/accept`), {
+  const acceptChat = useMutation({
+    mutationFn: () => api.post<IChat>(`/api/v1/pleroma/chats/${chatId}/accept`),
     onSuccess(response) {
       changeScreen(ChatWidgetScreens.CHAT, response.data.id);
-      queryClient.invalidateQueries(ChatKeys.chat(chatId));
+      queryClient.invalidateQueries({ queryKey: ChatKeys.chat(chatId) });
-      queryClient.invalidateQueries(ChatKeys.chatMessages(chatId));
+      queryClient.invalidateQueries({ queryKey: ChatKeys.chatMessages(chatId) });
-      queryClient.invalidateQueries(ChatKeys.chatSearch());
+      queryClient.invalidateQueries({ queryKey: ChatKeys.chatSearch() });
     },
   });
 
-  const deleteChat = useMutation(() => api.delete<IChat>(`/api/v1/pleroma/chats/${chatId}`), {
+  const deleteChat = useMutation({
+    mutationFn: () => api.delete<IChat>(`/api/v1/pleroma/chats/${chatId}`),
     onSuccess() {
       changeScreen(ChatWidgetScreens.INBOX);
-      queryClient.invalidateQueries(ChatKeys.chatMessages(chatId));
+      queryClient.invalidateQueries({ queryKey: ChatKeys.chatMessages(chatId) });
-      queryClient.invalidateQueries(ChatKeys.chatSearch());
+      queryClient.invalidateQueries({ queryKey: ChatKeys.chatSearch() });
     },
   });
 
-  const createReaction = useMutation((data: CreateReactionVariables) => api.post(`/api/v1/pleroma/chats/${chatId}/messages/${data.messageId}/reactions`, {
+  const createReaction = useMutation({
-    emoji: data.emoji,
+    mutationFn: (data: CreateReactionVariables) => api.post(`/api/v1/pleroma/chats/${chatId}/messages/${data.messageId}/reactions`, {
-  }), {
+      emoji: data.emoji,
+    }),
     // TODO: add optimistic updates
     onSuccess(response) {
       updateChatMessage(response.data);
     },
   });
 
-  const deleteReaction = useMutation(
+  const deleteReaction = useMutation({
-    (data: CreateReactionVariables) => api.delete(`/api/v1/pleroma/chats/${chatId}/messages/${data.messageId}/reactions/${data.emoji}`),
+    mutationFn: (data: CreateReactionVariables) => api.delete(`/api/v1/pleroma/chats/${chatId}/messages/${data.messageId}/reactions/${data.emoji}`),
-    {
+    onSuccess() {
-      onSuccess() {
+      queryClient.invalidateQueries({ queryKey: ChatKeys.chatMessages(chatId) });
-        queryClient.invalidateQueries(ChatKeys.chatMessages(chatId));
-      },
     },
-  );
+  });
 
   return {
     acceptChat,

src/queries/client.ts

@@ -5,7 +5,7 @@ const queryClient = new QueryClient({
     queries: {
       refetchOnWindowFocus: false,
       staleTime: 60000, // 1 minute
-      cacheTime: Infinity,
+      gcTime: Infinity,
       retry: false,
     },
   },

src/queries/embed.ts

@@ -26,5 +26,8 @@ export default function useEmbed(url: string) {
     return data;
   };
 
-  return useQuery<Embed>(['embed', url], getEmbed);
+  return useQuery<Embed>({
+    queryKey: ['embed', url],
+    queryFn: getEmbed,
+  });
 }

src/queries/relationships.ts

@@ -8,11 +8,12 @@ const useFetchRelationships = () => {
   const api = useApi();
   const dispatch = useAppDispatch();
 
-  return useMutation(({ accountIds }: { accountIds: string[]}) => {
+  return useMutation({
-    const ids = accountIds.map((id) => `id[]=${id}`).join('&');
+    mutationFn: ({ accountIds }: { accountIds: string[]}) => {
+      const ids = accountIds.map((id) => `id[]=${id}`).join('&');
 
-    return api.get(`/api/v1/accounts/relationships?${ids}`);
+      return api.get(`/api/v1/accounts/relationships?${ids}`);
-  }, {
+    },
     onSuccess(response) {
       dispatch(fetchRelationshipsSuccess(response.data));
     },

src/queries/search.ts

@@ -1,4 +1,4 @@
-import { useInfiniteQuery } from '@tanstack/react-query';
+import { keepPreviousData, useInfiniteQuery } from '@tanstack/react-query';
 
 import { getNextLink } from 'soapbox/api';
 import { useApi } from 'soapbox/hooks';
@@ -31,8 +31,11 @@ export default function useAccountSearch(q: string) {
     };
   };
 
-  const queryInfo = useInfiniteQuery(['search', 'accounts', q], ({ pageParam }) => getAccountSearch(q, pageParam), {
+  const queryInfo = useInfiniteQuery({
-    keepPreviousData: true,
+    queryKey: ['search', 'accounts', q],
+    queryFn: ({ pageParam }) => getAccountSearch(q, pageParam),
+    placeholderData: keepPreviousData,
+    initialPageParam: { link: undefined as string | undefined },
     getNextPageParam: (config) => {
       if (config.hasMore) {
         return { link: config.link };

src/queries/suggestions.ts

@@ -1,4 +1,4 @@
-import { useInfiniteQuery, useMutation } from '@tanstack/react-query';
+import { useInfiniteQuery, useMutation, keepPreviousData } from '@tanstack/react-query';
 
 import { fetchRelationships } from 'soapbox/actions/accounts';
 import { importFetchedAccounts } from 'soapbox/actions/importer';
@@ -48,19 +48,19 @@ const useSuggestions = () => {
     };
   };
 
-  const result = useInfiniteQuery(
+  const result = useInfiniteQuery({
-    SuggestionKeys.suggestions,
+    queryKey: SuggestionKeys.suggestions,
-    ({ pageParam }: any) => getV2Suggestions(pageParam),
+    queryFn: ({ pageParam }: any) => getV2Suggestions(pageParam),
-    {
+    placeholderData: keepPreviousData,
-      keepPreviousData: true,
+    initialPageParam: { nextLink: undefined },
-      getNextPageParam: (config) => {
+    getNextPageParam: (config) => {
-        if (config?.hasMore) {
+      if (config?.hasMore) {
-          return { nextLink: config?.link };
+        return { nextLink: config?.link };
-        }
+      }
 
-        return undefined;
+      return undefined;
-      },
+    },
-    });
+  });
 
   const data: any = result.data?.pages.reduce<Suggestion[]>(
     (prev: any, curr: any) => [...prev, ...curr.result],
@@ -76,7 +76,8 @@ const useSuggestions = () => {
 const useDismissSuggestion = () => {
   const api = useApi();
 
-  return useMutation((accountId: string) => api.delete(`/api/v1/suggestions/${accountId}`), {
+  return useMutation({
+    mutationFn: (accountId: string) => api.delete(`/api/v1/suggestions/${accountId}`),
     onMutate(accountId: string) {
       removePageItem(SuggestionKeys.suggestions, accountId, (o: any, n: any) => o.account === n);
     },
@@ -105,8 +106,11 @@ function useOnboardingSuggestions() {
     };
   };
 
-  const result = useInfiniteQuery(['suggestions', 'v2'], ({ pageParam }) => getV2Suggestions(pageParam), {
+  const result = useInfiniteQuery({
-    keepPreviousData: true,
+    queryKey: ['suggestions', 'v2'],
+    queryFn: ({ pageParam }) => getV2Suggestions(pageParam),
+    placeholderData: keepPreviousData,
+    initialPageParam: { link: undefined as string | undefined },
     getNextPageParam: (config) => {
       if (config.hasMore) {
         return { link: config.link };

src/queries/trends.ts

@@ -19,7 +19,9 @@ export default function useTrends() {
     return normalizedData;
   };
 
-  const result = useQuery<ReadonlyArray<Tag>>(['trends'], getTrends, {
+  const result = useQuery<ReadonlyArray<Tag>>({
+    queryKey: ['trends'],
+    queryFn: getTrends,
     placeholderData: [],
     staleTime: 600000, // 10 minutes
   });

src/utils/chats.ts

@@ -50,7 +50,9 @@ const checkIfChatExists = (chatId: string) => {
  * Force a re-fetch of ChatSearch.
  */
 const invalidateChatSearchQuery = () => {
-  queryClient.invalidateQueries(ChatKeys.chatSearch());
+  queryClient.invalidateQueries({
+    queryKey: ChatKeys.chatSearch(),
+  });
 };
 
 const updateChatListItem = (newChat: ChatPayload) => {

src/utils/queries.ts

@@ -41,7 +41,7 @@ const flattenPages = <T>(queryData: InfiniteData<PaginatedResult<T>> | undefined
 
 /** Traverse pages and update the item inside if found. */
 const updatePageItem = <T>(queryKey: QueryKey, newItem: T, isItem: (item: T, newItem: T) => boolean) => {
-  queryClient.setQueriesData<InfiniteData<PaginatedResult<T>>>(queryKey, (data) => {
+  queryClient.setQueriesData<InfiniteData<PaginatedResult<T>>>({ queryKey }, (data) => {
     if (data) {
       const pages = data.pages.map(page => {
         const result = page.result.map(item => isItem(item, newItem) ? newItem : item);
@@ -65,7 +65,7 @@ const appendPageItem = <T>(queryKey: QueryKey, newItem: T) => {
 
 /** Remove an item inside if found. */
 const removePageItem = <T>(queryKey: QueryKey, itemToRemove: T, isItem: (item: T, newItem: T) => boolean) => {
-  queryClient.setQueriesData<InfiniteData<PaginatedResult<T>>>(queryKey, (data) => {
+  queryClient.setQueriesData<InfiniteData<PaginatedResult<T>>>({ queryKey }, (data) => {
     if (data) {
       const pages = data.pages.map(page => {
         const result = page.result.filter(item => !isItem(item, itemToRemove));