From a59e57572c156a2c6e9019968655e8c24ec9b8f7 Mon Sep 17 00:00:00 2001 From: jeffvli Date: Fri, 16 Jan 2026 04:34:44 -0800 Subject: [PATCH] support query key override on infinite carousels --- .../components/album-infinite-carousel.tsx | 19 ++++++++++++------- .../album-artist-infinite-carousel.tsx | 19 ++++++++++++------- .../album-infinite-feature-carousel.tsx | 14 +++++++++----- ...album-infinite-single-feature-carousel.tsx | 14 +++++++++----- .../components/song-infinite-carousel.tsx | 19 ++++++++++++------- 5 files changed, 54 insertions(+), 31 deletions(-) diff --git a/src/renderer/features/albums/components/album-infinite-carousel.tsx b/src/renderer/features/albums/components/album-infinite-carousel.tsx index 70cba4dea..8e87bd5cb 100644 --- a/src/renderer/features/albums/components/album-infinite-carousel.tsx +++ b/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>; + 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>, + overrideQueryKey?: QueryFunctionContext['queryKey'], ) { const serverId = useCurrentServerId(); + const defaultQueryKey = queryKeys.albums.infiniteList(serverId, { + sortBy, + sortOrder, + ...additionalQuery, + }); + const query = useSuspenseInfiniteQuery({ getNextPageParam: (lastPage, _allPages, lastPageParam) => { if (lastPage.items.length < itemLimit) { @@ -163,11 +172,7 @@ function useAlbumListInfinite( }, }); }, - queryKey: queryKeys.albums.infiniteList(serverId, { - sortBy, - sortOrder, - ...additionalQuery, - }), + queryKey: overrideQueryKey || defaultQueryKey, }); return query; diff --git a/src/renderer/features/artists/components/album-artist-infinite-carousel.tsx b/src/renderer/features/artists/components/album-artist-infinite-carousel.tsx index e0c702e74..3084ec70b 100644 --- a/src/renderer/features/artists/components/album-artist-infinite-carousel.tsx +++ b/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; excludeIds?: string[]; query?: Partial>; + 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>, + overrideQueryKey?: QueryFunctionContext['queryKey'], ) { const serverId = useCurrentServerId(); + const defaultQueryKey = queryKeys.albumArtists.infiniteList(serverId, { + sortBy, + sortOrder, + ...additionalQuery, + }); + const query = useSuspenseInfiniteQuery({ getNextPageParam: (lastPage, _allPages, lastPageParam) => { if (lastPage.items.length < itemLimit) { @@ -163,11 +172,7 @@ function useAlbumArtistListInfinite( }, }); }, - queryKey: queryKeys.albumArtists.infiniteList(serverId, { - sortBy, - sortOrder, - ...additionalQuery, - }), + queryKey: overrideQueryKey || defaultQueryKey, }); return query; diff --git a/src/renderer/features/home/components/album-infinite-feature-carousel.tsx b/src/renderer/features/home/components/album-infinite-feature-carousel.tsx index 0295d8c48..e433d9cd3 100644 --- a/src/renderer/features/home/components/album-infinite-feature-carousel.tsx +++ b/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({ getNextPageParam: (lastPage, _allPages, lastPageParam) => { @@ -40,10 +47,7 @@ export const AlbumInfiniteFeatureCarousel = ({ }, }); }, - queryKey: queryKeys.albums.infiniteList(serverId, { - sortBy: AlbumListSort.RANDOM, - sortOrder: SortOrder.DESC, - }), + queryKey: queryKey || defaultQueryKey, }); // Flatten all pages and filter for albums with images diff --git a/src/renderer/features/home/components/album-infinite-single-feature-carousel.tsx b/src/renderer/features/home/components/album-infinite-single-feature-carousel.tsx index 67105fb57..2d123ca6e 100644 --- a/src/renderer/features/home/components/album-infinite-single-feature-carousel.tsx +++ b/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({ getNextPageParam: (lastPage, _allPages, lastPageParam) => { @@ -40,10 +47,7 @@ export const AlbumInfiniteSingleFeatureCarousel = ({ }, }); }, - queryKey: queryKeys.albums.infiniteList(serverId, { - sortBy: AlbumListSort.RANDOM, - sortOrder: SortOrder.DESC, - }), + queryKey: queryKey || defaultQueryKey, }); // Flatten all pages and filter for albums with images diff --git a/src/renderer/features/songs/components/song-infinite-carousel.tsx b/src/renderer/features/songs/components/song-infinite-carousel.tsx index c17dfcd86..f18f95860 100644 --- a/src/renderer/features/songs/components/song-infinite-carousel.tsx +++ b/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>; + 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>, + overrideQueryKey?: QueryFunctionContext['queryKey'], ) { const serverId = useCurrentServerId(); + const defaultQueryKey = queryKeys.songs.infiniteList(serverId, { + sortBy, + sortOrder, + ...additionalQuery, + }); + const query = useSuspenseInfiniteQuery({ getNextPageParam: (lastPage, _allPages, lastPageParam) => { if (lastPage.items.length < itemLimit) { @@ -179,11 +188,7 @@ function useSongListInfinite( }, }); }, - queryKey: queryKeys.songs.infiniteList(serverId, { - sortBy, - sortOrder, - ...additionalQuery, - }), + queryKey: overrideQueryKey || defaultQueryKey, }); return query;