From b664b4cbeaf2e312a747f14137842e12b30efb67 Mon Sep 17 00:00:00 2001
From: Gauthier Roebroeck <gauthier.roebroeck@gmail.com>
Date: Mon, 4 May 2026 14:38:06 +0800
Subject: [PATCH] centralize infinite queries

---
 next-ui/src/colada/books.ts                   |  32 +++-
 next-ui/src/colada/collections.ts             |  32 +++-
 next-ui/src/colada/readlists.ts               |  34 +++-
 next-ui/src/colada/referential.ts             | 158 +++++++++++++++++-
 next-ui/src/colada/series.ts                  |  32 +++-
 next-ui/src/components/filter/by/Author.vue   |  23 +--
 next-ui/src/components/filter/by/Genre.vue    |  21 +--
 .../src/components/filter/by/Publisher.vue    |  23 +--
 .../src/components/filter/by/SharingLabel.vue |  23 +--
 next-ui/src/components/filter/by/Tag.vue      |  21 +--
 next-ui/src/pages/collection/[id].vue         |  29 +---
 next-ui/src/pages/libraries/[id]/books.vue    |  29 +---
 .../src/pages/libraries/[id]/collections.vue  |  26 +--
 .../src/pages/libraries/[id]/readlists.vue    |  26 +--
 next-ui/src/pages/libraries/[id]/series.vue   |  29 +---
 15 files changed, 322 insertions(+), 216 deletions(-)

diff --git a/next-ui/src/colada/books.ts b/next-ui/src/colada/books.ts
index 36e529ce..40255dc2 100644
--- a/next-ui/src/colada/books.ts
+++ b/next-ui/src/colada/books.ts
@@ -1,7 +1,12 @@
-import { defineMutation, defineQueryOptions, useMutation } from '@pinia/colada'
+import {
+  defineInfiniteQueryOptions,
+  defineMutation,
+  defineQueryOptions,
+  useMutation,
+} from '@pinia/colada'
 import { komgaClient } from '@/api/komga-client'
 import type { components } from '@/generated/openapi/komga'
-import type { PageRequest } from '@/types/PageRequest'
+import { PageRequest, type Sort, sortToString } from '@/types/PageRequest'
 
 export const QUERY_KEYS_BOOKS = {
   root: ['books'] as const,
@@ -34,6 +39,29 @@ export const bookListQuery = defineQueryOptions(
   }),
 )
 
