upgrade and refactor for react-query v5

src/renderer/features/lyrics/lyrics.tsx

@@ -1,3 +1,4 @@
+import { useQuery } from '@tanstack/react-query';
 import { AnimatePresence, motion } from 'motion/react';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
@@ -7,12 +8,9 @@ import styles from './lyrics.module.css';
 
 import { queryKeys } from '/@/renderer/api/query-keys';
 import { ErrorFallback } from '/@/renderer/features/action-required';
+import { translateLyrics } from '/@/renderer/features/lyrics/api/lyric-translate';
+import { lyricsQueries } from '/@/renderer/features/lyrics/api/lyrics-api';
 import { LyricsActions } from '/@/renderer/features/lyrics/lyrics-actions';
-import {
-    useSongLyricsByRemoteId,
-    useSongLyricsBySong,
-} from '/@/renderer/features/lyrics/queries/lyric-query';
-import { translateLyrics } from '/@/renderer/features/lyrics/queries/lyric-translate';
 import {
     SynchronizedLyrics,
     SynchronizedLyricsProps,
@@ -43,12 +41,14 @@ export const Lyrics = () => {
     const [translatedLyrics, setTranslatedLyrics] = useState<null | string>(null);
     const [showTranslation, setShowTranslation] = useState(false);
 
-    const { data, isInitialLoading } = useSongLyricsBySong(
-        {
-            query: { songId: currentSong?.id || '' },
-            serverId: currentSong?.serverId || '',
-        },
-        currentSong,
+    const { data, isInitialLoading } = useQuery(
+        lyricsQueries.songLyrics(
+            {
+                query: { songId: currentSong?.id || '' },
+                serverId: currentSong?.serverId || '',
+            },
+            currentSong,
+        ),
     );
 
     const [override, setOverride] = useState<LyricsOverride | undefined>(undefined);
@@ -116,17 +116,19 @@ export const Lyrics = () => {
         await fetchTranslation();
     }, [translatedLyrics, showTranslation, fetchTranslation]);
 
-    const { isInitialLoading: isOverrideLoading } = useSongLyricsByRemoteId({
-        options: {
-            enabled: !!override,
-        },
-        query: {
-            remoteSongId: override?.id,
-            remoteSource: override?.source as LyricSource | undefined,
-            song: currentSong,
-        },
-        serverId: currentSong?.serverId,
-    });
+    const { isInitialLoading: isOverrideLoading } = useQuery(
+        lyricsQueries.songLyricsByRemoteId({
+            options: {
+                enabled: !!override,
+            },
+            query: {
+                remoteSongId: override?.id,
+                remoteSource: override?.source as LyricSource | undefined,
+                song: currentSong,
+            },
+            serverId: currentSong?.serverId || '',
+        }),
+    );
 
     useEffect(() => {
         const unsubSongChange = usePlayerStore.subscribe(