Function usePaginatedQuery

site/src/hooks/usePaginatedQuery.ts:85–327

(
	options: UsePaginatedQueryOptions<
		TQueryFnData,
		TQueryPayload,
		TError,
		TData,
		TQueryKey
	>,
)

> = UseQueryResult<TData, TError> & PaginationResultInfo;

export function usePaginatedQuery<
	TQueryFnData extends PaginatedData = PaginatedData,
	TQueryPayload = never,
	TError = unknown,
	TData extends PaginatedData = TQueryFnData,
	TQueryKey extends QueryKey = QueryKey,
>(
	options: UsePaginatedQueryOptions<
		TQueryFnData,
		TQueryPayload,
		TError,
		TData,
		TQueryKey
	>,
): UsePaginatedQueryResult<TData, TError> {
	const {
		queryKey,
		queryPayload,
		onInvalidPageChange,
		searchParams: outerSearchParams,
		queryFn: outerQueryFn,
		prefetch = true,
		staleTime = 60 * 1000, // One minute
		...extraOptions
	} = options;

	const [innerSearchParams, setSearchParams] = useSearchParams();
	const searchParams = outerSearchParams ?? innerSearchParams;

	const limit = DEFAULT_RECORDS_PER_PAGE;
	const currentPage = parsePage(searchParams);
	const currentPageOffset = (currentPage - 1) * limit;

	type Options = UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>;
	const getQueryOptionsFromPage = (pageNumber: number): Options => {
		const pageParams: QueryPageParams = {
			pageNumber,
			limit,
			offset: (pageNumber - 1) * limit,
			searchParams: getParamsWithoutPage(searchParams),
		};

		const payload = queryPayload?.(pageParams) as RuntimePayload<TQueryPayload>;
		return {
			staleTime,
			queryKey: queryKey({ ...pageParams, payload }),
			queryFn: (context: QueryFunctionContext<TQueryKey>) => {
				return outerQueryFn({ ...context, ...pageParams, payload });
			},
		};
	};

	// Not using infinite query right now because that requires a fair bit of list
	// virtualization as the lists get bigger (especially for the audit logs).
	// Keeping initial implementation simple.
	const query = useQuery<TQueryFnData, TError, TData, TQueryKey>({
		...extraOptions,
		...getQueryOptionsFromPage(currentPage),