Reduce requested chapter data in queries

src/components/chapter/ChapterActionMenuItems.tsx

@@ -29,7 +29,6 @@ import {
     ChapterRealUrlInfo,
     Chapters,
 } from '@/lib/data/Chapters.ts';
-import { TChapter } from '@/typings.ts';
 import { MenuItem } from '@/components/menu/MenuItem.tsx';
 import { IChapterWithMeta } from '@/components/chapter/ChapterList.tsx';
 import { ChaptersWithMeta } from '@/lib/data/ChaptersWithMeta.ts';
@@ -39,13 +38,15 @@ import { useMetadataServerSettings } from '@/lib/metadata/metadataServerSettings
 
 type BaseProps = { onClose: () => void };
 
+type TChapter = ChapterIdInfo &
+    ChapterMangaInfo &
+    ChapterDownloadInfo &
+    ChapterBookmarkInfo &
+    ChapterReadInfo &
+    ChapterRealUrlInfo;
+
 type SingleModeProps = {
-    chapter: ChapterIdInfo &
-        ChapterMangaInfo &
-        ChapterDownloadInfo &
-        ChapterBookmarkInfo &
-        ChapterReadInfo &
-        ChapterRealUrlInfo;
+    chapter: TChapter;
     allChapters: TChapter[];
     handleSelection?: SelectableCollectionReturnType<TChapter['id']>['handleSelection'];
     canBeDownloaded: boolean;

src/components/chapter/ChapterCard.tsx

@@ -24,11 +24,28 @@ import PopupState, { bindMenu, bindTrigger } from 'material-ui-popup-state';
 import { useLongPress } from 'use-long-press';
 import { getDateString } from '@/util/date.ts';
 import { DownloadStateIndicator } from '@/components/molecules/DownloadStateIndicator.tsx';
-import { DownloadType } from '@/lib/graphql/generated/graphql.ts';
-import { TChapter } from '@/typings.ts';
+import { ChapterType, DownloadType } from '@/lib/graphql/generated/graphql.ts';
 import { ChapterActionMenuItems } from '@/components/chapter/ChapterActionMenuItems.tsx';
 import { Menu } from '@/components/menu/Menu.tsx';
 import { TypographyMaxLines } from '@/components/atoms/TypographyMaxLines.tsx';
+import {
+    ChapterBookmarkInfo,
+    ChapterDownloadInfo,
+    ChapterIdInfo,
+    ChapterMangaInfo,
+    ChapterNumberInfo,
+    ChapterReadInfo,
+    ChapterScanlatorInfo,
+} from '@/lib/data/Chapters.ts';
+
+type TChapter = ChapterIdInfo &
+    ChapterMangaInfo &
+    ChapterDownloadInfo &
+    ChapterReadInfo &
+    ChapterBookmarkInfo &
+    ChapterNumberInfo &
+    ChapterScanlatorInfo &
+    Pick<ChapterType, 'name' | 'sourceOrder' | 'uploadDate'>;
 
 interface IProps {
     chapter: TChapter;
@@ -86,7 +103,7 @@ export const ChapterCard: React.FC<IProps> = (props: IProps) => {
                         <Card sx={{ touchCallout: 'none' }}>
                             <CardActionArea
                                 component={Link}
-                                to={`/manga/${chapter.manga.id}/chapter/${chapter.sourceOrder}`}
+                                to={`/manga/${chapter.mangaId}/chapter/${chapter.sourceOrder}`}
                                 style={{
                                     color: theme.palette.text[chapter.isRead ? 'disabled' : 'primary'],
                                 }}

src/components/chapter/ChapterList.tsx

@@ -19,7 +19,7 @@ import DownloadIcon from '@mui/icons-material/Download';
 import DoneAllIcon from '@mui/icons-material/DoneAll';
 import PopupState, { bindMenu, bindTrigger } from 'material-ui-popup-state';
 import Menu from '@mui/material/Menu';
-import { TChapter, TManga } from '@/typings.ts';
+import { TManga } from '@/typings.ts';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { ChapterCard } from '@/components/chapter/ChapterCard.tsx';
 import { ResumeFab } from '@/components/manga/ResumeFAB.tsx';
@@ -28,7 +28,11 @@ import { EmptyViewAbsoluteCentered } from '@/components/util/EmptyViewAbsoluteCe
 import { ChaptersToolbarMenu } from '@/components/chapter/ChaptersToolbarMenu.tsx';
 import { SelectionFAB } from '@/components/collection/SelectionFAB.tsx';
 import { DEFAULT_FULL_FAB_HEIGHT } from '@/components/util/StyledFab.tsx';
-import { DownloadType } from '@/lib/graphql/generated/graphql.ts';
+import {
+    DownloadType,
+    GetChaptersMangaQuery,
+    GetChaptersMangaQueryVariables,
+} from '@/lib/graphql/generated/graphql.ts';
 import { useSelectableCollection } from '@/components/collection/useSelectableCollection.ts';
 import { SelectableCollectionSelectAll } from '@/components/collection/SelectableCollectionSelectAll.tsx';
 import { Chapters } from '@/lib/data/Chapters.ts';
@@ -37,6 +41,7 @@ import { ChapterActionMenuItems } from '@/components/chapter/ChapterActionMenuIt
 import { ChaptersDownloadActionMenuItems } from '@/components/chapter/ChaptersDownloadActionMenuItems.tsx';
 import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';
 import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder.tsx';
+import { GET_CHAPTERS_MANGA } from '@/lib/graphql/queries/ChapterQuery.ts';
 
 const ChapterListHeader = styled(Stack)(({ theme }) => ({
     margin: 8,
@@ -61,7 +66,7 @@ const StyledVirtuoso = styled(Virtuoso)(({ theme }) => ({
 }));
 
 export interface IChapterWithMeta {
-    chapter: TChapter;
+    chapter: React.ComponentProps<typeof ChapterCard>['chapter'];
     downloadChapter: DownloadType | undefined;
     selected: boolean | null;
 }
@@ -83,7 +88,11 @@ export const ChapterList: React.FC<IProps> = ({ manga, isRefreshing }) => {
         loading: isLoading,
         error,
         refetch,
-    } = requestManager.useGetMangaChapters(manga.id, { notifyOnNetworkStatusChange: true });
+    } = requestManager.useGetMangaChapters<GetChaptersMangaQuery, GetChaptersMangaQueryVariables>(
+        GET_CHAPTERS_MANGA,
+        manga.id,
+        { notifyOnNetworkStatusChange: true },
+    );
     const chapters = useMemo(() => chaptersData?.chapters.nodes ?? [], [chaptersData?.chapters.nodes]);
 
     const chapterIds = useMemo(() => chapters.map((chapter) => chapter.id), [chapters]);
@@ -106,7 +115,7 @@ export const ChapterList: React.FC<IProps> = ({ manga, isRefreshing }) => {
         () =>
             visibleChapters.map((chapter) => {
                 const downloadChapter = queue?.find(
-                    (cd) => cd.chapter.sourceOrder === chapter.sourceOrder && cd.chapter.manga.id === chapter.manga.id,
+                    (cd) => cd.chapter.sourceOrder === chapter.sourceOrder && cd.chapter.manga.id === chapter.mangaId,
                 );
                 const selected = !areNoItemsSelected ? selectedItemIds.includes(chapter.id) : null;
                 return {

src/components/chapter/util.tsx

@@ -12,10 +12,11 @@ import {
     ChapterOptionsReducerAction,
     ChapterSortMode,
     NullAndUndefined,
-    TChapter,
     TranslationKey,
 } from '@/typings.ts';
 import { useReducerLocalStorage } from '@/util/useStorage.tsx';
+import { ChapterBookmarkInfo, ChapterDownloadInfo, ChapterReadInfo } from '@/lib/data/Chapters.ts';
+import { ChapterType } from '@/lib/graphql/generated/graphql.ts';
 
 const defaultChapterOptions: ChapterListOptions = {
     active: false,
@@ -46,7 +47,7 @@ function chapterOptionsReducer(state: ChapterListOptions, actions: ChapterOption
     }
 }
 
-export function unreadFilter(unread: NullAndUndefined<boolean>, { isRead: isChapterRead }: TChapter) {
+export function unreadFilter(unread: NullAndUndefined<boolean>, { isRead: isChapterRead }: ChapterReadInfo) {
     switch (unread) {
         case true:
             return !isChapterRead;
@@ -57,7 +58,7 @@ export function unreadFilter(unread: NullAndUndefined<boolean>, { isRead: isChap
     }
 }
 
-function downloadFilter(downloaded: NullAndUndefined<boolean>, { isDownloaded: chapterDownload }: TChapter) {
+function downloadFilter(downloaded: NullAndUndefined<boolean>, { isDownloaded: chapterDownload }: ChapterDownloadInfo) {
     switch (downloaded) {
         case true:
             return chapterDownload;
@@ -68,7 +69,10 @@ function downloadFilter(downloaded: NullAndUndefined<boolean>, { isDownloaded: c
     }
 }
 
-function bookmarkedFilter(bookmarked: NullAndUndefined<boolean>, { isBookmarked: chapterBookmarked }: TChapter) {
+function bookmarkedFilter(
+    bookmarked: NullAndUndefined<boolean>,
+    { isBookmarked: chapterBookmarked }: ChapterBookmarkInfo,
+) {
     switch (bookmarked) {
         case true:
             return chapterBookmarked;
@@ -79,11 +83,12 @@ function bookmarkedFilter(bookmarked: NullAndUndefined<boolean>, { isBookmarked:
     }
 }
 
-const sortChapters = (
-    chapters: TChapter[],
+type TChapterSort = Pick<ChapterType, 'sourceOrder' | 'fetchedAt' | 'chapterNumber' | 'uploadDate'>;
+const sortChapters = <T extends TChapterSort>(
+    chapters: T[],
     { sortBy, reverse }: Pick<ChapterListOptions, 'sortBy' | 'reverse'>,
-): TChapter[] => {
-    const sortedChapters: TChapter[] = [...chapters];
+): T[] => {
+    const sortedChapters: T[] = [...chapters];
 
     switch (sortBy) {
         case 'source':
@@ -109,7 +114,11 @@ const sortChapters = (
     return sortedChapters;
 };
 
-export function filterAndSortChapters(chapters: TChapter[], options: ChapterListOptions): TChapter[] {
+type TChapterFilter = TChapterSort & ChapterReadInfo & ChapterDownloadInfo & ChapterBookmarkInfo;
+export function filterAndSortChapters<Chapters extends TChapterFilter>(
+    chapters: Chapters[],
+    options: ChapterListOptions,
+): Chapters[] {
     const filtered = options.active
         ? chapters.filter(
               (chp) =>

src/components/navbar/ReaderNavBar.tsx

@@ -27,11 +27,12 @@ import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
 import Collapse from '@mui/material/Collapse';
 import { useTranslation } from 'react-i18next';
-import { AllowedMetadataValueTypes, ChapterOffset, IReaderSettings, TChapter, TManga } from '@/typings';
+import { AllowedMetadataValueTypes, ChapterOffset, IReaderSettings, TManga } from '@/typings';
 import { ReaderSettingsOptions } from '@/components/reader/ReaderSettingsOptions';
 import { useBackButton } from '@/util/useBackButton.ts';
 import { Select } from '@/components/atoms/Select.tsx';
 import { getOptionForDirection } from '@/theme.ts';
+import { ChapterType } from '@/lib/graphql/generated/graphql.ts';
 
 const Root = styled('div')({
     zIndex: 10,
@@ -123,8 +124,8 @@ interface IProps {
     settings: IReaderSettings;
     setSettingValue: (key: keyof IReaderSettings, value: AllowedMetadataValueTypes, persist?: boolean) => void;
     manga: TManga;
-    chapter: TChapter;
-    chapters: TChapter[];
+    chapter: Pick<ChapterType, 'name' | 'sourceOrder' | 'pageCount'>;
+    chapters: Pick<ChapterType, 'id' | 'sourceOrder' | 'name' | 'chapterNumber' | 'scanlator'>[];
     curPage: number;
     scrollToPage: (page: number) => void;
     openNextChapter: (offset: ChapterOffset) => void;