ref(tsc): move release endpoints to apiOptions (#112566)

Author: TkDodo

static/app/components/customResolutionModal.tsx

@@ -1,5 +1,6 @@
 import {Fragment, useMemo, useState} from 'react';
 import styled from '@emotion/styled';
+import {useQuery} from '@tanstack/react-query';
 
 import {Button} from '@sentry/scraps/button';
 import {CompactSelect, type SelectOption} from '@sentry/scraps/compactSelect';
@@ -14,8 +15,7 @@ import {IconOpen} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {ConfigStore} from 'sentry/stores/configStore';
 import type {Release} from 'sentry/types/release';
-import {getApiUrl} from 'sentry/utils/api/getApiUrl';
-import {useApiQuery} from 'sentry/utils/queryClient';
+import {apiOptions} from 'sentry/utils/api/apiOptions';
 import {normalizeUrl} from 'sentry/utils/url/normalizeUrl';
 import {useDebouncedValue} from 'sentry/utils/useDebouncedValue';
 import {useOrganization} from 'sentry/utils/useOrganization';
@@ -67,47 +67,46 @@ export function CustomResolutionModal(props: CustomResolutionModalProps) {
   const currentUser = ConfigStore.get('user');
   const [selectionError, setSelectionError] = useState<string | null>(null);
 
-  const releaseListUrl = props.projectSlug
-    ? getApiUrl('/projects/$organizationIdOrSlug/$projectIdOrSlug/releases/', {
-        path: {
-          organizationIdOrSlug: organization.slug,
-          projectIdOrSlug: props.projectSlug,
-        },
-      })
-    : getApiUrl('/organizations/$organizationIdOrSlug/releases/', {
+  const releaseListOptions = props.projectSlug
+    ? apiOptions.as<Release[]>()(
+        '/projects/$organizationIdOrSlug/$projectIdOrSlug/releases/',
+        {
+          path: {
+            organizationIdOrSlug: organization.slug,
+            projectIdOrSlug: props.projectSlug,
+          },
+          query: {query: debouncedSearch},
+          staleTime: 60_000,
+        }
+      )
+    : apiOptions.as<Release[]>()('/organizations/$organizationIdOrSlug/releases/', {
         path: {organizationIdOrSlug: organization.slug},
+        query: {query: debouncedSearch},
+        staleTime: 60_000,
       });
 
-  const {data: releases = [], isFetching} = useApiQuery<Release[]>(
-    [
-      releaseListUrl,
-      {
-        query: {
-          query: debouncedSearch,
-        },
-      },
-    ],
-    {
-      staleTime: 60_000,
-      retry: false,
-    }
-  );
+  const {data: releases = [], isFetching} = useQuery({
+    ...releaseListOptions,
+    retry: false,
+  });
 
   const shouldLookupExact = debouncedSearch.trim().length > 0;
 
   // Attempt to find the exact release, the list is capped at the most recent 100 releases
-  const {data: exactRelease} = useApiQuery<Release>(
-    [
-      getApiUrl('/organizations/$organizationIdOrSlug/releases/$version/', {
-        path: {organizationIdOrSlug: organization.slug, version: debouncedSearch.trim()},
-      }),
-    ],
-    {
-      enabled: shouldLookupExact,
-      staleTime: 30_000,
-      retry: false,
-    }
-  );
+  const {data: exactRelease} = useQuery({
+    ...apiOptions.as<Release>()(
+      '/organizations/$organizationIdOrSlug/releases/$version/',
+      {
+        path: {
+          organizationIdOrSlug: organization.slug,
+          version: debouncedSearch.trim(),
+        },
+        staleTime: 30_000,
+      }
+    ),
+    enabled: shouldLookupExact,
+    retry: false,
+  });
 
   const options = useMemo((): Array<SelectOption<string>> => {
     const baseOptions = releases.map(release =>

static/app/components/versionHoverCard.tsx

@@ -1,5 +1,6 @@
 import {useMemo} from 'react';
 import styled from '@emotion/styled';
+import {useQuery} from '@tanstack/react-query';
 
 import {AvatarList} from '@sentry/scraps/avatar';
 import {Tag} from '@sentry/scraps/badge';
@@ -19,9 +20,9 @@ import type {Actor} from 'sentry/types/core';
 import type {Organization} from 'sentry/types/organization';
 import type {User} from 'sentry/types/user';
 import {defined} from 'sentry/utils';
+import {deploysApiOptions} from 'sentry/utils/deploysApiOptions';
 import {uniqueId} from 'sentry/utils/guid';
-import {useDeploys} from 'sentry/utils/useDeploys';
-import {useRelease} from 'sentry/utils/useRelease';
+import {releaseApiOptions} from 'sentry/utils/releaseApiOptions';
 import {useRepositories} from 'sentry/utils/useRepositories';
 import {parseVersion} from 'sentry/utils/versions/parseVersion';
 
@@ -41,19 +42,23 @@ function VersionHoverCardBody({organization, releaseVersion, projectSlug}: BodyP
     data: release,
     isPending: isReleaseLoading,
     isError: isReleaseError,
-  } = useRelease({
-    orgSlug: organization.slug,
-    projectSlug,
-    releaseVersion,
-  });
+  } = useQuery(
+    releaseApiOptions({
+      orgSlug: organization.slug,
+      projectSlug,
+      releaseVersion,
+    })
+  );
   const {
     data: deploys,
     isPending: isDeploysLoading,
     isError: isDeploysError,
-  } = useDeploys({
-    orgSlug: organization.slug,
-    releaseVersion,
-  });
+  } = useQuery(
+    deploysApiOptions({
+      orgSlug: organization.slug,
+      releaseVersion,
+    })
+  );
 
   function getRepoLink() {
     const orgSlug = organization.slug;

static/app/utils/deploysApiOptions.tsx

@@ -0,0 +1,24 @@
+import type {Deploy} from 'sentry/types/release';
+import {apiOptions} from 'sentry/utils/api/apiOptions';
+
+export function deploysApiOptions({
+  orgSlug,
+  releaseVersion,
+  query,
+}: {
+  orgSlug: string;
+  releaseVersion: string;
+  query?: Record<'project', unknown>;
+}) {
+  return apiOptions.as<Deploy[]>()(
+    '/organizations/$organizationIdOrSlug/releases/$version/deploys/',
+    {
+      path: {
+        organizationIdOrSlug: orgSlug,
+        version: releaseVersion,
+      },
+      query,
+      staleTime: Infinity,
+    }
+  );
+}

static/app/utils/releaseApiOptions.tsx

@@ -0,0 +1,24 @@
+import type {Release} from 'sentry/types/release';
+import {apiOptions} from 'sentry/utils/api/apiOptions';
+
+export function releaseApiOptions({
+  orgSlug,
+  projectSlug,
+  releaseVersion,
+}: {
+  orgSlug: string;
+  projectSlug: string;
+  releaseVersion: string;
+}) {
+  return apiOptions.as<Release>()(
+    '/projects/$organizationIdOrSlug/$projectIdOrSlug/releases/$version/',
+    {
+      path: {
+        organizationIdOrSlug: orgSlug,
+        projectIdOrSlug: projectSlug,
+        version: releaseVersion,
+      },
+      staleTime: Infinity,
+    }
+  );
+}

static/app/utils/useDeploys.tsx

@@ -1,20 +1,17 @@
 import {useCallback, useMemo} from 'react';
 import type {UseQueryResult} from '@tanstack/react-query';
+import {useQuery} from '@tanstack/react-query';
 import chunk from 'lodash/chunk';
 
 import type {ApiResult} from 'sentry/api';
 import {usePageFilters} from 'sentry/components/pageFilters/usePageFilters';
 import {DEFAULT_RELEASES_SORT, ReleasesSortOption} from 'sentry/constants/releases';
 import type {Release} from 'sentry/types/release';
+import {apiOptions} from 'sentry/utils/api/apiOptions';
 import {getApiUrl} from 'sentry/utils/api/getApiUrl';
 import type {TableData} from 'sentry/utils/discover/discoverQuery';
 import {DiscoverDatasets} from 'sentry/utils/discover/types';
-import {
-  fetchDataQuery,
-  useApiQuery,
-  useQueries,
-  type ApiQueryKey,
-} from 'sentry/utils/queryClient';
+import {fetchDataQuery, useQueries, type ApiQueryKey} from 'sentry/utils/queryClient';
 import {escapeFilterValue} from 'sentry/utils/tokenizeSearch';
 import {useOrganization} from 'sentry/utils/useOrganization';
 
@@ -59,30 +56,24 @@ export function useReleases(
       : (sortBy ?? DEFAULT_RELEASES_SORT);
 
   // Fetch releases
-  const releaseResults = useApiQuery<Release[]>(
-    [
-      getApiUrl('/organizations/$organizationIdOrSlug/releases/', {
-        path: {organizationIdOrSlug: organization.slug},
-      }),
-      {
-        query: {
-          project: projects,
-          per_page: 50,
-          environment: environments,
-          query: searchTerm,
-          sort: activeSort,
-          // flatten=1 groups releases across projects when sorting by non-date fields,
-          // flatten=0 keeps releases separate per project for date sorting
-          flatten: activeSort === ReleasesSortOption.DATE ? 0 : 1,
-        },
+  const releaseResults = useQuery({
+    ...apiOptions.as<Release[]>()('/organizations/$organizationIdOrSlug/releases/', {
+      path: {organizationIdOrSlug: organization.slug},
+      query: {
+        project: projects,
+        per_page: 50,
+        environment: environments,
+        query: searchTerm,
+        sort: activeSort,
+        // flatten=1 groups releases across projects when sorting by non-date fields,
+        // flatten=0 keeps releases separate per project for date sorting
+        flatten: activeSort === ReleasesSortOption.DATE ? 0 : 1,
       },
-    ],
-    {
       staleTime: Infinity,
-      enabled: isReady,
-      retry: false,
-    }
-  );
+    }),
+    enabled: isReady,
+    retry: false,
+  });
 
   const allReleases = useMemo(() => releaseResults.data ?? [], [releaseResults.data]);
 

static/app/utils/useRelease.tsx

@@ -1,5 +1,6 @@
 import {useEffect, useMemo} from 'react';
 import styled from '@emotion/styled';
+import {useQuery} from '@tanstack/react-query';
 
 import {AvatarList} from '@sentry/scraps/avatar';
 
@@ -13,9 +14,8 @@ import type {Actor} from 'sentry/types/core';
 import type {ReleaseWithHealth} from 'sentry/types/release';
 import type {User} from 'sentry/types/user';
 import {trackAnalytics} from 'sentry/utils/analytics';
-import {getApiUrl} from 'sentry/utils/api/getApiUrl';
+import {apiOptions} from 'sentry/utils/api/apiOptions';
 import {uniqueId} from 'sentry/utils/guid';
-import {useApiQuery} from 'sentry/utils/queryClient';
 import {useUser} from 'sentry/utils/useUser';
 
 import {NoContext} from './quickContextWrapper';
@@ -33,18 +33,17 @@ import {ContextType, tenSecondInMs} from './utils';
 export function ReleaseContext(props: BaseContextProps) {
   const user = useUser();
   const {dataRow, organization} = props;
-  const {isPending, isError, data} = useApiQuery<ReleaseWithHealth>(
-    [
-      getApiUrl('/organizations/$organizationIdOrSlug/releases/$version/', {
+  const {isPending, isError, data} = useQuery(
+    apiOptions.as<ReleaseWithHealth>()(
+      '/organizations/$organizationIdOrSlug/releases/$version/',
+      {
         path: {
           organizationIdOrSlug: organization.slug,
           version: dataRow.release,
         },
-      }),
-    ],
-    {
-      staleTime: tenSecondInMs,
-    }
+        staleTime: tenSecondInMs,
+      }
+    )
   );
 
   const authors = useMemo(