diff --git a/frontend/src/features/comments/components/CommentForm.tsx b/frontend/src/features/comments/components/CommentForm.tsx index 8f1dbca7..3b8d268d 100644 --- a/frontend/src/features/comments/components/CommentForm.tsx +++ b/frontend/src/features/comments/components/CommentForm.tsx @@ -8,6 +8,7 @@ import LoginModal from '@/features/auth/components/LoginModal'; import Avatar from '@/shared/components/Avatar'; import useToastContext from '@/shared/components/Toast/hooks/useToastContext'; import { useOverlay } from '@/shared/hooks/useOverlay'; +import { commentsQueries } from '../queries'; import { postComment } from '../remotes/comments'; interface CommentFormProps { @@ -43,7 +44,7 @@ const CommentForm = ({ songId, partId }: CommentFormProps) => { const { mutate: postNewComment, isPending: isPendingPostComment } = useMutation({ mutationFn: postComment, onSuccess: (_, { songId, partId }) => { - queryClient.invalidateQueries({ queryKey: ['comments', songId, partId] }); + queryClient.invalidateQueries(commentsQueries.list({ songId, partId })); }, }); diff --git a/frontend/src/features/comments/components/CommentList.tsx b/frontend/src/features/comments/components/CommentList.tsx index a6170675..33db5afa 100644 --- a/frontend/src/features/comments/components/CommentList.tsx +++ b/frontend/src/features/comments/components/CommentList.tsx @@ -5,7 +5,7 @@ import BottomSheet from '@/shared/components/BottomSheet/BottomSheet'; import Spacing from '@/shared/components/Spacing'; import SRHeading from '@/shared/components/SRHeading'; import { useOverlay } from '@/shared/hooks/useOverlay'; -import { commentsQueryOptions } from '../queries'; +import { commentsQueries } from '../queries'; import Comment from './Comment'; import CommentForm from './CommentForm'; import type { Comment as CommentType } from '../types/comment.type'; @@ -42,7 +42,7 @@ const CommentList = ({ songId, partId }: CommentListProps) => { )); - const { data: comments } = useQuery(commentsQueryOptions(songId, partId)); + const { data: comments } = useQuery(commentsQueries.list({ songId, partId })); if (!comments) { return null; diff --git a/frontend/src/features/comments/queries/index.ts b/frontend/src/features/comments/queries/index.ts index a8125850..7825379f 100644 --- a/frontend/src/features/comments/queries/index.ts +++ b/frontend/src/features/comments/queries/index.ts @@ -1,8 +1,11 @@ import { queryOptions } from '@tanstack/react-query'; import { getComments } from '../remotes/comments'; -export const commentsQueryOptions = (songId: number, partId: number) => - queryOptions({ - queryKey: ['comments', songId, partId], - queryFn: () => getComments(songId, partId), - }); +export const commentsQueries = { + all: ['comments'], + list: ({ songId, partId }: { songId: number; partId: number }) => + queryOptions({ + queryKey: [...commentsQueries.all, songId, partId], + queryFn: () => getComments(songId, partId), + }), +}; diff --git a/frontend/src/features/songs/hooks/useExtraSongDetail.ts b/frontend/src/features/songs/hooks/useExtraSongDetail.ts index d1556732..0f2286c5 100644 --- a/frontend/src/features/songs/hooks/useExtraSongDetail.ts +++ b/frontend/src/features/songs/hooks/useExtraSongDetail.ts @@ -2,10 +2,7 @@ import { useInfiniteQuery } from '@tanstack/react-query'; import { useCallback, useRef } from 'react'; import useValidParams from '@/shared/hooks/useValidParams'; import createObserver from '@/shared/utils/createObserver'; -import { - extraPrevSongDetailsInfiniteQueryOptions, - extraNextSongDetailsInfiniteQueryOptions, -} from '../queries'; +import { songDetailQueries } from '../queries'; import type { Genre } from '../types/Song.type'; const useExtraSongDetail = () => { @@ -17,7 +14,7 @@ const useExtraSongDetail = () => { isLoading: isLoadingPrevSongDetails, hasPreviousPage, } = useInfiniteQuery( - extraPrevSongDetailsInfiniteQueryOptions(Number(songIdParams), genreParams as Genre) + songDetailQueries.prevEntries({ songId: Number(songIdParams), genre: genreParams as Genre }) ); const { @@ -26,7 +23,7 @@ const useExtraSongDetail = () => { isLoading: isLoadingNextSongDetails, hasNextPage, } = useInfiniteQuery( - extraNextSongDetailsInfiniteQueryOptions(Number(songIdParams), genreParams as Genre) + songDetailQueries.nextEntries({ songId: Number(songIdParams), genre: genreParams as Genre }) ); const prevObserverRef = useRef(null); diff --git a/frontend/src/features/songs/hooks/useSongDetailEntries.ts b/frontend/src/features/songs/hooks/useSongDetailEntries.ts index d9e18771..93f1c5c9 100644 --- a/frontend/src/features/songs/hooks/useSongDetailEntries.ts +++ b/frontend/src/features/songs/hooks/useSongDetailEntries.ts @@ -1,14 +1,14 @@ import { useQuery } from '@tanstack/react-query'; import { useCallback } from 'react'; import useValidParams from '@/shared/hooks/useValidParams'; -import { songDetailEntriesQueryOptions } from '../queries'; +import { songDetailQueries } from '../queries'; import type { Genre } from '../types/Song.type'; const useSongDetailEntries = () => { const { id: songIdParams, genre: genreParams } = useValidParams(); const { data: songDetailEntries, isLoading: isLoadingSongDetailEntries } = useQuery( - songDetailEntriesQueryOptions(Number(songIdParams), genreParams as Genre) + songDetailQueries.entries({ songId: Number(songIdParams), genre: genreParams as Genre }) ); const scrollIntoCurrentSong: React.RefCallback = useCallback((dom) => { diff --git a/frontend/src/features/songs/queries/index.ts b/frontend/src/features/songs/queries/index.ts index 87ef32d8..c5baa216 100644 --- a/frontend/src/features/songs/queries/index.ts +++ b/frontend/src/features/songs/queries/index.ts @@ -6,28 +6,29 @@ import { } from '../remotes/songs'; import type { Genre } from '../types/Song.type'; -export const songDetailEntriesQueryOptions = (songId: number, genre: Genre) => - queryOptions({ - queryKey: ['songDetailEntries', songId, genre], - queryFn: () => getSongDetailEntries(songId, genre), - staleTime: Infinity, - }); - -export const extraPrevSongDetailsInfiniteQueryOptions = (songId: number, genre: Genre) => - infiniteQueryOptions({ - queryKey: ['extraPrevSongDetails'], - queryFn: ({ pageParam }) => getExtraPrevSongDetails(pageParam, genre), - getPreviousPageParam: (firstPage) => firstPage[0]?.id ?? null, - getNextPageParam: () => null, - initialPageParam: songId, - staleTime: Infinity, - }); - -export const extraNextSongDetailsInfiniteQueryOptions = (songId: number, genre: Genre) => - infiniteQueryOptions({ - queryKey: ['extraNextSongDetails'], - queryFn: ({ pageParam }) => getExtraNextSongDetails(pageParam, genre), - getNextPageParam: (lastPage) => lastPage.at(-1)?.id ?? null, - initialPageParam: songId, - staleTime: Infinity, - }); +export const songDetailQueries = { + all: ['songDetail'], + entries: ({ songId, genre }: { songId: number; genre: Genre }) => + queryOptions({ + queryKey: [...songDetailQueries.all, 'entries', songId, genre], + queryFn: () => getSongDetailEntries(songId, genre), + staleTime: Infinity, + }), + prevEntries: ({ songId, genre }: { songId: number; genre: Genre }) => + infiniteQueryOptions({ + queryKey: [...songDetailQueries.all, 'prevEntries', songId, genre], + queryFn: ({ pageParam }) => getExtraPrevSongDetails(pageParam, genre), + getPreviousPageParam: (firstPage) => firstPage[0]?.id ?? null, + getNextPageParam: () => null, + initialPageParam: songId, + staleTime: Infinity, + }), + nextEntries: ({ songId, genre }: { songId: number; genre: Genre }) => + infiniteQueryOptions({ + queryKey: [...songDetailQueries.all, 'nextEntries', songId, genre], + queryFn: ({ pageParam }) => getExtraNextSongDetails(pageParam, genre), + getNextPageParam: (lastPage) => lastPage.at(-1)?.id ?? null, + initialPageParam: songId, + staleTime: Infinity, + }), +};