ref(tsc): move buildDetails endpoint to apiOptions (#112357)

TkDodo · george-sentry · commit 86e1cf201a37 · 2026-04-09T14:12:57.000-07:00
diff --git a/static/app/components/preprod/preprodBuildsTable.tsx b/static/app/components/preprod/preprodBuildsTable.tsx
@@ -7,7 +7,7 @@ import {LoadingIndicator} from 'sentry/components/loadingIndicator';
 import {Pagination} from 'sentry/components/pagination';
 import {SimpleTable} from 'sentry/components/tables/simpleTable';
 import {t, tct} from 'sentry/locale';
-import type {RequestError} from 'sentry/utils/requestError/requestError';
+import {RequestError} from 'sentry/utils/requestError/requestError';
 import type {BuildDetailsApiResponse} from 'sentry/views/preprod/types/buildDetailsTypes';
 import {getLabels} from 'sentry/views/preprod/utils/labelUtils';
 
@@ -20,20 +20,22 @@ interface PreprodBuildsTableProps {
   isLoading: boolean;
   organizationSlug: string;
   display?: PreprodBuildsDisplay;
-  error?: RequestError | null;
+  error?: Error | null;
   hasSearchQuery?: boolean;
   onRowClick?: (build: BuildDetailsApiResponse) => void;
   pageLinks?: string | null;
   showProjectColumn?: boolean;
 }
 
-function getErrorMessage(error: RequestError): string {
-  const detail = error.responseJSON?.detail;
-  if (typeof detail === 'string') {
-    return detail;
-  }
-  if (detail?.message) {
-    return detail.message;
+function getErrorMessage(error: Error): string {
+  if (error instanceof RequestError) {
+    const detail = error.responseJSON?.detail;
+    if (typeof detail === 'string') {
+      return detail;
+    }
+    if (detail?.message) {
+      return detail.message;
+    }
   }
   return t('Error loading builds');
 }
diff --git a/static/app/views/preprod/buildComparison/main/sizeCompareSelectionContent.tsx b/static/app/views/preprod/buildComparison/main/sizeCompareSelectionContent.tsx
@@ -1,5 +1,6 @@
 import {useState} from 'react';
 import styled from '@emotion/styled';
+import {useQuery} from '@tanstack/react-query';
 
 import {Alert} from '@sentry/scraps/alert';
 import {InputGroup} from '@sentry/scraps/input';
@@ -24,10 +25,10 @@ import {
 import {IconBranch} from 'sentry/icons/iconBranch';
 import {t} from 'sentry/locale';
 import {trackAnalytics} from 'sentry/utils/analytics';
-import {getApiUrl} from 'sentry/utils/api/getApiUrl';
+import {selectJsonWithHeaders} from 'sentry/utils/api/apiOptions';
 import {parseApiError} from 'sentry/utils/parseApiError';
 import {parseLinkHeader} from 'sentry/utils/parseLinkHeader';
-import {useApiQuery, useMutation} from 'sentry/utils/queryClient';
+import {useMutation} from 'sentry/utils/queryClient';
 import {decodeScalar} from 'sentry/utils/queryString';
 import type {RequestError} from 'sentry/utils/requestError/requestError';
 import {useLocationQuery} from 'sentry/utils/url/useLocationQuery';
@@ -39,6 +40,7 @@ import {
   isSizeInfoCompleted,
   type BuildDetailsApiResponse,
 } from 'sentry/views/preprod/types/buildDetailsTypes';
+import {buildDetailsApiOptions} from 'sentry/views/preprod/utils/buildDetailsApiOptions';
 import {
   getCompareApiUrl,
   getCompareBuildPath,
@@ -88,26 +90,20 @@ export function SizeCompareSelectionContent({
   }
   const fullQuery = searchFilters.join(' ');
 
-  const queryParams: Record<string, any> = {
-    per_page: 25,
-    project: headBuildDetails.project_id,
-    query: fullQuery,
-    ...(cursor && {cursor}),
-  };
-
-  const buildsQuery = useApiQuery<BuildDetailsApiResponse[]>(
-    [
-      getApiUrl(`/organizations/$organizationIdOrSlug/builds/`, {
-        path: {organizationIdOrSlug: organization.slug},
-      }),
-      {query: queryParams},
-    ],
-    {
-      staleTime: 0,
-    }
-  );
+  const buildsQuery = useQuery({
+    ...buildDetailsApiOptions({
+      organization,
+      queryParams: {
+        per_page: 25,
+        project: headBuildDetails.project_id,
+        query: fullQuery,
+        ...(cursor && {cursor}),
+      },
+    }),
+    select: selectJsonWithHeaders,
+  });
 
-  const pageLinks = buildsQuery.getResponseHeader?.('Link') || null;
+  const pageLinks = buildsQuery.data?.headers.Link || null;
 
   const parsedLinks = pageLinks ? parseLinkHeader(pageLinks) : {};
   const hasPagination =
@@ -194,9 +190,9 @@ export function SizeCompareSelectionContent({
       {buildsQuery.isError && (
         <Alert variant="danger">{buildsQuery.error?.message}</Alert>
       )}
-      {buildsQuery.data && (
+      {buildsQuery.data?.json && (
         <Stack gap="md">
-          {buildsQuery.data?.map(build => {
+          {buildsQuery.data.json.map(build => {
             if (build.id === headBuildDetails.id) {
               return null;
             }
diff --git a/static/app/views/preprod/utils/buildDetailsApiOptions.ts b/static/app/views/preprod/utils/buildDetailsApiOptions.ts
@@ -0,0 +1,20 @@
+import type {Organization} from 'sentry/types/organization';
+import {apiOptions} from 'sentry/utils/api/apiOptions';
+import type {BuildDetailsApiResponse} from 'sentry/views/preprod/types/buildDetailsTypes';
+
+export function buildDetailsApiOptions({
+  queryParams,
+  organization,
+}: {
+  organization: Organization;
+  queryParams?: Record<string, unknown>;
+}) {
+  return apiOptions.as<BuildDetailsApiResponse[]>()(
+    '/organizations/$organizationIdOrSlug/builds/',
+    {
+      path: {organizationIdOrSlug: organization.slug},
+      query: queryParams,
+      staleTime: 0,
+    }
+  );
+}
diff --git a/static/app/views/releases/detail/commitsAndFiles/preprodBuilds.tsx b/static/app/views/releases/detail/commitsAndFiles/preprodBuilds.tsx
@@ -1,4 +1,5 @@
 import {useCallback, useContext, useEffect, useMemo, useState} from 'react';
+import {useQuery} from '@tanstack/react-query';
 
 import {Container} from '@sentry/scraps/layout';
 
@@ -13,10 +14,8 @@ import {PreprodBuildsTable} from 'sentry/components/preprod/preprodBuildsTable';
 import {SentryDocumentTitle} from 'sentry/components/sentryDocumentTitle';
 import {t} from 'sentry/locale';
 import {trackAnalytics} from 'sentry/utils/analytics';
-import {getApiUrl} from 'sentry/utils/api/getApiUrl';
-import {useApiQuery, type UseApiQueryResult} from 'sentry/utils/queryClient';
+import {selectJsonWithHeaders} from 'sentry/utils/api/apiOptions';
 import {decodeScalar} from 'sentry/utils/queryString';
-import type {RequestError} from 'sentry/utils/requestError/requestError';
 import {useLocationQuery} from 'sentry/utils/url/useLocationQuery';
 import {useDebouncedValue} from 'sentry/utils/useDebouncedValue';
 import {useLocation} from 'sentry/utils/useLocation';
@@ -26,6 +25,7 @@ import {useParams} from 'sentry/utils/useParams';
 import {formatVersion} from 'sentry/utils/versions/formatVersion';
 import {usePreprodBuildsAnalytics} from 'sentry/views/preprod/hooks/usePreprodBuildsAnalytics';
 import type {BuildDetailsApiResponse} from 'sentry/views/preprod/types/buildDetailsTypes';
+import {buildDetailsApiOptions} from 'sentry/views/preprod/utils/buildDetailsApiOptions';
 import {ReleaseContext} from 'sentry/views/releases/detail';
 
 import {PreprodOnboarding} from './preprodOnboarding';
@@ -107,25 +107,15 @@ export default function PreprodBuilds() {
   }
 
   const {
-    data: buildsData,
+    data: buildsResponse,
     isPending: isLoadingBuilds,
     error: buildsError,
     refetch,
-    getResponseHeader,
-  }: UseApiQueryResult<BuildDetailsApiResponse[], RequestError> = useApiQuery<
-    BuildDetailsApiResponse[]
-  >(
-    [
-      getApiUrl(`/organizations/$organizationIdOrSlug/builds/`, {
-        path: {organizationIdOrSlug: organization.slug},
-      }),
-      {query: queryParams},
-    ],
-    {
-      staleTime: 0,
-      enabled: !!projectSlug && !!params.release,
-    }
-  );
+  } = useQuery({
+    ...buildDetailsApiOptions({organization, queryParams}),
+    select: selectJsonWithHeaders,
+    enabled: !!projectSlug && !!params.release,
+  });
 
   const handleSearch = (query: string, _state?: {queryIsValid: boolean}) => {
     setLocalSearchQuery(query);
@@ -145,8 +135,8 @@ export default function PreprodBuilds() {
     [location, navigate]
   );
 
-  const builds = buildsData ?? [];
-  const pageLinks = getResponseHeader?.('Link') || null;
+  const builds = buildsResponse?.json ?? [];
+  const pageLinks = buildsResponse?.headers.Link ?? null;
 
   const hasSearchQuery = !!urlSearchQuery?.trim();
   const showOnboarding = builds.length === 0 && !hasSearchQuery && !isLoadingBuilds;
diff --git a/static/app/views/releases/list/mobileBuilds.tsx b/static/app/views/releases/list/mobileBuilds.tsx
@@ -1,4 +1,5 @@
 import {Fragment, useCallback, useEffect, useMemo} from 'react';
+import {useQuery} from '@tanstack/react-query';
 import {parseAsString, useQueryState} from 'nuqs';
 
 import {Stack} from '@sentry/scraps/layout';
@@ -16,13 +17,11 @@ import {PreprodOnboardingPanel} from 'sentry/components/preprod/preprodOnboardin
 import {ProjectsStore} from 'sentry/stores/projectsStore';
 import type {Organization} from 'sentry/types/organization';
 import {trackAnalytics} from 'sentry/utils/analytics';
-import {getApiUrl} from 'sentry/utils/api/getApiUrl';
-import {useApiQuery, type UseApiQueryResult} from 'sentry/utils/queryClient';
-import type {RequestError} from 'sentry/utils/requestError/requestError';
+import {selectJsonWithHeaders} from 'sentry/utils/api/apiOptions';
 import {useLocation} from 'sentry/utils/useLocation';
 import {useNavigate} from 'sentry/utils/useNavigate';
 import {usePreprodBuildsAnalytics} from 'sentry/views/preprod/hooks/usePreprodBuildsAnalytics';
-import type {BuildDetailsApiResponse} from 'sentry/views/preprod/types/buildDetailsTypes';
+import {buildDetailsApiOptions} from 'sentry/views/preprod/utils/buildDetailsApiOptions';
 
 import {MobileBuildsChart} from './mobileBuildsChart';
 
@@ -72,25 +71,15 @@ export function MobileBuilds({organization, selectedProjectIds}: Props) {
   }, [activeDisplay, cursor, location, searchQuery, selectedProjectIds]);
 
   const {
-    data: buildsData,
+    data: buildsResponse,
     isPending: isLoadingBuilds,
     error: buildsError,
     refetch,
-    getResponseHeader,
-  }: UseApiQueryResult<BuildDetailsApiResponse[], RequestError> = useApiQuery<
-    BuildDetailsApiResponse[]
-  >(
-    [
-      getApiUrl(`/organizations/$organizationIdOrSlug/builds/`, {
-        path: {organizationIdOrSlug: organization.slug},
-      }),
-      {query: buildsQueryParams},
-    ],
-    {
-      staleTime: 0,
-      enabled: selectedProjectIds.length > 0,
-    }
-  );
+  } = useQuery({
+    ...buildDetailsApiOptions({organization, queryParams: buildsQueryParams}),
+    select: selectJsonWithHeaders,
+    enabled: selectedProjectIds.length > 0,
+  });
 
   const handleSearch = useCallback(
     (query: string) => {
@@ -112,8 +101,8 @@ export function MobileBuilds({organization, selectedProjectIds}: Props) {
     [location, navigate]
   );
 
-  const builds = buildsData ?? [];
-  const pageLinks = getResponseHeader?.('Link') ?? undefined;
+  const builds = buildsResponse?.json ?? [];
+  const pageLinks = buildsResponse?.headers.Link ?? undefined;
   const hasSearchQuery = !!searchQuery?.trim();
   const showProjectColumn = selectedProjectIds.length > 1;
   const projectId = selectedProjectIds[0];
diff --git a/static/app/views/settings/project/preprod/featureFilter.tsx b/static/app/views/settings/project/preprod/featureFilter.tsx
@@ -1,4 +1,5 @@
 import {useCallback, useState} from 'react';
+import {useQuery} from '@tanstack/react-query';
 
 import {Container, Flex, Stack} from '@sentry/scraps/layout';
 import {Switch} from '@sentry/scraps/switch';
@@ -12,10 +13,8 @@ import {PreprodBuildsDisplay} from 'sentry/components/preprod/preprodBuildsDispl
 import {PreprodBuildsTable} from 'sentry/components/preprod/preprodBuildsTable';
 import {PreprodSearchBar} from 'sentry/components/preprod/preprodSearchBar';
 import {t} from 'sentry/locale';
-import {getApiUrl} from 'sentry/utils/api/getApiUrl';
-import {useApiQuery} from 'sentry/utils/queryClient';
 import {useOrganization} from 'sentry/utils/useOrganization';
-import type {BuildDetailsApiResponse} from 'sentry/views/preprod/types/buildDetailsTypes';
+import {buildDetailsApiOptions} from 'sentry/views/preprod/utils/buildDetailsApiOptions';
 import {useProjectSettingsOutlet} from 'sentry/views/settings/project/projectSettingsLayout';
 
 import {useFeatureFilter, type PreprodEnabledWriteKey} from './useFeatureFilter';
@@ -95,18 +94,10 @@ export function FeatureFilter({
     queryParams.query = localQuery;
   }
 
-  const buildsQuery = useApiQuery<BuildDetailsApiResponse[]>(
-    [
-      getApiUrl(`/organizations/$organizationIdOrSlug/builds/`, {
-        path: {organizationIdOrSlug: organization.slug},
-      }),
-      {query: queryParams},
-    ],
-    {
-      staleTime: 0,
-      enabled,
-    }
-  );
+  const buildsQuery = useQuery({
+    ...buildDetailsApiOptions({organization, queryParams}),
+    enabled,
+  });
 
   const builds = buildsQuery.data ?? [];
 
