optimize ND/JF list fetch

- no longer requires 2 separate fetches for count and data
- the list count includes the first page so we set the query data directly

src/renderer/api/utils-list-count.ts

@@ -0,0 +1,68 @@
+import { QueryClient } from '@tanstack/react-query';
+
+import { getServerById } from '/@/renderer/store';
+import { ServerType } from '/@/shared/types/domain-types';
+
+interface OptimizedListCountOptions<TQuery, TListQuery, TResponse> {
+    client: QueryClient;
+    listQueryFn: (args: {
+        apiClientProps: { serverId: string; signal?: AbortSignal };
+        query: TListQuery;
+    }) => Promise<TResponse>;
+    listQueryKeyFn: (serverId: string, query: TListQuery) => readonly unknown[];
+    query: TQuery;
+    serverId: string;
+    signal?: AbortSignal;
+}
+
+export const getOptimizedListCount = async <
+    TQuery,
+    TListQuery extends { limit?: number; startIndex?: number },
+    TResponse extends { totalRecordCount: null | number },
+>({
+    client,
+    listQueryFn,
+    listQueryKeyFn,
+    query,
+    serverId,
+    signal,
+}: OptimizedListCountOptions<TQuery, TListQuery, TResponse>): Promise<null | number> => {
+    const server = getServerById(serverId);
+
+    if (server?.type !== ServerType.NAVIDROME && server?.type !== ServerType.JELLYFIN) {
+        return null;
+    }
+
+    const limit =
+        typeof query === 'object' &&
+        query !== null &&
+        'limit' in query &&
+        typeof (query as any).limit === 'number' &&
+        (query as any).limit > 0
+            ? (query as any).limit
+            : 100;
+
+    // In most cases, the list count is called when entering the first page, so we fetch from the first page
+    // This optimization will only help in this case, otherwise we still need 2 requests to get both the count and the data
+    const pageQuery = {
+        ...query,
+        limit,
+        startIndex: 0,
+    } as unknown as TListQuery;
+
+    const pageQueryKey = listQueryKeyFn(serverId, pageQuery);
+    const cachedPage = client.getQueryData(pageQueryKey);
+
+    if (cachedPage && typeof cachedPage === 'object' && 'totalRecordCount' in cachedPage) {
+        return (cachedPage as TResponse).totalRecordCount ?? 0;
+    }
+
+    const pageResult = await listQueryFn({
+        apiClientProps: { serverId, signal },
+        query: pageQuery,
+    });
+
+    client.setQueryData(pageQueryKey, pageResult);
+
+    return pageResult.totalRecordCount ?? 0;
+};

src/renderer/features/albums/api/album-api.ts

@@ -1,7 +1,9 @@
 import { queryOptions } from '@tanstack/react-query';
 
 import { api } from '/@/renderer/api';
+import { controller } from '/@/renderer/api/controller';
 import { queryKeys } from '/@/renderer/api/query-keys';
+import { getOptimizedListCount } from '/@/renderer/api/utils-list-count';
 import { QueryHookArgs } from '/@/renderer/lib/react-query';
 import { AlbumDetailQuery, AlbumListQuery, ListCountQuery } from '/@/shared/types/domain-types';
 
