Use query key system

app/soapbox/features/ads/components/ad.tsx

@@ -6,6 +6,7 @@ import { Stack, HStack, Card, Avatar, Text, Icon } from 'soapbox/components/ui';
 import IconButton from 'soapbox/components/ui/icon-button/icon-button';
 import StatusCard from 'soapbox/features/status/components/card';
 import { useAppSelector } from 'soapbox/hooks';
+import { adKeys } from 'soapbox/queries/ads';
 
 import type { Card as CardEntity } from 'soapbox/types/entities';
 
@@ -29,7 +30,7 @@ const Ad: React.FC<IAd> = ({ card, impression, expires }) => {
 
   /** Invalidate query cache for ads. */
   const bustCache = (): void => {
-    queryClient.invalidateQueries(['ads']);
+    queryClient.invalidateQueries(adKeys.ads);
   };
 
   /** Toggle the info box on click. */

app/soapbox/features/chats/components/chat-message-list.tsx

@@ -14,7 +14,7 @@ import PlaceholderChatMessage from 'soapbox/features/placeholder/components/plac
 import Bundle from 'soapbox/features/ui/components/bundle';
 import { MediaGallery } from 'soapbox/features/ui/util/async-components';
 import { useAppSelector, useAppDispatch, useOwnAccount } from 'soapbox/hooks';
-import { IChat, IChatMessage, useChat, useChatMessages } from 'soapbox/queries/chats';
+import { chatKeys, IChat, IChatMessage, useChat, useChatMessages } from 'soapbox/queries/chats';
 import { queryClient } from 'soapbox/queries/client';
 import { onlyEmoji } from 'soapbox/utils/rich_content';
 
@@ -96,7 +96,7 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat, autosize }) => {
 
   const handleDeleteMessage = useMutation((chatMessageId: string) => deleteChatMessage(chatMessageId), {
     onSettled: () => {
-      queryClient.invalidateQueries(['chats', 'messages', chat.id]);
+      queryClient.invalidateQueries(chatKeys.chatMessages(chat.id));
     },
   });
 

app/soapbox/features/chats/components/chat-search/chat-search.tsx

@@ -11,6 +11,7 @@ import { useChats } from 'soapbox/queries/chats';
 import { queryClient } from 'soapbox/queries/client';
 import useAccountSearch from 'soapbox/queries/search';
 
+import { chatKeys } from '../../../../queries/chats';
 import ChatPaneHeader from '../chat-pane-header';
 import { Pane } from '../ui';
 
@@ -47,7 +48,7 @@ const ChatSearch = () => {
     },
     onSuccess: (response) => {
       setChat(response.data);
-      queryClient.invalidateQueries(['chats', 'search']);
+      queryClient.invalidateQueries(chatKeys.chatSearch());
     },
   });
 

app/soapbox/features/chats/components/chat.tsx

@@ -8,7 +8,7 @@ import { HStack, IconButton, Stack, Text, Textarea } from 'soapbox/components/ui
 import UploadProgress from 'soapbox/components/upload-progress';
 import UploadButton from 'soapbox/features/compose/components/upload_button';
 import { useAppDispatch, useOwnAccount } from 'soapbox/hooks';
-import { IChat, useChat } from 'soapbox/queries/chats';
+import { chatKeys, IChat, useChat } from 'soapbox/queries/chats';
 import { queryClient } from 'soapbox/queries/client';
 import { truncateFilename } from 'soapbox/utils/media';
 
@@ -97,7 +97,7 @@ const Chat: React.FC<ChatInterface> = ({ chat, autosize, inputRef, className })
     },
     // Always refetch after error or success:
     onSuccess: () => {
-      queryClient.invalidateQueries(['chats', 'messages', chat.id]);
+      queryClient.invalidateQueries(chatKeys.chatMessages(chat.id));
     },
   });
 

app/soapbox/queries/ads.ts

@@ -4,7 +4,11 @@ import { Ad, getProvider } from 'soapbox/features/ads/providers';
 import { useAppDispatch } from 'soapbox/hooks';
 import { isExpired } from 'soapbox/utils/ads';
 
