From 17c2958df10ca828275e6d0c6144de75ede43b53 Mon Sep 17 00:00:00 2001 From: Justin Date: Tue, 27 Sep 2022 15:42:24 -0400 Subject: [PATCH] Use query key system --- app/soapbox/features/ads/components/ad.tsx | 3 ++- .../chats/components/chat-message-list.tsx | 4 +-- .../components/chat-search/chat-search.tsx | 3 ++- .../features/chats/components/chat.tsx | 4 +-- app/soapbox/queries/ads.ts | 10 +++++-- app/soapbox/queries/chats.ts | 26 ++++++++++++------- 6 files changed, 32 insertions(+), 18 deletions(-) diff --git a/app/soapbox/features/ads/components/ad.tsx b/app/soapbox/features/ads/components/ad.tsx index 5c1ff6a41..9da3f1387 100644 --- a/app/soapbox/features/ads/components/ad.tsx +++ b/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 = ({ card, impression, expires }) => { /** Invalidate query cache for ads. */ const bustCache = (): void => { - queryClient.invalidateQueries(['ads']); + queryClient.invalidateQueries(adKeys.ads); }; /** Toggle the info box on click. */ diff --git a/app/soapbox/features/chats/components/chat-message-list.tsx b/app/soapbox/features/chats/components/chat-message-list.tsx index ccfcea91d..3f842bf35 100644 --- a/app/soapbox/features/chats/components/chat-message-list.tsx +++ b/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 = ({ chat, autosize }) => { const handleDeleteMessage = useMutation((chatMessageId: string) => deleteChatMessage(chatMessageId), { onSettled: () => { - queryClient.invalidateQueries(['chats', 'messages', chat.id]); + queryClient.invalidateQueries(chatKeys.chatMessages(chat.id)); }, }); diff --git a/app/soapbox/features/chats/components/chat-search/chat-search.tsx b/app/soapbox/features/chats/components/chat-search/chat-search.tsx index 9bce51e86..6c4f2f4db 100644 --- a/app/soapbox/features/chats/components/chat-search/chat-search.tsx +++ b/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()); }, }); diff --git a/app/soapbox/features/chats/components/chat.tsx b/app/soapbox/features/chats/components/chat.tsx index 6475ad53c..2dba86f95 100644 --- a/app/soapbox/features/chats/components/chat.tsx +++ b/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 = ({ chat, autosize, inputRef, className }) }, // Always refetch after error or success: onSuccess: () => { - queryClient.invalidateQueries(['chats', 'messages', chat.id]); + queryClient.invalidateQueries(chatKeys.chatMessages(chat.id)); }, }); diff --git a/app/soapbox/queries/ads.ts b/app/soapbox/queries/ads.ts index 86dc1e86f..13cad46fa 100644 --- a/app/soapbox/queries/ads.ts +++ b/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(['ads'], getAds, { + const result = useQuery(adKeys.ads, getAds, { placeholderData: [], }); @@ -30,3 +34,5 @@ export default function useAds() { data, }; } + +export { useAds as default, adKeys }; diff --git a/app/soapbox/queries/chats.ts b/app/soapbox/queries/chats.ts index eccb1c896..4e6011ec1 100644 --- a/app/soapbox/queries/chats.ts +++ b/app/soapbox/queries/chats.ts @@ -56,6 +56,12 @@ export interface PaginatedResult { 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(`/api/v1/pleroma/chats/${chatId}/accept`), { onSuccess(response) { setChat(response.data); - queryClient.invalidateQueries(['chats', 'messages', chatId]); - queryClient.invalidateQueries(['chats', 'search']); + queryClient.invalidateQueries(chatKeys.chatMessages(chatId)); + 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(['chats', 'search']); + queryClient.invalidateQueries(chatKeys.chatMessages(chatId)); + queryClient.invalidateQueries(chatKeys.chatSearch()); }, }); @@ -194,7 +200,7 @@ const useChatSilences = () => { return data; }; - return useQuery(['chatSilences'], getChatSilences, { + return useQuery(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 };