@@ -36,8 +38,25 @@ export const albumQueries = {
     },
     listCount: (args: QueryHookArgs<ListCountQuery<AlbumListQuery>>) => {
         return queryOptions({
-            gcTime: 1000 * 60 * 60 * 12,
-            queryFn: ({ signal }) => {
+            gcTime: 1000 * 60 * 60,
+            queryFn: async ({ client, signal }) => {
+                const optimizedCount = await getOptimizedListCount<
+                    ListCountQuery<AlbumListQuery>,
+                    AlbumListQuery,
+                    { totalRecordCount: null | number }
+                >({
+                    client,
+                    listQueryFn: controller.getAlbumList,
+                    listQueryKeyFn: (serverId, query) => queryKeys.albums.list(serverId, query),
+                    query: args.query,
+                    serverId: args.serverId,
+                    signal,
+                });
+
+                if (optimizedCount !== null) {
+                    return optimizedCount;
+                }
+
                 return api.controller.getAlbumListCount({
                     apiClientProps: { serverId: args.serverId, signal },
                     query: args.query,
@@ -48,7 +67,7 @@ export const albumQueries = {
                 args.query,
                 args.query?.artistIds?.length === 1 ? args.query?.artistIds[0] : undefined,
             ),
-            staleTime: 1000 * 60 * 60 * 12,
+            staleTime: 1000 * 60 * 60,
             ...args.options,
         });
     },

src/renderer/features/albums/components/album-list-infinite-grid.tsx

@@ -30,7 +30,7 @@ export const AlbumListInfiniteGrid = ({
     size,
 }: AlbumListInfiniteGridProps) => {
     const listCountQuery = albumQueries.listCount({
-        query: { ...query },
+        query: { ...query, limit: itemsPerPage },
         serverId: serverId,
     }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
 

src/renderer/features/albums/components/album-list-infinite-table.tsx

@@ -37,7 +37,7 @@ export const AlbumListInfiniteTable = ({
     size = 'default',
 }: AlbumListInfiniteTableProps) => {
     const listCountQuery = albumQueries.listCount({
-        query: { ...query },
+        query: { ...query, limit: itemsPerPage },
         serverId: serverId,
     }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
 

src/renderer/features/albums/components/album-list-paginated-grid.tsx

@@ -31,15 +31,15 @@ export const AlbumListPaginatedGrid = ({
     serverId,
     size,
 }: AlbumListPaginatedGridProps) => {
+    const { currentPage, onChange } = useItemListPagination();
+
     const listCountQuery = albumQueries.listCount({
-        query: { ...query },
+        query: { ...query, limit: itemsPerPage },
         serverId: serverId,
     }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
 
     const listQueryFn = api.controller.getAlbumList;
 
-    const { currentPage, onChange } = useItemListPagination();
-
     const { data, pageCount, totalItemCount } = useItemListPaginatedLoader({
         currentPage,
         eventKey: ItemListKey.ALBUM,

src/renderer/features/albums/components/album-list-paginated-table.tsx

@@ -38,15 +38,15 @@ export const AlbumListPaginatedTable = ({
     serverId,
     size = 'default',
 }: AlbumListPaginatedTableProps) => {
+    const { currentPage, onChange } = useItemListPagination();
+
     const listCountQuery = albumQueries.listCount({
-        query: { ...query },
+        query: { ...query, limit: itemsPerPage },
         serverId: serverId,
     }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
 
     const listQueryFn = api.controller.getAlbumList;
 
-    const { currentPage, onChange } = useItemListPagination();
-
     const { data, pageCount, totalItemCount } = useItemListPaginatedLoader({
         currentPage,
         eventKey: ItemListKey.ALBUM,

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

@@ -1,7 +1,9 @@
 import { queryOptions } from '@tanstack/react-query';
 
 import { api } from '/@/renderer/api';
+import { controller } from '/@/renderer/api/controller';
 import { queryKeys } from '/@/renderer/api/query-keys';
+import { getOptimizedListCount } from '/@/renderer/api/utils-list-count';
 import { QueryHookArgs } from '/@/renderer/lib/react-query';
 import {
     AlbumArtistDetailQuery,
@@ -38,8 +40,25 @@ export const artistsQueries = {
     },
     albumArtistListCount: (args: QueryHookArgs<ListCountQuery<AlbumArtistListQuery>>) => {
         return queryOptions({
-            gcTime: 1000 * 60 * 60 * 12,
-            queryFn: ({ signal }) => {
+            gcTime: 1000 * 60 * 60,
+            queryFn: async ({ client, signal }) => {
+                const optimizedCount = await getOptimizedListCount<
+                    ListCountQuery<AlbumArtistListQuery>,
+                    AlbumArtistListQuery,
+                    { totalRecordCount: null | number }
+                >({
+                    client,
+                    listQueryFn: controller.getAlbumArtistList,
+                    listQueryKeyFn: queryKeys.albumArtists.list,
+                    query: args.query,
+                    serverId: args.serverId,
+                    signal,
+                });
+
+                if (optimizedCount !== null) {
+                    return optimizedCount;
+                }
+
                 return api.controller.getAlbumArtistListCount({
                     apiClientProps: { serverId: args.serverId, signal },
                     query: args.query,
@@ -49,7 +68,7 @@ export const artistsQueries = {
                 args.serverId,
                 Object.keys(args.query).length === 0 ? undefined : args.query,
             ),
-            staleTime: 1000 * 60 * 60 * 12,
+            staleTime: 1000 * 60 * 60,
             ...args.options,
         });
     },
@@ -67,8 +86,25 @@ export const artistsQueries = {
     },
     artistListCount: (args: QueryHookArgs<ListCountQuery<ArtistListQuery>>) => {
         return queryOptions({
-            gcTime: 1000 * 60 * 60 * 12,
-            queryFn: ({ signal }) => {
+            gcTime: 1000 * 60 * 60,
+            queryFn: async ({ client, signal }) => {
+                const optimizedCount = await getOptimizedListCount<
+                    ListCountQuery<ArtistListQuery>,
+                    ArtistListQuery,
+                    { totalRecordCount: null | number }
+                >({
+                    client,
+                    listQueryFn: controller.getArtistList,
+                    listQueryKeyFn: queryKeys.artists.list,
+                    query: args.query,
+                    serverId: args.serverId,
+                    signal,
+                });
+
+                if (optimizedCount !== null) {
+                    return optimizedCount;
+                }
+
                 return api.controller
                     .getArtistList({
                         apiClientProps: { serverId: args.serverId, signal },
@@ -80,7 +116,7 @@ export const artistsQueries = {
                 args.serverId,
                 Object.keys(args.query).length === 0 ? undefined : args.query,
             ),
-            staleTime: 1000 * 60 * 60 * 12,
+            staleTime: 1000 * 60 * 60,
             ...args.options,
         });
     },

src/renderer/features/artists/components/album-artist-list-infinite-grid.tsx

@@ -31,7 +31,7 @@ export const AlbumArtistListInfiniteGrid = ({
     size,
 }: AlbumArtistListInfiniteGridProps) => {
     const listCountQuery = artistsQueries.albumArtistListCount({
-        query: { ...query },
+        query: { ...query, limit: itemsPerPage },
         serverId: serverId,
     }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
 

src/renderer/features/artists/components/album-artist-list-infinite-table.tsx

@@ -38,7 +38,7 @@ export const AlbumArtistListInfiniteTable = ({
     size = 'default',
 }: AlbumArtistListInfiniteTableProps) => {
     const listCountQuery = artistsQueries.albumArtistListCount({
-        query: { ...query },
+        query: { ...query, limit: itemsPerPage },
         serverId: serverId,
     }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
 

src/renderer/features/artists/components/album-artist-list-paginated-grid.tsx

@@ -32,15 +32,15 @@ export const AlbumArtistListPaginatedGrid = ({
     serverId,
     size,
 }: AlbumArtistListPaginatedGridProps) => {
+    const { currentPage, onChange } = useItemListPagination();
+
     const listCountQuery = artistsQueries.albumArtistListCount({
-        query: { ...query },
+        query: { ...query, limit: itemsPerPage },
         serverId: serverId,
     }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
 
     const listQueryFn = api.controller.getAlbumArtistList;
 
-    const { currentPage, onChange } = useItemListPagination();
-
     const { data, pageCount, totalItemCount } = useItemListPaginatedLoader({
         currentPage,
         eventKey: ItemListKey.ALBUM_ARTIST,

src/renderer/features/artists/components/album-artist-list-paginated-table.tsx

@@ -39,15 +39,15 @@ export const AlbumArtistListPaginatedTable = ({
     serverId,
     size = 'default',
 }: AlbumArtistListPaginatedTableProps) => {
+    const { currentPage, onChange } = useItemListPagination();
+
     const listCountQuery = artistsQueries.albumArtistListCount({
-        query: { ...query },
+        query: { ...query, limit: itemsPerPage },
         serverId: serverId,
     }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
 
     const listQueryFn = api.controller.getAlbumArtistList;
 
-    const { currentPage, onChange } = useItemListPagination();
-
     const { data, pageCount, totalItemCount } = useItemListPaginatedLoader({
         currentPage,
         eventKey: ItemListKey.ALBUM_ARTIST,

src/renderer/features/artists/components/artist-list-infinite-grid.tsx

@@ -30,7 +30,7 @@ export const ArtistListInfiniteGrid = ({
     size,
 }: ArtistListInfiniteGridProps) => {
     const listCountQuery = artistsQueries.artistListCount({
-        query: { ...query },
+        query: { ...query, limit: itemsPerPage },
         serverId: serverId,
     }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
 

src/renderer/features/artists/components/artist-list-infinite-table.tsx

@@ -37,7 +37,7 @@ export const ArtistListInfiniteTable = ({
     size = 'default',
 }: ArtistListInfiniteTableProps) => {
     const listCountQuery = artistsQueries.artistListCount({
-        query: { ...query },
+        query: { ...query, limit: itemsPerPage },
         serverId: serverId,
     }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
 

src/renderer/features/artists/components/artist-list-paginated-grid.tsx

@@ -31,15 +31,15 @@ export const ArtistListPaginatedGrid = ({
     serverId,
     size,
 }: ArtistListPaginatedGridProps) => {
+    const { currentPage, onChange } = useItemListPagination();
+
     const listCountQuery = artistsQueries.artistListCount({
-        query: { ...query },
+        query: { ...query, limit: itemsPerPage },
         serverId: serverId,
     }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
 
     const listQueryFn = api.controller.getArtistList;
 
-    const { currentPage, onChange } = useItemListPagination();
-
     const { data, pageCount, totalItemCount } = useItemListPaginatedLoader({
         currentPage,
         eventKey: ItemListKey.ARTIST,

src/renderer/features/artists/components/artist-list-paginated-table.tsx

@@ -38,15 +38,15 @@ export const ArtistListPaginatedTable = ({
     serverId,
     size = 'default',
 }: ArtistListPaginatedTableProps) => {
+    const { currentPage, onChange } = useItemListPagination();
+
     const listCountQuery = artistsQueries.artistListCount({
-        query: { ...query },
+        query: { ...query, limit: itemsPerPage },
         serverId: serverId,
     }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
 
     const listQueryFn = api.controller.getArtistList;
 
-    const { currentPage, onChange } = useItemListPagination();
-
     const { data, pageCount, totalItemCount } = useItemListPaginatedLoader({
         currentPage,
         eventKey: ItemListKey.ARTIST,

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

@@ -28,7 +28,7 @@ export const genresQueries = {
     },
     listCount: (args: QueryHookArgs<ListCountQuery<GenreListQuery>>) => {
         return queryOptions({
-            gcTime: 1000 * 60 * 60 * 12,
+            gcTime: 1000 * 60 * 60,
             queryFn: ({ signal }) => {
                 return api.controller
                     .getGenreList({
@@ -41,7 +41,7 @@ export const genresQueries = {
                 args.serverId,
                 Object.keys(args.query).length === 0 ? undefined : args.query,
             ),
-            staleTime: 1000 * 60 * 60 * 12,
+            staleTime: 1000 * 60 * 60,
             ...args.options,
         });
     },

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

@@ -38,7 +38,7 @@ export const playlistsQueries = {
     },
     listCount: (args: QueryHookArgs<ListCountQuery<PlaylistListQuery>>) => {
         return queryOptions({
-            gcTime: 1000 * 60 * 60 * 12,
+            gcTime: 1000 * 60 * 60,
             queryFn: ({ signal }) => {
                 return api.controller.getPlaylistListCount({
                     apiClientProps: { serverId: args.serverId, signal },
@@ -49,7 +49,7 @@ export const playlistsQueries = {
                 args.serverId || '',
                 Object.keys(args.query).length === 0 ? undefined : args.query,
             ),
-            staleTime: 1000 * 60 * 60 * 12,
+            staleTime: 1000 * 60 * 60,
             ...args.options,
         });
     },

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

@@ -3,6 +3,7 @@ import { queryOptions } from '@tanstack/react-query';
 import { api } from '/@/renderer/api';
 import { controller } from '/@/renderer/api/controller';
 import { queryKeys } from '/@/renderer/api/query-keys';
+import { getOptimizedListCount } from '/@/renderer/api/utils-list-count';
 import { QueryHookArgs } from '/@/renderer/lib/react-query';
 import {
     ArtistRadioQuery,
@@ -53,8 +54,25 @@ export const songsQueries = {
     },
     listCount: (args: QueryHookArgs<ListCountQuery<SongListQuery>>) => {
         return queryOptions({
-            gcTime: 1000 * 60 * 60 * 12,
-            queryFn: ({ signal }) => {
+            gcTime: 1000 * 60 * 60,
+            queryFn: async ({ client, signal }) => {
+                const optimizedCount = await getOptimizedListCount<
+                    ListCountQuery<SongListQuery>,
+                    SongListQuery,
+                    { totalRecordCount: null | number }
+                >({
+                    client,
+                    listQueryFn: controller.getSongList,
+                    listQueryKeyFn: queryKeys.songs.list,
+                    query: args.query,
+                    serverId: args.serverId,
+                    signal,
+                });
+
+                if (optimizedCount !== null) {
+                    return optimizedCount;
+                }
+
                 return api.controller.getSongListCount({
                     apiClientProps: { serverId: args.serverId, signal },
                     query: args.query,
@@ -64,7 +82,7 @@ export const songsQueries = {
                 args.serverId,
                 Object.keys(args.query).length === 0 ? undefined : args.query,
             ),
-            staleTime: 1000 * 60 * 60 * 12,
+            staleTime: 1000 * 60 * 60,
             ...args.options,
         });
     },

src/renderer/features/songs/components/song-list-infinite-grid.tsx

@@ -25,7 +25,7 @@ export const SongListInfiniteGrid = ({
     size,
 }: SongListInfiniteGridProps) => {
     const listCountQuery = songsQueries.listCount({
-        query: { ...query },
+        query: { ...query, limit: itemsPerPage },
         serverId: serverId,
     }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
 

src/renderer/features/songs/components/song-list-infinite-table.tsx

@@ -33,7 +33,7 @@ export const SongListInfiniteTable = ({
     size = 'default',
 }: SongListInfiniteTableProps) => {
     const listCountQuery = songsQueries.listCount({
-        query: { ...query },
+        query: { ...query, limit: itemsPerPage },
         serverId: serverId,
     }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
 

src/renderer/features/songs/components/song-list-paginated-grid.tsx

@@ -24,15 +24,15 @@ export const SongListPaginatedGrid = ({
     serverId,
     size,
 }: SongListPaginatedGridProps) => {
+    const { currentPage, onChange } = useItemListPagination();
+
     const listCountQuery = songsQueries.listCount({
-        query: { ...query },
+        query: { ...query, limit: itemsPerPage },
         serverId: serverId,
     }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
 
     const listQueryFn = api.controller.getSongList;
 
-    const { currentPage, onChange } = useItemListPagination();
-
     const { data, pageCount, totalItemCount } = useItemListPaginatedLoader({
         currentPage,
         eventKey: ItemListKey.SONG,

src/renderer/features/songs/components/song-list-paginated-table.tsx

@@ -34,15 +34,15 @@ export const SongListPaginatedTable = ({
     serverId,
     size = 'default',
 }: SongListPaginatedTableProps) => {
+    const { currentPage, onChange } = useItemListPagination();
+
     const listCountQuery = songsQueries.listCount({
-        query: { ...query },
+        query: { ...query, limit: itemsPerPage },
         serverId: serverId,
     }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
 
     const listQueryFn = api.controller.getSongList;
 
-    const { currentPage, onChange } = useItemListPagination();
-
     const { data, pageCount, totalItemCount } = useItemListPaginatedLoader({
         currentPage,
         eventKey: ItemListKey.SONG,

src/shared/types/domain-types.ts

@@ -487,7 +487,7 @@ export interface AlbumListQuery extends AlbumListNavidromeQuery, BaseQuery<Album
 // Album List
 export type AlbumListResponse = BasePaginatedResponse<Album[]>;
 
-export type ListCountQuery<TQuery> = Omit<TQuery, 'limit' | 'startIndex'>;
+export type ListCountQuery<TQuery> = Omit<TQuery, 'startIndex'>;
 
 interface AlbumListNavidromeQuery {
     hasRating?: boolean;