vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-07 04:20:12 +02:00
Code Issues Packages Projects Releases Wiki Activity

support query key override on infinite carousels

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/features/albums/components/album-infinite-carousel.tsx
+12 -7
View File
@@ -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, {
sortBy,
sortOrder,
...additionalQuery,
}),
queryKey: overrideQueryKey || defaultQueryKey,
});
return query;
src/renderer/features/artists/components/album-artist-infinite-carousel.tsx
+12 -7
View File
@@ -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, {
sortBy,
sortOrder,
...additionalQuery,
}),
queryKey: overrideQueryKey || defaultQueryKey,
});
return query;
src/renderer/features/home/components/album-infinite-feature-carousel.tsx
+9 -5
View File
@@ -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
src/renderer/features/home/components/album-infinite-single-feature-carousel.tsx
+9 -5
View File
@@ -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
src/renderer/features/songs/components/song-infinite-carousel.tsx
+12 -7
View File
@@ -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, {
sortBy,
sortOrder,
...additionalQuery,
}),
queryKey: overrideQueryKey || defaultQueryKey,
});
return query;