+export const bookListQueryInfinite = defineInfiniteQueryOptions(
+  ({ search, sort }: { search: components['schemas']['BookSearch']; sort?: Sort[] }) => ({
+    key: QUERY_KEYS_BOOKS.bySearch({ search: search, sort: sort, infinite: true }),
+    initialPageParam: new PageRequest(0, 50, sort),
+    query: ({ pageParam }) =>
+      komgaClient
+        .POST('/api/v1/books/list', {
+          body: search,
+          params: {
+            query: {
+              page: pageParam.page,
+              size: pageParam.size,
+              sort: sort?.map((it) => sortToString(it)),
+            },
+          },
+        })
+        // unwrap the openapi-fetch structure on success
+        .then((res) => res.data),
+    getNextPageParam: (lastPage, _, lastPageParam) =>
+      !lastPage?.last ? lastPageParam.next() : null,
+  }),
+)
+
 export const bookDetailQuery = defineQueryOptions(({ bookId }: { bookId: string }) => ({
   key: QUERY_KEYS_BOOKS.byId(bookId),
   query: () =>
diff --git a/next-ui/src/colada/collections.ts b/next-ui/src/colada/collections.ts
index 122b58c1..b9d2d279 100644
--- a/next-ui/src/colada/collections.ts
+++ b/next-ui/src/colada/collections.ts
@@ -1,6 +1,12 @@
-import { defineMutation, defineQueryOptions, useMutation, useQueryCache } from '@pinia/colada'
+import {
+  defineInfiniteQueryOptions,
+  defineMutation,
+  defineQueryOptions,
+  useMutation,
+  useQueryCache,
+} from '@pinia/colada'
 import { komgaClient } from '@/api/komga-client'
-import type { PageRequest } from '@/types/PageRequest'
+import { PageRequest } from '@/types/PageRequest'
 import type { components } from '@/generated/openapi/komga'
 
 export const QUERY_KEYS_COLLECTIONS = {
@@ -37,6 +43,28 @@ export const collectionsListQuery = defineQueryOptions(
   }),
 )
 
+export const collectionsListQueryInfinite = defineInfiniteQueryOptions(
+  ({ libraryIds }: { libraryIds?: string[] }) => ({
+    key: QUERY_KEYS_COLLECTIONS.bySearch({ libraryIds, infinite: true }),
+    initialPageParam: new PageRequest(0, 50),
+    query: ({ pageParam }) =>
+      komgaClient
+        .GET('/api/v1/collections', {
+          params: {
+            query: {
+              library_id: libraryIds,
+              page: pageParam.page,
+              size: pageParam.size,
+            },
+          },
+        })
+        // unwrap the openapi-fetch structure on success
+        .then((res) => res.data),
+    getNextPageParam: (lastPage, _, lastPageParam) =>
+      !lastPage?.last ? lastPageParam.next() : null,
+  }),
+)
+
 export const collectionDetailQuery = defineQueryOptions(
   ({ collectionId }: { collectionId: string }) => ({
     key: QUERY_KEYS_COLLECTIONS.byId(collectionId),
diff --git a/next-ui/src/colada/readlists.ts b/next-ui/src/colada/readlists.ts
index 4b08d7c0..2969112d 100644
--- a/next-ui/src/colada/readlists.ts
+++ b/next-ui/src/colada/readlists.ts
@@ -1,7 +1,12 @@
-import { defineMutation, defineQueryOptions, useMutation } from '@pinia/colada'
+import {
+  defineInfiniteQueryOptions,
+  defineMutation,
+  defineQueryOptions,
+  useMutation,
+} from '@pinia/colada'
 import { komgaClient } from '@/api/komga-client'
 import type { components } from '@/generated/openapi/komga'
-import type { PageRequest } from '@/types/PageRequest'
+import { PageRequest } from '@/types/PageRequest'
 
 export const QUERY_KEYS_READLIST = {
   root: ['readlists'] as const,
@@ -40,6 +45,31 @@ export const readListsListQuery = defineQueryOptions(
   }),
 )
 
+export const readListsListQueryInfinite = defineInfiniteQueryOptions(
+  ({ libraryIds }: { libraryIds?: string[] }) => ({
+    key: QUERY_KEYS_READLIST.bySearch({
+      libraryIds: libraryIds,
+      infinite: true,
+    }),
+    initialPageParam: new PageRequest(0, 50),
+    query: ({ pageParam }) =>
+      komgaClient
+        .GET('/api/v1/readlists', {
+          params: {
+            query: {
+              page: pageParam.page,
+              size: pageParam.size,
+              libraryIds: libraryIds,
+            },
+          },
+        })
+        // unwrap the openapi-fetch structure on success
+        .then((res) => res.data),
+    getNextPageParam: (lastPage, _, lastPageParam) =>
+      !lastPage?.last ? lastPageParam.next() : null,
+  }),
+)
+
 export const useCreateReadList = defineMutation(() => {
   return useMutation({
     mutation: (readList: components['schemas']['ReadListCreationDto']) =>
diff --git a/next-ui/src/colada/referential.ts b/next-ui/src/colada/referential.ts
index 7422bb71..861b74d8 100644
--- a/next-ui/src/colada/referential.ts
+++ b/next-ui/src/colada/referential.ts
@@ -1,6 +1,6 @@
-import { defineQueryOptions } from '@pinia/colada'
+import { defineInfiniteQueryOptions, defineQueryOptions } from '@pinia/colada'
 import { komgaClient } from '@/api/komga-client'
-import type { PageRequest } from '@/types/PageRequest'
+import { PageRequest } from '@/types/PageRequest'
 
 export const authorsQuery = defineQueryOptions(
   ({
@@ -44,6 +44,45 @@ export const authorsQuery = defineQueryOptions(
   },
 )
 
+export const authorsNamesQueryInfinite = defineInfiniteQueryOptions(
+  ({
+    role,
+    library_id,
+    collection_id,
+    series_id,
+    readlist_id,
+  }: {
+    role?: string
+    library_id?: string[]
+    collection_id?: string[]
+    series_id?: string[]
+    readlist_id?: string[]
+  }) => {
+    const queryParams = {
+      role: role,
+      library_id: library_id,
+      collection_id: collection_id,
+      series_id: series_id,
+      readlist_id: readlist_id,
+    }
+    return {
+      key: ['authors', queryParams, { infinite: true }],
+      initialPageParam: new PageRequest(0, 50),
+      query: ({ pageParam }) =>
+        komgaClient
+          .GET('/api/v2/authors/names', {
+            params: {
+              query: { ...queryParams, ...pageParam },
+            },
+          })
+          // unwrap the openapi-fetch structure on success
+          .then((res) => res.data),
+      getNextPageParam: (lastPage, _, lastPageParam) =>
+        !lastPage?.last ? lastPageParam.next() : null,
+    }
+  },
+)
+
 export const genresQuery = defineQueryOptions(
   ({
     search,
@@ -77,6 +116,30 @@ export const genresQuery = defineQueryOptions(
   },
 )
 
+export const genresQueryInfinite = defineInfiniteQueryOptions(
+  ({ library_id, collection_id }: { library_id?: string[]; collection_id?: string[] }) => {
+    const queryParams = {
+      library_id: library_id,
+      collection_id: collection_id,
+    }
+    return {
+      key: ['genres', queryParams, { infinite: true }],
+      initialPageParam: new PageRequest(0, 50),
+      query: ({ pageParam }) =>
+        komgaClient
+          .GET('/api/v2/genres', {
+            params: {
+              query: { ...queryParams, ...pageParam },
+            },
+          })
+          // unwrap the openapi-fetch structure on success
+          .then((res) => res.data),
+      getNextPageParam: (lastPage, _, lastPageParam) =>
+        !lastPage?.last ? lastPageParam.next() : null,
+    }
+  },
+)
+
 export const tagsQuery = defineQueryOptions(
   ({
     search,
@@ -119,6 +182,45 @@ export const tagsQuery = defineQueryOptions(
   },
 )
 
+export const tagsQueryInfinite = defineInfiniteQueryOptions(
+  ({
+    library_id,
+    collection_id,
+    series_id,
+    readlist_id,
+    include,
+  }: {
+    library_id?: string[]
+    collection_id?: string[]
+    series_id?: string[]
+    readlist_id?: string[]
+    include?: 'SERIES' | 'BOOK' | 'BOTH'
+  }) => {
+    const queryParams = {
+      library_id: library_id,
+      collection_id: collection_id,
+      series_id: series_id,
+      readlist_id: readlist_id,
+      include: include,
+    }
+    return {
+      key: ['tags', queryParams, { infinite: true }],
+      initialPageParam: new PageRequest(0, 50),
+      query: ({ pageParam }) =>
+        komgaClient
+          .GET('/api/v2/tags', {
+            params: {
+              query: { ...queryParams, ...pageParam },
+            },
+          })
+          // unwrap the openapi-fetch structure on success
+          .then((res) => res.data),
+      getNextPageParam: (lastPage, _, lastPageParam) =>
+        !lastPage?.last ? lastPageParam.next() : null,
+    }
+  },
+)
+
 export const publishersQuery = defineQueryOptions(
   ({
     search,
@@ -152,6 +254,33 @@ export const publishersQuery = defineQueryOptions(
   },
 )
 
+export const publishersQueryInfinite = defineInfiniteQueryOptions(
+  ({ library_id, collection_id }: { library_id?: string[]; collection_id?: string[] }) => {
+    const queryParams = {
+      library_id: library_id,
+      collection_id: collection_id,
+    }
+    return {
+      key: ['publishers', queryParams, { infinite: true }],
+      initialPageParam: new PageRequest(0, 50),
+      query: ({ pageParam }) =>
+        komgaClient
+          .GET('/api/v2/publishers', {
+            params: {
+              query: {
+                ...queryParams,
+                ...pageParam,
+              },
+            },
+          })
+          // unwrap the openapi-fetch structure on success
+          .then((res) => res.data),
+      getNextPageParam: (lastPage, _, lastPageParam) =>
+        !lastPage?.last ? lastPageParam.next() : null,
+    }
+  },
+)
+
 export const sharingLabelsQuery = defineQueryOptions(
   ({
     search,
@@ -185,6 +314,30 @@ export const sharingLabelsQuery = defineQueryOptions(
   },
 )
 
+export const sharingLabelsQueryInfinite = defineInfiniteQueryOptions(
+  ({ library_id, collection_id }: { library_id?: string[]; collection_id?: string[] }) => {
+    const queryParams = {
+      library_id: library_id,
+      collection_id: collection_id,
+    }
+    return {
+      key: ['sharing-labels', queryParams, { infinite: true }],
+      initialPageParam: new PageRequest(0, 50),
+      query: ({ pageParam }) =>
+        komgaClient
+          .GET('/api/v2/sharing-labels', {
+            params: {
+              query: { ...queryParams, ...pageParam },
+            },
+          })
+          // unwrap the openapi-fetch structure on success
+          .then((res) => res.data),
+      getNextPageParam: (lastPage, _, lastPageParam) =>
+        !lastPage?.last ? lastPageParam.next() : null,
+    }
+  },
+)
+
 export const languagesQuery = defineQueryOptions(
   ({
     search,
@@ -277,3 +430,4 @@ export const ageRatingsQuery = defineQueryOptions(
     }
   },
 )
+export class authorsQueryInfinite {}
diff --git a/next-ui/src/colada/series.ts b/next-ui/src/colada/series.ts
index ab6d7ea6..8fffb3c9 100644
--- a/next-ui/src/colada/series.ts
+++ b/next-ui/src/colada/series.ts
@@ -1,7 +1,12 @@
-import { defineMutation, defineQueryOptions, useMutation } from '@pinia/colada'
+import {
+  defineInfiniteQueryOptions,
+  defineMutation,
+  defineQueryOptions,
+  useMutation,
+} from '@pinia/colada'
 import { komgaClient } from '@/api/komga-client'
 import type { components } from '@/generated/openapi/komga'
-import type { PageRequest } from '@/types/PageRequest'
+import { PageRequest, type Sort, sortToString } from '@/types/PageRequest'
 import { seriesMetadataToDto } from '@/functions/series'
 
 export const QUERY_KEYS_SERIES = {
@@ -35,6 +40,29 @@ export const seriesListQuery = defineQueryOptions(
   }),
 )
 
+export const seriesListQueryInfinite = defineInfiniteQueryOptions(
+  ({ search, sort }: { search: components['schemas']['SeriesSearch']; sort?: Sort[] }) => ({
+    key: QUERY_KEYS_SERIES.bySearch({ search: search, sort: sort, infinite: true }),
+    initialPageParam: new PageRequest(0, 50, sort),
+    query: ({ pageParam }) =>
+      komgaClient
+        .POST('/api/v1/series/list', {
+          body: search,
+          params: {
+            query: {
+              page: pageParam.page,
+              size: pageParam.size,
+              sort: sort?.map((it) => sortToString(it)),
+            },
+          },
+        })
+        // unwrap the openapi-fetch structure on success
+        .then((res) => res.data),
+    getNextPageParam: (lastPage, _, lastPageParam) =>
+      !lastPage?.last ? lastPageParam.next() : null,
+  }),
+)
+
 export const seriesDetailQuery = defineQueryOptions(({ seriesId }: { seriesId: string }) => ({
   key: QUERY_KEYS_SERIES.byId(seriesId),
   query: () =>
diff --git a/next-ui/src/components/filter/by/Author.vue b/next-ui/src/components/filter/by/Author.vue
index d2380615..02b6e271 100644
--- a/next-ui/src/components/filter/by/Author.vue
+++ b/next-ui/src/components/filter/by/Author.vue
@@ -15,9 +15,8 @@
 
 <script setup lang="ts">
 import { useInfiniteQuery, useQuery } from '@pinia/colada'
-import { authorsQuery } from '@/colada/referential'
+import { authorsNamesQueryInfinite, authorsQuery } from '@/colada/referential'
 import { PageRequest } from '@/types/PageRequest'
-import { komgaClient } from '@/api/komga-client'
 import * as v from 'valibot'
 import { type AnyAll, filterKeys, filterMessages, SchemaAuthor } from '@/types/filter'
 import type { ItemType } from '@/components/filter/List.vue'
@@ -55,23 +54,9 @@ const { data: searchItems, isLoading: searchLoading } = useQuery(() => ({
 }))
 const searchResults = computed(() => searchItems.value?.content?.map((it) => toItemType(it.name)))
 
-const { data: infiniteData, loadNextPage } = useInfiniteQuery({
-  key: () => ['infinite_authors', apiQuery],
-  initialPageParam: new PageRequest(0, 50),
-  query: ({ pageParam }) =>
-    komgaClient
-      .GET('/api/v2/authors/names', {
-        params: {
-          query: {
-            ...apiQuery,
-            ...pageParam,
-          },
-        },
-      })
-      // unwrap the openapi-fetch structure on success
-      .then((res) => res.data),
-  getNextPageParam: (lastPage, _, lastPageParam) => (!lastPage?.last ? lastPageParam.next() : null),
-})
+const { data: infiniteData, loadNextPage } = useInfiniteQuery(() =>
+  authorsNamesQueryInfinite(apiQuery),
+)
 const infiniteItems = computed(() => {
   const itemTypes = (infiniteData.value?.pages.flatMap((it) => it?.content ?? []) ?? []).map((it) =>
     toItemType(it),
diff --git a/next-ui/src/components/filter/by/Genre.vue b/next-ui/src/components/filter/by/Genre.vue
index bf074513..975556bb 100644
--- a/next-ui/src/components/filter/by/Genre.vue
+++ b/next-ui/src/components/filter/by/Genre.vue
@@ -15,9 +15,8 @@
 
 <script setup lang="ts">
 import { useInfiniteQuery, useQuery } from '@pinia/colada'
-import { genresQuery } from '@/colada/referential'
+import { genresQuery, genresQueryInfinite } from '@/colada/referential'
 import { PageRequest } from '@/types/PageRequest'
-import { komgaClient } from '@/api/komga-client'
 import * as v from 'valibot'
 import { type AnyAll, filterKeys, filterMessages, SchemaString } from '@/types/filter'
 import type { ItemType } from '@/components/filter/List.vue'
@@ -50,23 +49,7 @@ const { data: searchItems, isLoading: searchLoading } = useQuery(() => ({
 }))
 const searchResults = computed(() => searchItems.value?.content?.map((it) => toItemType(it)))
 
-const { data: infiniteData, loadNextPage } = useInfiniteQuery({
-  key: () => ['infinite_genres', apiQuery],
-  initialPageParam: new PageRequest(0, 50),
-  query: ({ pageParam }) =>
-    komgaClient
-      .GET('/api/v2/genres', {
-        params: {
-          query: {
-            ...apiQuery,
-            ...pageParam,
-          },
-        },
-      })
-      // unwrap the openapi-fetch structure on success
-      .then((res) => res.data),
-  getNextPageParam: (lastPage, _, lastPageParam) => (!lastPage?.last ? lastPageParam.next() : null),
-})
+const { data: infiniteData, loadNextPage } = useInfiniteQuery(() => genresQueryInfinite(apiQuery))
 const infiniteItems = computed(() => {
   const itemTypes = (infiniteData.value?.pages.flatMap((it) => it?.content ?? []) ?? []).map((it) =>
     toItemType(it),
diff --git a/next-ui/src/components/filter/by/Publisher.vue b/next-ui/src/components/filter/by/Publisher.vue
index 20274a78..90f2063f 100644
--- a/next-ui/src/components/filter/by/Publisher.vue
+++ b/next-ui/src/components/filter/by/Publisher.vue
@@ -15,9 +15,8 @@
 
 <script setup lang="ts">
 import { useInfiniteQuery, useQuery } from '@pinia/colada'
-import { publishersQuery } from '@/colada/referential'
+import { publishersQuery, publishersQueryInfinite } from '@/colada/referential'
 import { PageRequest } from '@/types/PageRequest'
-import { komgaClient } from '@/api/komga-client'
 import * as v from 'valibot'
 import { type AnyAll, filterKeys, filterMessages, SchemaString } from '@/types/filter'
 import type { ItemType } from '@/components/filter/List.vue'
@@ -50,23 +49,9 @@ const { data: searchItems, isLoading: searchLoading } = useQuery(() => ({
 }))
 const searchResults = computed(() => searchItems.value?.content?.map((it) => toItemType(it)))
 
-const { data: infiniteData, loadNextPage } = useInfiniteQuery({
-  key: () => ['infinite_publishers', apiQuery],
-  initialPageParam: new PageRequest(0, 50),
-  query: ({ pageParam }) =>
-    komgaClient
-      .GET('/api/v2/publishers', {
-        params: {
-          query: {
-            ...apiQuery,
-            ...pageParam,
-          },
-        },
-      })
-      // unwrap the openapi-fetch structure on success
-      .then((res) => res.data),
-  getNextPageParam: (lastPage, _, lastPageParam) => (!lastPage?.last ? lastPageParam.next() : null),
-})
+const { data: infiniteData, loadNextPage } = useInfiniteQuery(() =>
+  publishersQueryInfinite(apiQuery),
+)
 const infiniteItems = computed(() => {
   const itemTypes = (infiniteData.value?.pages.flatMap((it) => it?.content ?? []) ?? []).map((it) =>
     toItemType(it),
diff --git a/next-ui/src/components/filter/by/SharingLabel.vue b/next-ui/src/components/filter/by/SharingLabel.vue
index e3ccd68b..967f88e4 100644
--- a/next-ui/src/components/filter/by/SharingLabel.vue
+++ b/next-ui/src/components/filter/by/SharingLabel.vue
@@ -15,9 +15,8 @@
 
 <script setup lang="ts">
 import { useInfiniteQuery, useQuery } from '@pinia/colada'
-import { sharingLabelsQuery } from '@/colada/referential'
+import { sharingLabelsQuery, sharingLabelsQueryInfinite } from '@/colada/referential'
 import { PageRequest } from '@/types/PageRequest'
-import { komgaClient } from '@/api/komga-client'
 import * as v from 'valibot'
 import { type AnyAll, filterKeys, filterMessages, SchemaString } from '@/types/filter'
 import type { ItemType } from '@/components/filter/List.vue'
@@ -50,23 +49,9 @@ const { data: searchItems, isLoading: searchLoading } = useQuery(() => ({
 }))
 const searchResults = computed(() => searchItems.value?.content?.map((it) => toItemType(it)))
 
-const { data: infiniteData, loadNextPage } = useInfiniteQuery({
-  key: () => ['infinite_sharing-labels', apiQuery],
-  initialPageParam: new PageRequest(0, 50),
-  query: ({ pageParam }) =>
-    komgaClient
-      .GET('/api/v2/sharing-labels', {
-        params: {
-          query: {
-            ...apiQuery,
-            ...pageParam,
-          },
-        },
-      })
-      // unwrap the openapi-fetch structure on success
-      .then((res) => res.data),
-  getNextPageParam: (lastPage, _, lastPageParam) => (!lastPage?.last ? lastPageParam.next() : null),
-})
+const { data: infiniteData, loadNextPage } = useInfiniteQuery(() =>
+  sharingLabelsQueryInfinite(apiQuery),
+)
 const infiniteItems = computed(() => {
   const itemTypes = (infiniteData.value?.pages.flatMap((it) => it?.content ?? []) ?? []).map((it) =>
     toItemType(it),
diff --git a/next-ui/src/components/filter/by/Tag.vue b/next-ui/src/components/filter/by/Tag.vue
index 123aa6e7..834c9163 100644
--- a/next-ui/src/components/filter/by/Tag.vue
+++ b/next-ui/src/components/filter/by/Tag.vue
@@ -15,9 +15,8 @@
 
 <script setup lang="ts">
 import { useInfiniteQuery, useQuery } from '@pinia/colada'
-import { tagsQuery } from '@/colada/referential'
+import { tagsQuery, tagsQueryInfinite } from '@/colada/referential'
 import { PageRequest } from '@/types/PageRequest'
-import { komgaClient } from '@/api/komga-client'
 import * as v from 'valibot'
 import { type AnyAll, filterKeys, filterMessages, SchemaString } from '@/types/filter'
 import type { ItemType } from '@/components/filter/List.vue'
@@ -55,23 +54,7 @@ const { data: searchItems, isLoading: searchLoading } = useQuery(() => ({
 }))
 const searchResults = computed(() => searchItems.value?.content?.map((it) => toItemType(it)))
 
-const { data: infiniteData, loadNextPage } = useInfiniteQuery({
-  key: () => ['infinite_tags', apiQuery],
-  initialPageParam: new PageRequest(0, 50),
-  query: ({ pageParam }) =>
-    komgaClient
-      .GET('/api/v2/tags', {
-        params: {
-          query: {
-            ...apiQuery,
-            ...pageParam,
-          },
-        },
-      })
-      // unwrap the openapi-fetch structure on success
-      .then((res) => res.data),
-  getNextPageParam: (lastPage, _, lastPageParam) => (!lastPage?.last ? lastPageParam.next() : null),
-})
+const { data: infiniteData, loadNextPage } = useInfiniteQuery(() => tagsQueryInfinite(apiQuery))
 const infiniteItems = computed(() => {
   const itemTypes = (infiniteData.value?.pages.flatMap((it) => it?.content ?? []) ?? []).map((it) =>
     toItemType(it),
diff --git a/next-ui/src/pages/collection/[id].vue b/next-ui/src/pages/collection/[id].vue
index 01c17aaa..2d3d88ea 100644
--- a/next-ui/src/pages/collection/[id].vue
+++ b/next-ui/src/pages/collection/[id].vue
@@ -252,9 +252,8 @@ import {
 } from '@/types/filter'
 import type { components } from '@/generated/openapi/komga'
 import { useInfiniteQuery, useQuery } from '@pinia/colada'
-import { seriesListQuery } from '@/colada/series'
-import { PageRequest, sortToString, type Sort } from '@/types/PageRequest'
-import { komgaClient } from '@/api/komga-client'
+import { seriesListQuery, seriesListQueryInfinite } from '@/colada/series'
+import { PageRequest, type Sort } from '@/types/PageRequest'
 import { collectionDetailQuery } from '@/colada/collections'
 import CollectionMenuButton from '@/components/collection/menu/CollectionMenuButton.vue'
 
@@ -383,26 +382,10 @@ const {
   data: dataInfinite,
   loadNextPage,
   hasNextPage,
-} = useInfiniteQuery({
-  key: () => ['infinite_series', apiQuery.value, sortActive.value],
-  initialPageParam: new PageRequest(0, 50, sortActive.value),
-  query: ({ pageParam }) =>
-    komgaClient
-      .POST('/api/v1/series/list', {
-        body: apiQuery.value,
-        params: {
-          query: {
-            page: pageParam.page,
-            size: pageParam.size,
-            sort: sortActive.value.map((it) => sortToString(it)),
-          },
-        },
-      })
-      // unwrap the openapi-fetch structure on success
-      .then((res) => res.data),
-  getNextPageParam: (lastPage, _, lastPageParam) => (!lastPage?.last ? lastPageParam.next() : null),
-  enabled: isBrowsingScroll,
-})
+} = useInfiniteQuery(() => ({
+  ...seriesListQueryInfinite({ search: { ...apiQuery.value }, sort: sortActive.value }),
+  enabled: isBrowsingScroll.value,
+}))
 const dataInfiniteFlat = computed(() =>
   dataInfinite.value?.pages.flatMap((it) => it?.content ?? []),
 )
diff --git a/next-ui/src/pages/libraries/[id]/books.vue b/next-ui/src/pages/libraries/[id]/books.vue
index 6b698c40..208afd0d 100644
--- a/next-ui/src/pages/libraries/[id]/books.vue
+++ b/next-ui/src/pages/libraries/[id]/books.vue
@@ -162,9 +162,8 @@ import {
   valuesToConditions,
 } from '@/functions/filter'
 import { useInfiniteQuery, useQuery } from '@pinia/colada'
-import { PageRequest, sortToString } from '@/types/PageRequest'
-import { komgaClient } from '@/api/komga-client'
-import { bookListQuery } from '@/colada/books'
+import { PageRequest } from '@/types/PageRequest'
+import { bookListQuery, bookListQueryInfinite } from '@/colada/books'
 import { commonMessages } from '@/utils/i18n/common-messages'
 import { useFilterAuthors } from '@/composables/filter'
 import ChipCount from '@/components/ChipCount.vue'
@@ -252,26 +251,10 @@ const {
   data: dataInfinite,
   loadNextPage,
   hasNextPage,
-} = useInfiniteQuery({
-  key: () => ['infinite_books', apiQuery.value, sortActive.value],
-  initialPageParam: new PageRequest(0, 50, sortActive.value),
-  query: ({ pageParam }) =>
-    komgaClient
-      .POST('/api/v1/books/list', {
-        body: apiQuery.value,
-        params: {
-          query: {
-            page: pageParam.page,
-            size: pageParam.size,
-            sort: sortActive.value.map((it) => sortToString(it)),
-          },
-        },
-      })
-      // unwrap the openapi-fetch structure on success
-      .then((res) => res.data),
-  getNextPageParam: (lastPage, _, lastPageParam) => (!lastPage?.last ? lastPageParam.next() : null),
-  enabled: isBrowsingScroll,
-})
+} = useInfiniteQuery(() => ({
+  ...bookListQueryInfinite({ search: { ...apiQuery.value }, sort: sortActive.value }),
+  enabled: isBrowsingScroll.value,
+}))
 const dataInfiniteFlat = computed(() =>
   dataInfinite.value?.pages.flatMap((it) => it?.content ?? []),
 )
diff --git a/next-ui/src/pages/libraries/[id]/collections.vue b/next-ui/src/pages/libraries/[id]/collections.vue
index 17a6d840..6bcd8d44 100644
--- a/next-ui/src/pages/libraries/[id]/collections.vue
+++ b/next-ui/src/pages/libraries/[id]/collections.vue
@@ -51,11 +51,10 @@ import { useAppStore } from '@/stores/app'
 import { usePagination } from '@/composables/pagination'
 import { useSelectionStore } from '@/stores/selection'
 import { useDisplay } from 'vuetify'
-import { komgaClient } from '@/api/komga-client'
 import PosterSizeSlider from '@/components/PosterSizeSlider.vue'
 import { storeToRefs } from 'pinia'
 import ChipCount from '@/components/ChipCount.vue'
-import { collectionsListQuery } from '@/colada/collections'
+import { collectionsListQuery, collectionsListQueryInfinite } from '@/colada/collections'
 
 const route = useRoute('/libraries/[id]/collections')
 const libraryId = route.params.id
@@ -91,25 +90,10 @@ const {
   data: dataInfinite,
   loadNextPage,
   hasNextPage,
-} = useInfiniteQuery({
-  key: () => ['infinite_collections', { libraryIds: libraryIds.value }],
-  initialPageParam: new PageRequest(0, 50),
-  query: ({ pageParam }) =>
-    komgaClient
-      .GET('/api/v1/collections', {
-        params: {
-          query: {
-            page: pageParam.page,
-            size: pageParam.size,
-            libraryIds: libraryIds.value,
-          },
-        },
-      })
-      // unwrap the openapi-fetch structure on success
-      .then((res) => res.data),
-  getNextPageParam: (lastPage, _, lastPageParam) => (!lastPage?.last ? lastPageParam.next() : null),
-  enabled: isBrowsingScroll,
-})
+} = useInfiniteQuery(() => ({
+  ...collectionsListQueryInfinite({ libraryIds: libraryIds.value }),
+  enabled: isBrowsingScroll.value,
+}))
 const dataInfiniteFlat = computed(() =>
   dataInfinite.value?.pages.flatMap((it) => it?.content ?? []),
 )
diff --git a/next-ui/src/pages/libraries/[id]/readlists.vue b/next-ui/src/pages/libraries/[id]/readlists.vue
index 8e5c7426..3146b366 100644
--- a/next-ui/src/pages/libraries/[id]/readlists.vue
+++ b/next-ui/src/pages/libraries/[id]/readlists.vue
@@ -51,11 +51,10 @@ import { useAppStore } from '@/stores/app'
 import { usePagination } from '@/composables/pagination'
 import { useSelectionStore } from '@/stores/selection'
 import { useDisplay } from 'vuetify'
-import { komgaClient } from '@/api/komga-client'
 import PosterSizeSlider from '@/components/PosterSizeSlider.vue'
 import { storeToRefs } from 'pinia'
 import ChipCount from '@/components/ChipCount.vue'
-import { readListsListQuery } from '@/colada/readlists'
+import { readListsListQuery, readListsListQueryInfinite } from '@/colada/readlists'
 
 const route = useRoute('/libraries/[id]/readlists')
 const libraryId = route.params.id
@@ -91,25 +90,10 @@ const {
   data: dataInfinite,
   loadNextPage,
   hasNextPage,
-} = useInfiniteQuery({
-  key: () => ['infinite_readlists', { libraryIds: libraryIds.value }],
-  initialPageParam: new PageRequest(0, 50),
-  query: ({ pageParam }) =>
-    komgaClient
-      .GET('/api/v1/readlists', {
-        params: {
-          query: {
-            page: pageParam.page,
-            size: pageParam.size,
-            libraryIds: libraryIds.value,
-          },
-        },
-      })
-      // unwrap the openapi-fetch structure on success
-      .then((res) => res.data),
-  getNextPageParam: (lastPage, _, lastPageParam) => (!lastPage?.last ? lastPageParam.next() : null),
-  enabled: isBrowsingScroll,
-})
+} = useInfiniteQuery(() => ({
+  ...readListsListQueryInfinite({ libraryIds: libraryIds.value }),
+  enabled: isBrowsingScroll.value,
+}))
 const dataInfiniteFlat = computed(() =>
   dataInfinite.value?.pages.flatMap((it) => it?.content ?? []),
 )
diff --git a/next-ui/src/pages/libraries/[id]/series.vue b/next-ui/src/pages/libraries/[id]/series.vue
index 1df3def1..d34c44f5 100644
--- a/next-ui/src/pages/libraries/[id]/series.vue
+++ b/next-ui/src/pages/libraries/[id]/series.vue
@@ -218,9 +218,9 @@
 
 <script lang="ts" setup>
 import { useInfiniteQuery, useQuery } from '@pinia/colada'
-import { seriesListQuery } from '@/colada/series'
+import { seriesListQuery, seriesListQueryInfinite } from '@/colada/series'
 import type { components } from '@/generated/openapi/komga'
-import { PageRequest, sortToString } from '@/types/PageRequest'
+import { PageRequest } from '@/types/PageRequest'
 import { useGetLibrariesById } from '@/composables/libraries'
 import { useAppStore } from '@/stores/app'
 import { usePagination } from '@/composables/pagination'
@@ -249,7 +249,6 @@ import { useRouteQuerySchema } from '@/composables/useRouteQuerySchema'
 import { commonMessages } from '@/utils/i18n/common-messages'
 import { useIntlFormatter } from '@/composables/intlFormatter'
 import { sortSeries } from '@/types/sort'
-import { komgaClient } from '@/api/komga-client'
 import PosterSizeSlider from '@/components/PosterSizeSlider.vue'
 import FilterButton from '@/components/filter/FilterButton.vue'
 import { usePresentationMode } from '@/composables/presentationMode'
@@ -371,26 +370,10 @@ const {
   data: dataInfinite,
   loadNextPage,
   hasNextPage,
-} = useInfiniteQuery({
-  key: () => ['infinite_series', apiQuery.value, sortActive.value],
-  initialPageParam: new PageRequest(0, 50, sortActive.value),
-  query: ({ pageParam }) =>
-    komgaClient
-      .POST('/api/v1/series/list', {
-        body: apiQuery.value,
-        params: {
-          query: {
-            page: pageParam.page,
-            size: pageParam.size,
-            sort: sortActive.value.map((it) => sortToString(it)),
-          },
-        },
-      })
-      // unwrap the openapi-fetch structure on success
-      .then((res) => res.data),
-  getNextPageParam: (lastPage, _, lastPageParam) => (!lastPage?.last ? lastPageParam.next() : null),
-  enabled: isBrowsingScroll,
-})
+} = useInfiniteQuery(() => ({
+  ...seriesListQueryInfinite({ search: { ...apiQuery.value }, sort: sortActive.value }),
+  enabled: isBrowsingScroll.value,
+}))
 const dataInfiniteFlat = computed(() =>
   dataInfinite.value?.pages.flatMap((it) => it?.content ?? []),
 )