upgrade and refactor for react-query v5

src/renderer/features/search/api/search-api.ts

@@ -0,0 +1,22 @@
+import { queryOptions } from '@tanstack/react-query';
+
+import { api } from '/@/renderer/api';
+import { queryKeys } from '/@/renderer/api/query-keys';
+import { QueryHookArgs } from '/@/renderer/lib/react-query';
+import { getServerById } from '/@/renderer/store';
+import { SearchQuery } from '/@/shared/types/domain-types';
+
+export const searchQueries = {
+    search: (args: QueryHookArgs<SearchQuery>) => {
+        return queryOptions({
+            queryFn: ({ signal }) => {
+                return api.controller.search({
+                    apiClientProps: { server: getServerById(args.serverId), signal },
+                    query: args.query,
+                });
+            },
+            queryKey: queryKeys.search.list(args.serverId || '', args.query),
+            ...args.options,
+        });
+    },
+};

src/renderer/features/search/components/command-palette.tsx

@@ -1,16 +1,17 @@
 import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
+import { useQuery } from '@tanstack/react-query';
 import { Fragment, useCallback, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { generatePath, useNavigate } from 'react-router';
 
 import { usePlayQueueAdd } from '/@/renderer/features/player';
+import { searchQueries } from '/@/renderer/features/search/api/search-api';
 import { Command, CommandPalettePages } from '/@/renderer/features/search/components/command';
 import { CommandItemSelectable } from '/@/renderer/features/search/components/command-item-selectable';
 import { GoToCommands } from '/@/renderer/features/search/components/go-to-commands';
 import { HomeCommands } from '/@/renderer/features/search/components/home-commands';
 import { LibraryCommandItem } from '/@/renderer/features/search/components/library-command-item';
 import { ServerCommands } from '/@/renderer/features/search/components/server-commands';
-import { useSearch } from '/@/renderer/features/search/queries/search-query';
 import { AppRoute } from '/@/renderer/router/routes';
 import { useCurrentServer } from '/@/renderer/store';
 import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
@@ -48,19 +49,21 @@ export const CommandPalette = ({ modalProps }: CommandPaletteProps) => {
         });
     }, []);
 
-    const { data, isLoading } = useSearch({
-        options: { enabled: isHome && debouncedQuery !== '' && query !== '' },
-        query: {
-            albumArtistLimit: 4,
-            albumArtistStartIndex: 0,
-            albumLimit: 4,
-            albumStartIndex: 0,
-            query: debouncedQuery,
-            songLimit: 4,
-            songStartIndex: 0,
-        },
-        serverId: server?.id,
-    });
+    const { data, isLoading } = useQuery(
+        searchQueries.search({
+            options: { enabled: isHome && debouncedQuery !== '' && query !== '' },
+            query: {
+                albumArtistLimit: 4,
+                albumArtistStartIndex: 0,
+                albumLimit: 4,
+                albumStartIndex: 0,
+                query: debouncedQuery,
+                songLimit: 4,
+                songStartIndex: 0,
+            },
+            serverId: server?.id,
+        }),
+    );
 
     const showAlbumGroup = isHome && Boolean(query && data && data?.albums?.length > 0);
     const showArtistGroup = isHome && Boolean(query && data && data?.albumArtists?.length > 0);

src/renderer/features/search/queries/search-query.ts

@@ -1,28 +0,0 @@
-import { useQuery } from '@tanstack/react-query';
-
-import { api } from '/@/renderer/api';
-import { queryKeys } from '/@/renderer/api/query-keys';
-import { QueryHookArgs } from '/@/renderer/lib/react-query';
-import { getServerById } from '/@/renderer/store';
-import { SearchQuery } from '/@/shared/types/domain-types';
-
-export const useSearch = (args: QueryHookArgs<SearchQuery>) => {
-    const { options, query, serverId } = args;
-    const server = getServerById(serverId);
-
-    return useQuery({
-        enabled: !!serverId,
-        queryFn: ({ signal }) => {
-            if (!server) throw new Error('Server not found');
-            return api.controller.search({
-                apiClientProps: {
-                    server,
-                    signal,
-                },
-                query,
-            });
-        },
-        queryKey: queryKeys.search.list(serverId || '', query),
-        ...options,
-    });
-};