support query key override on infinite carousels

src/renderer/features/albums/components/album-infinite-carousel.tsx

@@ -1,4 +1,4 @@
-import { useSuspenseInfiniteQuery } from '@tanstack/react-query';
+import { QueryFunctionContext, useSuspenseInfiniteQuery } from '@tanstack/react-query';
 import { Suspense, useCallback, useMemo } from 'react';
 
 import { api } from '/@/renderer/api';
@@ -27,6 +27,7 @@ interface AlbumCarouselProps {
     enableRefresh?: boolean;
     excludeIds?: string[];
     query?: Partial<Omit<AlbumListQuery, 'startIndex'>>;
+    queryKey?: QueryFunctionContext['queryKey'];
     rowCount?: number;
     sortBy: AlbumListSort;
     sortOrder: SortOrder;
@@ -39,6 +40,7 @@ const BaseAlbumInfiniteCarousel = (props: AlbumCarouselProps & { rows: DataRow[]
         enableRefresh,
         excludeIds,
         query: additionalQuery,
+        queryKey,
         rowCount = 1,
         rows,
         sortBy,
@@ -51,7 +53,7 @@ const BaseAlbumInfiniteCarousel = (props: AlbumCarouselProps & { rows: DataRow[]
         hasNextPage,
         isFetchingNextPage,
         refetch,
-    } = useAlbumListInfinite(sortBy, sortOrder, 20, additionalQuery);
+    } = useAlbumListInfinite(sortBy, sortOrder, 20, additionalQuery, queryKey);
 
     const controls = useDefaultItemListControls();
 
@@ -137,9 +139,16 @@ function useAlbumListInfinite(
     sortOrder: SortOrder,
     itemLimit: number,
     additionalQuery?: Partial<Omit<AlbumListQuery, 'startIndex'>>,
+    overrideQueryKey?: QueryFunctionContext['queryKey'],
 ) {
     const serverId = useCurrentServerId();
 
+    const defaultQueryKey = queryKeys.albums.infiniteList(serverId, {
+        sortBy,
+        sortOrder,
+        ...additionalQuery,
+    });
+
     const query = useSuspenseInfiniteQuery<AlbumListResponse>({
         getNextPageParam: (lastPage, _allPages, lastPageParam) => {
             if (lastPage.items.length < itemLimit) {
@@ -163,11 +172,7 @@ function useAlbumListInfinite(
                 },
             });
         },
-        queryKey: queryKeys.albums.infiniteList(serverId, {
+        queryKey: overrideQueryKey || defaultQueryKey,
-            sortBy,
-            sortOrder,
-            ...additionalQuery,
-        }),
     });
 
     return query;

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

@@ -1,4 +1,4 @@
-import { useSuspenseInfiniteQuery } from '@tanstack/react-query';
+import { QueryFunctionContext, useSuspenseInfiniteQuery } from '@tanstack/react-query';
 import { Suspense, useCallback, useMemo } from 'react';
 
 import { api } from '/@/renderer/api';
@@ -26,6 +26,7 @@ interface AlbumArtistCarouselProps {
     containerQuery?: ReturnType<typeof useGridCarouselContainerQuery>;
     excludeIds?: string[];
     query?: Partial<Omit<AlbumArtistListQuery, 'startIndex'>>;
+    queryKey?: QueryFunctionContext['queryKey'];
     rowCount?: number;
     sortBy: AlbumArtistListSort;
     sortOrder: SortOrder;
@@ -37,6 +38,7 @@ const BaseAlbumArtistInfiniteCarousel = (props: AlbumArtistCarouselProps & { row
         containerQuery,
         excludeIds,
         query: additionalQuery,
+        queryKey,
         rowCount = 1,
         rows,
         sortBy,
@@ -49,7 +51,7 @@ const BaseAlbumArtistInfiniteCarousel = (props: AlbumArtistCarouselProps & { row
         hasNextPage,
         isFetchingNextPage,
         refetch,
-    } = useAlbumArtistListInfinite(sortBy, sortOrder, 20, additionalQuery);
+    } = useAlbumArtistListInfinite(sortBy, sortOrder, 20, additionalQuery, queryKey);
 
     const controls = useDefaultItemListControls();
 
@@ -137,9 +139,16 @@ function useAlbumArtistListInfinite(
     sortOrder: SortOrder,
     itemLimit: number,
     additionalQuery?: Partial<Omit<AlbumArtistListQuery, 'startIndex'>>,
+    overrideQueryKey?: QueryFunctionContext['queryKey'],
 ) {
     const serverId = useCurrentServerId();
 
+    const defaultQueryKey = queryKeys.albumArtists.infiniteList(serverId, {
+        sortBy,
+        sortOrder,
+        ...additionalQuery,
+    });
+
     const query = useSuspenseInfiniteQuery<AlbumArtistListResponse>({
         getNextPageParam: (lastPage, _allPages, lastPageParam) => {
             if (lastPage.items.length < itemLimit) {
@@ -163,11 +172,7 @@ function useAlbumArtistListInfinite(
                 },
             });
         },
-        queryKey: queryKeys.albumArtists.infiniteList(serverId, {
+        queryKey: overrideQueryKey || defaultQueryKey,
-            sortBy,
-            sortOrder,
-            ...additionalQuery,
-        }),
     });
 
     return query;

src/renderer/features/home/components/album-infinite-feature-carousel.tsx

@@ -1,4 +1,4 @@
-import { useSuspenseInfiniteQuery } from '@tanstack/react-query';
+import { QueryFunctionContext, useSuspenseInfiniteQuery } from '@tanstack/react-query';
 import { useEffect, useMemo, useRef } from 'react';
 
 import { api } from '/@/renderer/api';
@@ -9,14 +9,21 @@ import { Album, AlbumListResponse, AlbumListSort, SortOrder } from '/@/shared/ty
 
 interface InfiniteAlbumFeatureCarouselProps {
     itemLimit?: number;
+    queryKey?: QueryFunctionContext['queryKey'];
 }
 
 export const AlbumInfiniteFeatureCarousel = ({
     itemLimit = 20,
+    queryKey,
 }: InfiniteAlbumFeatureCarouselProps) => {
     const serverId = useCurrentServerId();
     const loadMoreTriggeredRef = useRef(false);
 
+    const defaultQueryKey = queryKeys.albums.infiniteList(serverId, {
+        sortBy: AlbumListSort.RANDOM,
+        sortOrder: SortOrder.DESC,
+    });
+
     const { data, fetchNextPage, hasNextPage, isFetchingNextPage } =
         useSuspenseInfiniteQuery<AlbumListResponse>({
             getNextPageParam: (lastPage, _allPages, lastPageParam) => {
@@ -40,10 +47,7 @@ export const AlbumInfiniteFeatureCarousel = ({
                     },
                 });
             },
-            queryKey: queryKeys.albums.infiniteList(serverId, {
+            queryKey: queryKey || defaultQueryKey,
-                sortBy: AlbumListSort.RANDOM,
-                sortOrder: SortOrder.DESC,
-            }),
         });
 
     // Flatten all pages and filter for albums with images

src/renderer/features/home/components/album-infinite-single-feature-carousel.tsx

@@ -1,4 +1,4 @@
-import { useSuspenseInfiniteQuery } from '@tanstack/react-query';
+import { QueryFunctionContext, useSuspenseInfiniteQuery } from '@tanstack/react-query';
 import { useEffect, useMemo, useRef } from 'react';
 
 import { api } from '/@/renderer/api';
@@ -9,14 +9,21 @@ import { Album, AlbumListResponse, AlbumListSort, SortOrder } from '/@/shared/ty
 
 interface InfiniteAlbumSingleFeatureCarouselProps {
     itemLimit?: number;
+    queryKey?: QueryFunctionContext['queryKey'];
 }
 
 export const AlbumInfiniteSingleFeatureCarousel = ({
     itemLimit = 20,
+    queryKey,
 }: InfiniteAlbumSingleFeatureCarouselProps) => {
     const serverId = useCurrentServerId();
     const loadMoreTriggeredRef = useRef(false);
 
+    const defaultQueryKey = queryKeys.albums.infiniteList(serverId, {
+        sortBy: AlbumListSort.RANDOM,
+        sortOrder: SortOrder.DESC,
+    });
+
     const { data, fetchNextPage, hasNextPage, isFetchingNextPage } =
         useSuspenseInfiniteQuery<AlbumListResponse>({
             getNextPageParam: (lastPage, _allPages, lastPageParam) => {
@@ -40,10 +47,7 @@ export const AlbumInfiniteSingleFeatureCarousel = ({
                     },
                 });
             },
-            queryKey: queryKeys.albums.infiniteList(serverId, {
+            queryKey: queryKey || defaultQueryKey,
-                sortBy: AlbumListSort.RANDOM,
-                sortOrder: SortOrder.DESC,
-            }),
         });
 
     // Flatten all pages and filter for albums with images

src/renderer/features/songs/components/song-infinite-carousel.tsx

@@ -1,4 +1,4 @@
-import { useSuspenseInfiniteQuery } from '@tanstack/react-query';
+import { QueryFunctionContext, useSuspenseInfiniteQuery } from '@tanstack/react-query';
 import { Suspense, useCallback, useMemo } from 'react';
 
 import { api } from '/@/renderer/api';
@@ -29,6 +29,7 @@ interface SongCarouselProps {
     enableRefresh?: boolean;
     excludeIds?: string[];
     query?: Partial<Omit<SongListQuery, 'startIndex'>>;
+    queryKey?: QueryFunctionContext['queryKey'];
     rowCount?: number;
     sortBy: SongListSort;
     sortOrder: SortOrder;
@@ -41,6 +42,7 @@ const BaseSongInfiniteCarousel = (props: SongCarouselProps & { rows: DataRow[] }
         enableRefresh,
         excludeIds,
         query: additionalQuery,
+        queryKey,
         rowCount = 1,
         rows,
         sortBy,
@@ -53,7 +55,7 @@ const BaseSongInfiniteCarousel = (props: SongCarouselProps & { rows: DataRow[] }
         hasNextPage,
         isFetchingNextPage,
         refetch,
-    } = useSongListInfinite(sortBy, sortOrder, 20, additionalQuery);
+    } = useSongListInfinite(sortBy, sortOrder, 20, additionalQuery, queryKey);
 
     const player = usePlayer();
     const baseControls = useDefaultItemListControls();
@@ -153,9 +155,16 @@ function useSongListInfinite(
     sortOrder: SortOrder,
     itemLimit: number,
     additionalQuery?: Partial<Omit<SongListQuery, 'startIndex'>>,
+    overrideQueryKey?: QueryFunctionContext['queryKey'],
 ) {
     const serverId = useCurrentServerId();
 
+    const defaultQueryKey = queryKeys.songs.infiniteList(serverId, {
+        sortBy,
+        sortOrder,
+        ...additionalQuery,
+    });
+
     const query = useSuspenseInfiniteQuery<SongListResponse>({
         getNextPageParam: (lastPage, _allPages, lastPageParam) => {
             if (lastPage.items.length < itemLimit) {
@@ -179,11 +188,7 @@ function useSongListInfinite(
                 },
             });
         },
-        queryKey: queryKeys.songs.infiniteList(serverId, {
+        queryKey: overrideQueryKey || defaultQueryKey,
-            sortBy,
-            sortOrder,
-            ...additionalQuery,
-        }),
     });
 
     return query;