support query key override on infinite carousels

This commit is contained in:
jeffvli
2026-01-16 04:34:44 -08:00
parent 2827b2ae01
commit a59e57572c
5 changed files with 54 additions and 31 deletions
@@ -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, {
sortBy: AlbumListSort.RANDOM,
sortOrder: SortOrder.DESC,
}),
queryKey: queryKey || defaultQueryKey,
});
// Flatten all pages and filter for albums with images
@@ -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, {
sortBy: AlbumListSort.RANDOM,
sortOrder: SortOrder.DESC,
}),
queryKey: queryKey || defaultQueryKey,
});
// Flatten all pages and filter for albums with images