Refactor all query hooks

src/renderer/features/albums/queries/album-detail-query.ts

@@ -1,22 +1,20 @@
 import { useQuery } from '@tanstack/react-query';
 import { queryKeys } from '/@/renderer/api/query-keys';
-import type { QueryOptions } from '/@/renderer/lib/react-query';
+import type { QueryHookArgs } from '/@/renderer/lib/react-query';
-import { useCurrentServer } from '../../../store/auth.store';
+import { getServerById } from '../../../store/auth.store';
-import type { AlbumDetailQuery, RawAlbumDetailResponse } from '/@/renderer/api/types';
+import type { AlbumDetailQuery } from '/@/renderer/api/types';
 import { controller } from '/@/renderer/api/controller';
-import { useCallback } from 'react';
-import { api } from '/@/renderer/api';
 
-export const useAlbumDetail = (query: AlbumDetailQuery, options?: QueryOptions) => {
+export const useAlbumDetail = (args: QueryHookArgs<AlbumDetailQuery>) => {
-  const server = useCurrentServer();
+  const { options, query, serverId } = args;
+  const server = getServerById(serverId);
 
   return useQuery({
-    queryFn: ({ signal }) => controller.getAlbumDetail({ query, server, signal }),
+    queryFn: ({ signal }) => {
+      if (!server) throw new Error('Server not found');
+      return controller.getAlbumDetail({ apiClientProps: { server, signal }, query });
+    },
     queryKey: queryKeys.albums.detail(server?.id || '', query),
-    select: useCallback(
-      (data: RawAlbumDetailResponse | undefined) => api.normalize.albumDetail(data, server),
-      [server],
-    ),
     ...options,
   });
 };

src/renderer/features/albums/queries/album-list-query.ts

@@ -1,23 +1,27 @@
-import { useCallback } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { controller } from '/@/renderer/api/controller';
 import { queryKeys } from '/@/renderer/api/query-keys';
-import type { AlbumListQuery, RawAlbumListResponse } from '/@/renderer/api/types';
+import type { AlbumListQuery } from '/@/renderer/api/types';
-import type { QueryOptions } from '/@/renderer/lib/react-query';
+import type { QueryHookArgs } from '/@/renderer/lib/react-query';
-import { useCurrentServer } from '/@/renderer/store';
+import { getServerById } from '/@/renderer/store';
-import { api } from '/@/renderer/api';
 
-export const useAlbumList = (query: AlbumListQuery, options?: QueryOptions) => {
+export const useAlbumList = (args: QueryHookArgs<AlbumListQuery>) => {
-  const server = useCurrentServer();
+  const { options, query, serverId } = args;
+  const server = getServerById(serverId);
 
   return useQuery({
-    enabled: !!server?.id,
+    enabled: !!serverId,
-    queryFn: ({ signal }) => controller.getAlbumList({ query, server, signal }),
+    queryFn: ({ signal }) => {
-    queryKey: queryKeys.albums.list(server?.id || '', query),
+      if (!server) throw new Error('Server not found');
-    select: useCallback(
+      return controller.getAlbumList({
-      (data: RawAlbumListResponse | undefined) => api.normalize.albumList(data, server),
+        apiClientProps: {
-      [server],
+          server,
-    ),
+          signal,
+        },
+        query,
+      });
+    },
+    queryKey: queryKeys.albums.list(serverId || '', query),
     ...options,
   });
 };

src/renderer/features/artists/queries/album-artist-detail-query.ts

@@ -1,23 +1,21 @@
-import { useCallback } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { queryKeys } from '/@/renderer/api/query-keys';
-import type { AlbumArtistDetailQuery, RawAlbumArtistDetailResponse } from '/@/renderer/api/types';
+import type { AlbumArtistDetailQuery } from '/@/renderer/api/types';
-import type { QueryOptions } from '/@/renderer/lib/react-query';
+import { getServerById } from '/@/renderer/store';
-import { useCurrentServer } from '/@/renderer/store';
 import { api } from '/@/renderer/api';
+import { QueryHookArgs } from '../../../lib/react-query';
 
-export const useAlbumArtistDetail = (query: AlbumArtistDetailQuery, options?: QueryOptions) => {
+export const useAlbumArtistDetail = (args: QueryHookArgs<AlbumArtistDetailQuery>) => {
-  const server = useCurrentServer();
+  const { options, query, serverId } = args || {};
+  const server = getServerById(serverId);
 
   return useQuery({
     enabled: !!server?.id && !!query.id,
-    queryFn: ({ signal }) => api.controller.getAlbumArtistDetail({ query, server, signal }),
+    queryFn: ({ signal }) => {
+      if (!server) throw new Error('Server not found');
+      return api.controller.getAlbumArtistDetail({ apiClientProps: { server, signal }, query });
+    },
     queryKey: queryKeys.albumArtists.detail(server?.id || '', query),
-    select: useCallback(
-      (data: RawAlbumArtistDetailResponse | undefined) =>
-        api.normalize.albumArtistDetail(data, server),
-      [server],
-    ),
     ...options,
   });
 };

src/renderer/features/artists/queries/album-artist-list-query.ts

@@ -1,22 +1,21 @@
-import { useCallback } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { queryKeys } from '/@/renderer/api/query-keys';
-import type { AlbumArtistListQuery, RawAlbumArtistListResponse } from '/@/renderer/api/types';
+import type { AlbumArtistListQuery } from '/@/renderer/api/types';
-import type { QueryOptions } from '/@/renderer/lib/react-query';
+import { getServerById } from '/@/renderer/store';
-import { useCurrentServer } from '/@/renderer/store';
 import { api } from '/@/renderer/api';
+import { QueryHookArgs } from '../../../lib/react-query';
 
-export const useAlbumArtistList = (query: AlbumArtistListQuery, options?: QueryOptions) => {
+export const useAlbumArtistList = (args: QueryHookArgs<AlbumArtistListQuery>) => {
-  const server = useCurrentServer();
+  const { options, query, serverId } = args || {};
+  const server = getServerById(serverId);
 
   return useQuery({
     enabled: !!server?.id,
-    queryFn: ({ signal }) => api.controller.getAlbumArtistList({ query, server, signal }),
+    queryFn: ({ signal }) => {
+      if (!server) throw new Error('Server not found');
+      api.controller.getAlbumArtistList({ apiClientProps: { server, signal }, query });
+    },
     queryKey: queryKeys.albumArtists.list(server?.id || '', query),
-    select: useCallback(
-      (data: RawAlbumArtistListResponse | undefined) => api.normalize.albumArtistList(data, server),
-      [server],
-    ),
     ...options,
   });
 };

src/renderer/features/artists/queries/artist-info-query.ts

@@ -1,23 +1,21 @@
-import { useCallback } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { queryKeys } from '/@/renderer/api/query-keys';
-import type { AlbumArtistDetailQuery, RawAlbumArtistDetailResponse } from '/@/renderer/api/types';
+import type { AlbumArtistDetailQuery } from '/@/renderer/api/types';
-import type { QueryOptions } from '/@/renderer/lib/react-query';
+import { getServerById } from '/@/renderer/store';
-import { useCurrentServer } from '/@/renderer/store';
 import { api } from '/@/renderer/api';
+import { QueryHookArgs } from '../../../lib/react-query';
 
-export const useAlbumArtistInfo = (query: AlbumArtistDetailQuery, options?: QueryOptions) => {
+export const useAlbumArtistInfo = (args: QueryHookArgs<AlbumArtistDetailQuery>) => {
-  const server = useCurrentServer();
+  const { options, query, serverId } = args || {};
+  const server = getServerById(serverId);
 
   return useQuery({
     enabled: !!server?.id && !!query.id,
-    queryFn: ({ signal }) => api.controller.getAlbumArtistDetail({ query, server, signal }),
+    queryFn: ({ signal }) => {
+      if (!server) throw new Error('Server not found');
+      return api.controller.getAlbumArtistDetail({ apiClientProps: { server, signal }, query });
+    },
     queryKey: queryKeys.albumArtists.detail(server?.id || '', query),
-    select: useCallback(
-      (data: RawAlbumArtistDetailResponse | undefined) =>
-        api.normalize.albumArtistDetail(data, server),
-      [server],
-    ),
     ...options,
   });
 };

src/renderer/features/artists/queries/top-songs-list-query.ts

@@ -1,22 +1,21 @@
-import { useCallback } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { queryKeys } from '/@/renderer/api/query-keys';
-import type { RawTopSongListResponse, TopSongListQuery } from '/@/renderer/api/types';
+import type { TopSongListQuery } from '/@/renderer/api/types';
-import type { QueryOptions } from '/@/renderer/lib/react-query';
+import type { QueryHookArgs } from '/@/renderer/lib/react-query';
-import { useCurrentServer } from '/@/renderer/store';
+import { getServerById } from '/@/renderer/store';
 import { api } from '/@/renderer/api';
 
-export const useTopSongsList = (query: TopSongListQuery, options?: QueryOptions) => {
+export const useTopSongsList = (args: QueryHookArgs<TopSongListQuery>) => {
-  const server = useCurrentServer();
+  const { options, query, serverId } = args || {};
+  const server = getServerById(serverId);
 
   return useQuery({
     enabled: !!server?.id,
-    queryFn: ({ signal }) => api.controller.getTopSongList({ query, server, signal }),
+    queryFn: ({ signal }) => {
+      if (!server) throw new Error('Server not found');
+      return api.controller.getTopSongList({ apiClientProps: { server, signal }, query });
+    },
     queryKey: queryKeys.albumArtists.topSongs(server?.id || '', query),
-    select: useCallback(
-      (data: RawTopSongListResponse | undefined) => api.normalize.topSongList(data, server),
-      [server],
-    ),
     ...options,
   });
 };

src/renderer/features/home/queries/recently-played-query.ts

@@ -1,20 +1,13 @@
-import { useCallback } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { api } from '/@/renderer/api';
-import { ndNormalize } from '/@/renderer/api/navidrome.api';
-import { NDAlbum } from '/@/renderer/api/navidrome.types';
 import { queryKeys } from '/@/renderer/api/query-keys';
-import {
+import { AlbumListQuery, AlbumListSort, SortOrder } from '/@/renderer/api/types';
-  AlbumListQuery,
+import { getServerById } from '/@/renderer/store';
-  AlbumListSort,
+import { QueryHookArgs } from '/@/renderer/lib/react-query';
-  RawAlbumListResponse,
-  SortOrder,
-} from '/@/renderer/api/types';
-import { useCurrentServer } from '/@/renderer/store';
-import { QueryOptions } from '/@/renderer/lib/react-query';
 
-export const useRecentlyPlayed = (query: Partial<AlbumListQuery>, options?: QueryOptions) => {
+export const useRecentlyPlayed = (args: QueryHookArgs<Partial<AlbumListQuery>>) => {
-  const server = useCurrentServer();
+  const { options, query, serverId } = args;
+  const server = getServerById(serverId);
 
   const requestQuery: AlbumListQuery = {
     limit: 5,
@@ -25,34 +18,19 @@ export const useRecentlyPlayed = (query: Partial<AlbumListQuery>, options?: Quer
   };
 
   return useQuery({
-    queryFn: ({ signal }) =>
+    enabled: !!server?.id,
-      api.controller.getAlbumList({
+    queryFn: ({ signal }) => {
+      if (!server) throw new Error('Server not found');
+      return api.controller.getAlbumList({
+        apiClientProps: {
+          server,
+          signal,
+        },
         query: requestQuery,
-        server,
+      });
-        signal,
+    },
-      }),
-    queryKey: queryKeys.albums.list(server?.id || '', requestQuery),
-    select: useCallback(
-      (data: RawAlbumListResponse | undefined) => {
-        let albums;
-        switch (server?.type) {
-          case 'jellyfin':
-            break;
-          case 'navidrome':
-            albums = data?.items.map((item) => ndNormalize.album(item as NDAlbum, server));
-            break;
-          case 'subsonic':
-            break;
-        }
 
-        return {
+    queryKey: queryKeys.albums.list(server?.id || '', requestQuery),
-          items: albums,
-          startIndex: data?.startIndex,
-          totalRecordCount: data?.totalRecordCount,
-        };
-      },
-      [server],
-    ),
     ...options,
   });
 };

src/renderer/features/playlists/queries/playlist-detail-query.ts

@@ -1,22 +1,21 @@
-import { useCallback } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { queryKeys } from '/@/renderer/api/query-keys';
-import type { PlaylistDetailQuery, RawPlaylistDetailResponse } from '/@/renderer/api/types';
+import type { PlaylistDetailQuery } from '/@/renderer/api/types';
-import type { QueryOptions } from '/@/renderer/lib/react-query';
+import type { QueryHookArgs } from '/@/renderer/lib/react-query';
-import { useCurrentServer } from '/@/renderer/store';
+import { getServerById } from '/@/renderer/store';
 import { api } from '/@/renderer/api';
 
-export const usePlaylistDetail = (query: PlaylistDetailQuery, options?: QueryOptions) => {
+export const usePlaylistDetail = (args: QueryHookArgs<PlaylistDetailQuery>) => {
-  const server = useCurrentServer();
+  const { options, query, serverId } = args || {};
+  const server = getServerById(serverId);
 
   return useQuery({
     enabled: !!server?.id,
-    queryFn: ({ signal }) => api.controller.getPlaylistDetail({ query, server, signal }),
+    queryFn: ({ signal }) => {
+      if (!server) throw new Error('Server not found');
+      return api.controller.getPlaylistDetail({ apiClientProps: { server, signal }, query });
+    },
     queryKey: queryKeys.playlists.detail(server?.id || '', query.id, query),
-    select: useCallback(
-      (data: RawPlaylistDetailResponse | undefined) => api.normalize.playlistDetail(data, server),
-      [server],
-    ),
     ...options,
   });
 };

src/renderer/features/playlists/queries/playlist-list-query.ts

@@ -1,23 +1,26 @@
-import { useCallback } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { queryKeys } from '/@/renderer/api/query-keys';
-import type { PlaylistListQuery, RawPlaylistListResponse } from '/@/renderer/api/types';
+import type { PlaylistListQuery } from '/@/renderer/api/types';
 import type { QueryOptions } from '/@/renderer/lib/react-query';
-import { useCurrentServer } from '/@/renderer/store';
+import { getServerById } from '/@/renderer/store';
 import { api } from '/@/renderer/api';
 
-export const usePlaylistList = (query: PlaylistListQuery, options?: QueryOptions) => {
+export const usePlaylistList = (args: {
-  const server = useCurrentServer();
+  options?: QueryOptions;
+  query: PlaylistListQuery;
+  serverId?: string;
+}) => {
+  const { options, query, serverId } = args;
+  const server = getServerById(serverId);
 
   return useQuery({
     cacheTime: 1000 * 60 * 60,
     enabled: !!server?.id,
-    queryFn: ({ signal }) => api.controller.getPlaylistList({ query, server, signal }),
+    queryFn: ({ signal }) => {
+      if (!server) throw new Error('Server not found');
+      return api.controller.getPlaylistList({ apiClientProps: { server, signal }, query });
+    },
     queryKey: queryKeys.playlists.list(server?.id || '', query),
-    select: useCallback(
-      (data: RawPlaylistListResponse | undefined) => api.normalize.playlistList(data, server),
-      [server],
-    ),
     ...options,
   });
 };

src/renderer/features/playlists/queries/playlist-song-list-query.ts

@@ -1,35 +1,32 @@
-import { useCallback } from 'react';
+import { useQuery, useInfiniteQuery } from '@tanstack/react-query';
-import { useQuery, useInfiniteQuery, InfiniteData } from '@tanstack/react-query';
 import { queryKeys } from '/@/renderer/api/query-keys';
-import type { PlaylistSongListQuery, RawSongListResponse } from '/@/renderer/api/types';
+import type { PlaylistSongListQuery, SongListResponse } from '/@/renderer/api/types';
-import type { InfiniteQueryOptions, QueryOptions } from '/@/renderer/lib/react-query';
+import type { QueryHookArgs } from '/@/renderer/lib/react-query';
-import { useCurrentServer } from '/@/renderer/store';
+import { getServerById } from '/@/renderer/store';
 import { api } from '/@/renderer/api';
 
-export const usePlaylistSongList = (query: PlaylistSongListQuery, options?: QueryOptions) => {
+export const usePlaylistSongList = (args: QueryHookArgs<PlaylistSongListQuery>) => {
-  const server = useCurrentServer();
+  const { options, query, serverId } = args || {};
+  const server = getServerById(serverId);
 
   return useQuery({
     enabled: !!server?.id,
-    queryFn: ({ signal }) => api.controller.getPlaylistSongList({ query, server, signal }),
+    queryFn: ({ signal }) => {
+      if (!server) throw new Error('Server not found');
+      api.controller.getPlaylistSongList({ apiClientProps: { server, signal }, query });
+    },
     queryKey: queryKeys.playlists.songList(server?.id || '', query.id, query),
-    select: useCallback(
-      (data: RawSongListResponse | undefined) => api.normalize.songList(data, server),
-      [server],
-    ),
     ...options,
   });
 };
 
-export const usePlaylistSongListInfinite = (
+export const usePlaylistSongListInfinite = (args: QueryHookArgs<PlaylistSongListQuery>) => {
-  query: PlaylistSongListQuery,
+  const { options, query, serverId } = args || {};
-  options?: InfiniteQueryOptions,
+  const server = getServerById(serverId);
-) => {
-  const server = useCurrentServer();
 
   return useInfiniteQuery({
     enabled: !!server?.id,
-    getNextPageParam: (lastPage: RawSongListResponse, allPages) => {
+    getNextPageParam: (lastPage: SongListResponse, allPages) => {
       if (!lastPage?.items) return undefined;
       if (lastPage?.items?.length >= (query?.limit || 50)) {
         return allPages?.length;
@@ -45,17 +42,7 @@ export const usePlaylistSongListInfinite = (
       });
     },
     queryKey: queryKeys.playlists.detailSongList(server?.id || '', query.id, query),
-    select: useCallback(
+
-      (data: InfiniteData<RawSongListResponse | undefined>) => {
-        return {
-          ...data,
-          pages: data.pages.map((page, index) => {
-            return { ...api.normalize.songList(page, server), pageIndex: index };
-          }),
-        };
-      },
-      [server],
-    ),
     ...options,
   });
 };

src/renderer/features/songs/queries/song-list-query.ts

@@ -1,23 +1,21 @@
 import { useQuery } from '@tanstack/react-query';
-import { useCallback } from 'react';
 import { controller } from '/@/renderer/api/controller';
 import { queryKeys } from '/@/renderer/api/query-keys';
-import type { RawSongListResponse, SongListQuery } from '/@/renderer/api/types';
+import type { SongListQuery } from '/@/renderer/api/types';
-import { useCurrentServer } from '/@/renderer/store';
+import { getServerById } from '/@/renderer/store';
-import { api } from '/@/renderer/api';
+import type { QueryHookArgs } from '/@/renderer/lib/react-query';
-import type { QueryOptions } from '/@/renderer/lib/react-query';
 
-export const useSongList = (query: SongListQuery, options?: QueryOptions) => {
+export const useSongList = (args: QueryHookArgs<SongListQuery>) => {
-  const server = useCurrentServer();
+  const { query, options, serverId } = args || {};
+  const server = getServerById(serverId);
 
   return useQuery({
     enabled: !!server?.id,
-    queryFn: ({ signal }) => controller.getSongList({ query, server, signal }),
+    queryFn: ({ signal }) => {
+      if (!server) throw new Error('Server not found');
+      controller.getSongList({ apiClientProps: { server, signal }, query });
+    },
     queryKey: queryKeys.songs.list(server?.id || '', query),
-    select: useCallback(
-      (data: RawSongListResponse | undefined) => api.normalize.songList(data, server),
-      [server],
-    ),
     ...options,
   });
 };

src/renderer/features/users/queries/user-list-query.ts

@@ -1,22 +1,21 @@
 import { useQuery } from '@tanstack/react-query';
-import { useCallback } from 'react';
 import { queryKeys } from '/@/renderer/api/query-keys';
-import type { RawUserListResponse, UserListQuery } from '/@/renderer/api/types';
+import type { UserListQuery } from '/@/renderer/api/types';
-import { useCurrentServer } from '/@/renderer/store';
+import { getServerById } from '/@/renderer/store';
 import { api } from '/@/renderer/api';
-import type { QueryOptions } from '/@/renderer/lib/react-query';
+import type { QueryHookArgs } from '/@/renderer/lib/react-query';
 
-export const useUserList = (query: UserListQuery, options?: QueryOptions) => {
+export const useUserList = (args: QueryHookArgs<UserListQuery>) => {
-  const server = useCurrentServer();
+  const { query, serverId, options } = args || {};
+  const server = getServerById(serverId);
 
   return useQuery({
-    enabled: !!server?.id,
+    enabled: !!server,
-    queryFn: ({ signal }) => api.controller.getUserList({ query, server, signal }),
+    queryFn: ({ signal }) => {
+      if (!server) throw new Error('Server not found');
+      api.controller.getUserList({ apiClientProps: { server, signal }, query });
+    },
     queryKey: queryKeys.users.list(server?.id || '', query),
-    select: useCallback(
-      (data: RawUserListResponse | undefined) => api.normalize.userList(data, server),
-      [server],
-    ),
     ...options,
   });
 };