Refactor/#577 query 위계 질서 정립

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 }));
     },
   });
 

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) => {
       </BottomSheet>
     ));
 
-  const { data: comments } = useQuery(commentsQueryOptions(songId, partId));
+  const { data: comments } = useQuery(commentsQueries.list({ songId, partId }));
 
   if (!comments) {
     return null;

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),
+    }),
+};

frontend/src/features/songs/hooks/useExtraSongDetail.ts

@@ -2,10 +2,7 @@
 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 @@
     isLoading: isLoadingPrevSongDetails,
     hasPreviousPage,
   } = useInfiniteQuery(
-    extraPrevSongDetailsInfiniteQueryOptions(Number(songIdParams), genreParams as Genre)
+    songDetailQueries.prevEntries({ songId: Number(songIdParams), genre: genreParams as Genre })
   );
 
   const {
@@ -26,7 +23,7 @@
     isLoading: isLoadingNextSongDetails,
     hasNextPage,
   } = useInfiniteQuery(
-    extraNextSongDetailsInfiniteQueryOptions(Number(songIdParams), genreParams as Genre)
+    songDetailQueries.nextEntries({ songId: Number(songIdParams), genre: genreParams as Genre })
   );
 
   const prevObserverRef = useRef<IntersectionObserver | null>(null);
@@ -41,7 +38,7 @@
     }
 
     prevObserverRef.current?.disconnect();
   }, []);
 
   const getExtraNextSongDetailsOnObserve: React.RefCallback<HTMLDivElement> = useCallback((dom) => {
     if (dom !== null) {
@@ -52,7 +49,7 @@
     }
 
     nextObserverRef.current?.disconnect();
   }, []);
 
   return {
     extraPrevSongDetails,

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<HTMLDivElement> = useCallback((dom) => {

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,
+    }),
+};