feat: add API store list implementation for paginated result sets

src/api.ts

@@ -35,6 +35,13 @@ type APIStoreOptions<T extends APIObject> = {
   getRequestDefaults?: () => RequestInit
 }
 
+type PaginatedResults<T> = {
+  count: number
+  next: string | null
+  previous: string | null
+  results: T[]
+}
+
 type URLToken = string | number
 type URLBuilder = (...subPaths: URLToken[] | [...URLToken[], URLToken | URLSearchParams]) => string
 type PrefixableURLBuilder = URLBuilder & {
@@ -131,6 +138,60 @@ export function APIListUnpaginated<T extends APIObject>(api: ExtendableAPI<T>) {
 
   return { list }
 }
+
+export function APIListPaginated<T extends APIObject>(
+  api: ExtendableAPI<T>,
+  mode: 'offset' | 'page' = 'offset',
+  limit = 20,
+) {
+  const count = ref<number>(0)
+  const currentPage = ref<number>(1)
+  const nextPage = ref<string | null>(null)
+  const hasNext = computed(() => nextPage.value !== null)
+  const previousPage = ref<string | null>(null)
+  const hasPrevious = computed(() => previousPage.value !== null)
+  async function list(page?: number, requestInit?: RequestInit): Promise<T[]> {
+    page = page ?? currentPage.value
+    const query = new URLSearchParams()
+    if (mode === 'offset') {
+      query.set('limit', limit.toString())
+      query.set('offset', ((page - 1) * limit).toString())
+    } else {
+      query.set('page_size', limit.toString())
+      query.set('page', page.toString())
+    }
+    const res = await fetch(api.createRequest(api.endpoint(query), requestInit))
+    api.maybeRaiseResponse(res)
+    const data: PaginatedResults<T> = await res.json()
+    currentPage.value = page
+    count.value = data.count
+    nextPage.value = data.next
+    previousPage.value = data.previous
+
+    for (const item of data.results) {
+      api.itemMap.value.set(item.id, item)
+    }
+    return data.results
+  }
+
+  function reset() {
+    api.itemMap.value.clear()
+    currentPage.value = 1
+    count.value = 0
+    nextPage.value = null
+    previousPage.value = null
+  }
+
+  return {
+    list,
+    reset,
+    hasNext,
+    hasPrevious,
+    count: readonly(count),
+    currentPage: readonly(currentPage),
+  }
+}
+
 export function APIRetrieve<T extends APIObject>(api: ExtendableAPI<T>) {
   async function retrieve(
     id: ID,