fix(fetch): use pages for pagination instead of cursor (#4402)

* fix(fetch): use pages for pagination instead of cursor

* Create orange-lamps-happen.md

* Update whoami.ts

* chore(hasMorePages): add tests for hasMorePages

Author: rozenmd

.changeset/orange-lamps-happen.md

@@ -0,0 +1,9 @@
+---
+"wrangler": patch
+---
+
+This PR adds a fetch handler that uses `page`, assuming `result_info` provided by the endpoint contains `page`, `per_page`, and `total`
+
+This is needed as the existing `fetchListResult` handler for fetching potentially paginated results doesn't work for endpoints that don't implement `cursor`.
+
+Fixes #4349

packages/wrangler/src/__tests__/cfetch-utils.test.ts

@@ -0,0 +1,38 @@
+import { hasMorePages } from "../cfetch";
+
+/**
+hasMorePages is a function that returns a boolean based on the result_info object returned from the cloudflare v4 API - if the current page is less than the total number of pages, it returns true, otherwise false.
+*/
+
+describe("hasMorePages", () => {
+	it("should handle result_info not having enough results to paginate", () => {
+		expect(
+			hasMorePages({
+				page: 1,
+				per_page: 10,
+				count: 5,
+				total_count: 5,
+			})
+		).toBe(false);
+	});
+	it("should return true if the current page is less than the total number of pages", () => {
+		expect(
+			hasMorePages({
+				page: 1,
+				per_page: 10,
+				count: 10,
+				total_count: 100,
+			})
+		).toBe(true);
+	});
+	it("should return false if we are on the last page of results", () => {
+		expect(
+			hasMorePages({
+				page: 10,
+				per_page: 10,
+				count: 10,
+				total_count: 100,
+			})
+		).toBe(false);
+	});
+});

packages/wrangler/src/cfetch/index.ts

@@ -100,6 +100,66 @@ export async function fetchListResult<ResponseType>(
 	return results;
 }
 
+/**
+ * Make a fetch request for a list of values using pages,
+ * extracting the `result` from the JSON response,
+ * and repeating the request if the results are paginated.
+ *
+ * This is similar to fetchListResult, but it uses the `page` query parameter instead of `cursor`.
+ */
+export async function fetchPagedListResult<ResponseType>(
+	resource: string,
+	init: RequestInit = {},
+	queryParams?: URLSearchParams
+): Promise<ResponseType[]> {
+	const results: ResponseType[] = [];
+	let getMoreResults = true;
+	let page = 1;
+	while (getMoreResults) {
+		queryParams = new URLSearchParams(queryParams);
+		queryParams.set("page", String(page));
+
+		const json = await fetchInternal<FetchResult<ResponseType[]>>(
+			resource,
+			init,
+			queryParams
+		);
+		if (json.success) {
+			results.push(...json.result);
+			if (hasMorePages(json.result_info)) {
+				page = page + 1;
+			} else {
+				getMoreResults = false;
+			}
+		} else {
+			throwFetchError(resource, json);
+		}
+	}
+	return results;
+}
+
+interface PageResultInfo {
+	page: number;
+	per_page: number;
+	count: number;
+	total_count: number;
+}
+
+export function hasMorePages(
+	result_info: unknown
+): result_info is PageResultInfo {
+	const page = (result_info as PageResultInfo | undefined)?.page;
+	const per_page = (result_info as PageResultInfo | undefined)?.per_page;
+	const total = (result_info as PageResultInfo | undefined)?.total_count;
+
+	return (
+		page !== undefined &&
+		per_page !== undefined &&
+		total !== undefined &&
+		page * per_page < total
+	);
+}
+
 function throwFetchError(
 	resource: string,
 	response: FetchResult<unknown>

packages/wrangler/src/user/choose-account.tsx

@@ -1,4 +1,4 @@
-import { fetchListResult } from "../cfetch";
+import { fetchPagedListResult } from "../cfetch";
 import { getCloudflareAccountIdFromEnv } from "./auth-variables";
 
 export type ChooseAccountItem = {
@@ -15,7 +15,7 @@ export async function getAccountChoices(): Promise<ChooseAccountItem[]> {
 		return [{ id: accountIdFromEnv, name: "" }];
 	} else {
 		try {
-			const response = await fetchListResult<{
+			const response = await fetchPagedListResult<{
 				account: ChooseAccountItem;
 			}>(`/memberships`);
 			const accounts = response.map((r) => r.account);

packages/wrangler/src/whoami.ts

@@ -1,5 +1,5 @@
 import chalk from "chalk";
-import { fetchListResult, fetchResult } from "./cfetch";
+import { fetchPagedListResult, fetchResult } from "./cfetch";
 import { logger } from "./logger";
 import { getAPIToken, getAuthFromEnv, getScopes } from "./user";
 
@@ -91,7 +91,7 @@ async function getEmail(): Promise<string | undefined> {
 type AccountInfo = { name: string; id: string };
 
 async function getAccounts(): Promise<AccountInfo[]> {
-	return await fetchListResult<AccountInfo>("/accounts");
+	return await fetchPagedListResult<AccountInfo>("/accounts");
 }
 
 async function getTokenPermissions(): Promise<string[] | undefined> {