-export default function useAds() {
+const adKeys = {
+  ads: ['ads'] as const,
+};
+
+function useAds() {
   const dispatch = useAppDispatch();
 
   const getAds = async() => {
@@ -18,7 +22,7 @@ export default function useAds() {
     });
   };
 
-  const result = useQuery<Ad[]>(['ads'], getAds, {
+  const result = useQuery<Ad[]>(adKeys.ads, getAds, {
     placeholderData: [],
   });
 
@@ -30,3 +34,5 @@ export default function useAds() {
     data,
   };
 }
+
+export { useAds as default, adKeys };

app/soapbox/queries/chats.ts

@@ -56,6 +56,12 @@ export interface PaginatedResult<T> {
   link?: string,
 }
 
+const chatKeys = {
+  chatMessages: (chatId: string) => ['chats', 'messages', chatId] as const,
+  chatSearch: (searchQuery?: string) => ['chats', 'search', searchQuery] as const,
+  chatSilences: ['chatSilences'] as const,
+};
+
 const reverseOrder = (a: IChat, b: IChat): number => compareId(a.id, b.id);
 
 const useChatMessages = (chatId: string) => {
@@ -78,7 +84,7 @@ const useChatMessages = (chatId: string) => {
     };
   };
 
-  const queryInfo = useInfiniteQuery(['chats', 'messages', chatId], ({ pageParam }) => getChatMessages(chatId, pageParam), {
+  const queryInfo = useInfiniteQuery(chatKeys.chatMessages(chatId), ({ pageParam }) => getChatMessages(chatId, pageParam), {
     keepPreviousData: true,
     getNextPageParam: (config) => {
       if (config.hasMore) {
@@ -126,7 +132,7 @@ const useChats = (search?: string) => {
     };
   };
 
-  const queryInfo = useInfiniteQuery(['chats', 'search', search], ({ pageParam }) => getChats(pageParam), {
+  const queryInfo = useInfiniteQuery(chatKeys.chatSearch(search), ({ pageParam }) => getChats(pageParam), {
     keepPreviousData: true,
     getNextPageParam: (config) => {
       if (config.hasMore) {
@@ -168,8 +174,8 @@ const useChat = (chatId: string) => {
   const acceptChat = useMutation(() => api.post<IChat>(`/api/v1/pleroma/chats/${chatId}/accept`), {
     onSuccess(response) {
       setChat(response.data);
-      queryClient.invalidateQueries(['chats', 'messages', chatId]);
+      queryClient.invalidateQueries(chatKeys.chatMessages(chatId));
-      queryClient.invalidateQueries(['chats', 'search']);
+      queryClient.invalidateQueries(chatKeys.chatSearch());
     },
   });
 
@@ -177,8 +183,8 @@ const useChat = (chatId: string) => {
     onSuccess(response) {
       setChat(null);
       setEditing(false);
-      queryClient.invalidateQueries(['chats', 'messages', chatId]);
+      queryClient.invalidateQueries(chatKeys.chatMessages(chatId));
-      queryClient.invalidateQueries(['chats', 'search']);
+      queryClient.invalidateQueries(chatKeys.chatSearch());
     },
   });
 
@@ -194,7 +200,7 @@ const useChatSilences = () => {
     return data;
   };
 
-  return useQuery<IChatSilence[]>(['chatSilences'], getChatSilences, {
+  return useQuery<IChatSilence[]>(chatKeys.chatSilences, getChatSilences, {
     placeholderData: [],
   });
 };
@@ -233,7 +239,7 @@ const useChatSilence = (chat: IChat | null) => {
     api.post(`api/v1/pleroma/chats/silence?account_id=${chat?.account.id}`)
       .then(() => {
         dispatch(snackbar.success('Successfully silenced this chat.'));
-        queryClient.invalidateQueries(['chatSilences']);
+        queryClient.invalidateQueries(chatKeys.chatSilences);
       })
       .catch(() => {
         dispatch(snackbar.error('Something went wrong trying to silence this chat. Please try again.'));
@@ -247,7 +253,7 @@ const useChatSilence = (chat: IChat | null) => {
     api.delete(`api/v1/pleroma/chats/silence?account_id=${chat?.account.id}`)
       .then(() => {
         dispatch(snackbar.success('Successfully unsilenced this chat.'));
-        queryClient.invalidateQueries(['chatSilences']);
+        queryClient.invalidateQueries(chatKeys.chatSilences);
       })
       .catch(() => {
         dispatch(snackbar.error('Something went wrong trying to unsilence this chat. Please try again.'));
@@ -258,4 +264,4 @@ const useChatSilence = (chat: IChat | null) => {
   return { isSilenced, handleSilence, fetchChatSilence };
 };
 
-export { useChat, useChats, useChatMessages, useChatSilences, useChatSilence };
+export { chatKeys, useChat, useChats, useChatMessages, useChatSilences, useChatSilence };