feat: create un-paginated version of query

coder · brettkolodny · Mar 14, 2025 · Mar 10, 2025 · Mar 11, 2025 · Mar 11, 2025
commit cfd11f6f945c9bdba8d8ac0e3a14d726538f6faf
diff --git a/site/src/api/queries/organizations.ts b/site/src/api/queries/organizations.ts
@@ -62,10 +62,32 @@ export const organizationMembersKey = (id: string) => [
 	"members",
 ];
 
-export function paginatedOrganizationMembers(
-	organizationName: string,
+/**
+ * Creates a query configuration to fetch all members of an organization.
+ *
+ * Unlike the paginated version, this function sets the `limit` parameter to 0,
+ * which instructs the API to return all organization members in a single request
+ * without pagination.
+ *
+ * @param id - The unique identifier of the organization
+ * @returns A query configuration object for use with React Query
+ *
+ * @see paginatedOrganizationMembers - For fetching members with pagination support
+ */
+export const organizationMembers = (id: string) => {
+	return {
+		queryFn: () => API.getOrganizationPaginatedMembers(id, { limit: 0 }),
+		queryKey: organizationMembersKey(id),
+	};
+};
+
+export const paginatedOrganizationMembers = (
+	id: string,
 	searchParams: URLSearchParams,
-): UsePaginatedQueryOptions<PaginatedMembersResponse, PaginatedMembersRequest> {
+): UsePaginatedQueryOptions<
+	PaginatedMembersResponse,
+	PaginatedMembersRequest
+> => {
 	return {
 		searchParams,
 		queryPayload: ({ limit, offset }) => {
@@ -74,14 +96,10 @@ export function paginatedOrganizationMembers(
 				offset: offset,
 			};
 		},
-		queryKey: ({ payload }) => [
-			...organizationMembersKey(organizationName),
-			payload,
-		],
-		queryFn: ({ payload }) =>
-			API.getOrganizationPaginatedMembers(organizationName, payload),
+		queryKey: ({ payload }) => [...organizationMembersKey(id), payload],
+		queryFn: ({ payload }) => API.getOrganizationPaginatedMembers(id, payload),
 	};
-}
+};
 
 export const addOrganizationMember = (queryClient: QueryClient, id: string) => {
 	return {

diff --git a/site/src/components/UserAutocomplete/UserAutocomplete.tsx b/site/src/components/UserAutocomplete/UserAutocomplete.tsx
@@ -3,7 +3,10 @@ import Autocomplete from "@mui/material/Autocomplete";
 import CircularProgress from "@mui/material/CircularProgress";
 import TextField from "@mui/material/TextField";
 import { getErrorMessage } from "api/errors";
-import { paginatedOrganizationMembers } from "api/queries/organizations";
+import {
+	organizationMembers,
+	paginatedOrganizationMembers,
+} from "api/queries/organizations";
 import { users } from "api/queries/users";
 import type { OrganizationMemberWithUserData, User } from "api/typesGenerated";
 import { Avatar } from "components/Avatar/Avatar";
@@ -70,13 +73,10 @@ export const MemberAutocomplete: FC<MemberAutocompleteProps> = ({
 }) => {
 	const [filter, setFilter] = useState<string>();
 
-	const searchParams = new URLSearchParams();
-	searchParams.append("limit", "0");
-
-	// Currently this queries all members, as there is no pagination.
-	const membersQuery = usePaginatedQuery({
-		...paginatedOrganizationMembers(organizationId, searchParams),
+	const membersQuery = useQuery({
+		...organizationMembers(organizationId),
 		enabled: filter !== undefined,
+		keepPreviousData: true,
 	});
 	return (
 		<InnerAutocomplete<OrganizationMemberWithUserData>