ref(tsc): uptime-checks endpoint to apiOptions (#112573)

Author: TkDodo

static/app/views/alerts/rules/uptime/uptimeChecksTable.tsx

@@ -1,14 +1,16 @@
 import {Fragment} from 'react';
+import {useQuery} from '@tanstack/react-query';
 
 import {LoadingError} from 'sentry/components/loadingError';
 import {LoadingIndicator} from 'sentry/components/loadingIndicator';
 import {Pagination} from 'sentry/components/pagination';
 import {t} from 'sentry/locale';
 import type {Project} from 'sentry/types/project';
+import {selectJsonWithHeaders} from 'sentry/utils/api/apiOptions';
 import {decodeScalar} from 'sentry/utils/queryString';
 import {useLocation} from 'sentry/utils/useLocation';
 import {useOrganization} from 'sentry/utils/useOrganization';
-import {useUptimeChecks} from 'sentry/views/insights/uptime/utils/useUptimeChecks';
+import {uptimeChecksApiOptions} from 'sentry/views/insights/uptime/utils/uptimeChecksApiOptions';
 
 import {UptimeChecksGrid} from './uptimeChecksGrid';
 
@@ -32,26 +34,19 @@ export function UptimeChecksTable({
     statsPeriod: decodeScalar(location.query.statsPeriod),
   };
 
-  const {
-    data: uptimeChecks,
-    isError,
-    isPending,
-    getResponseHeader,
-    refetch,
-  } = useUptimeChecks(
-    {
+  const {data, isError, isPending, refetch} = useQuery({
+    ...uptimeChecksApiOptions({
       orgSlug: organization.slug,
       projectSlug: project.slug,
       detectorId,
       cursor: decodeScalar(location.query.cursor),
       ...timeRange,
       limit: 10,
-    },
-    {
-      refetchOnWindowFocus: true,
-      refetchInterval: 60_000,
-    }
-  );
+    }),
+    refetchOnWindowFocus: true,
+    refetchInterval: 60_000,
+    select: selectJsonWithHeaders,
+  });
 
   if (isError) {
     return <LoadingError message={t('Failed to load uptime checks')} onRetry={refetch} />;
@@ -62,9 +57,9 @@ export function UptimeChecksTable({
       {isPending ? (
         <LoadingIndicator />
       ) : (
-        <UptimeChecksGrid traceSampling={traceSampling} uptimeChecks={uptimeChecks} />
+        <UptimeChecksGrid traceSampling={traceSampling} uptimeChecks={data?.json ?? []} />
       )}
-      <Pagination pageLinks={getResponseHeader?.('Link')} />
+      <Pagination pageLinks={data?.headers.Link} />
     </Fragment>
   );
 }

…nsights/uptime/utils/useUptimeChecks.tsx …/uptime/utils/uptimeChecksApiOptions.tsxstatic/app/views/insights/uptime/utils/useUptimeChecks.tsx renamed to static/app/views/insights/uptime/utils/uptimeChecksApiOptions.tsx static/app/views/insights/uptime/utils/useUptimeChecks.tsx renamed to static/app/views/insights/uptime/utils/uptimeChecksApiOptions.tsx

@@ -1,9 +1,6 @@
-import {getApiUrl} from 'sentry/utils/api/getApiUrl';
-import {
-  useApiQuery,
-  type ApiQueryKey,
-  type UseApiQueryOptions,
-} from 'sentry/utils/queryClient';
+import {queryOptions} from '@tanstack/react-query';
+
+import {apiOptions} from 'sentry/utils/api/apiOptions';
 import type {UptimeCheck} from 'sentry/views/alerts/rules/uptime/types';
 
 interface UptimeChecksParameters {
@@ -17,7 +14,7 @@ interface UptimeChecksParameters {
   statsPeriod?: string;
 }
 
-function makeUptimeChecksQueryKey({
+export function uptimeChecksApiOptions({
   orgSlug,
   projectSlug,
   detectorId,
@@ -26,38 +23,27 @@ function makeUptimeChecksQueryKey({
   start,
   end,
   statsPeriod,
-}: UptimeChecksParameters): ApiQueryKey {
-  return [
-    getApiUrl(
+}: UptimeChecksParameters) {
+  // TODO(Leander): Add querying and sorting, when the endpoint supports it
+  return queryOptions({
+    ...apiOptions.as<UptimeCheck[]>()(
       '/projects/$organizationIdOrSlug/$projectIdOrSlug/uptime/$uptimeDetectorId/checks/',
       {
         path: {
           organizationIdOrSlug: orgSlug,
           projectIdOrSlug: projectSlug,
           uptimeDetectorId: detectorId,
         },
+        query: {
+          per_page: limit,
+          cursor,
+          start,
+          end,
+          statsPeriod,
+        },
+        staleTime: 10_000,
       }
     ),
-    {
-      query: {
-        per_page: limit,
-        cursor,
-        start,
-        end,
-        statsPeriod,
-      },
-    },
-  ];
-}
-
-export function useUptimeChecks(
-  params: UptimeChecksParameters,
-  options: Partial<UseApiQueryOptions<UptimeCheck[]>> = {}
-) {
-  // TODO(Leander): Add querying and sorting, when the endpoint supports it
-  return useApiQuery<UptimeCheck[]>(makeUptimeChecksQueryKey(params), {
-    staleTime: 10_000,
     retry: true,
-    ...options,
   });
 }

static/app/views/issueDetails/groupUptimeChecks.tsx

@@ -1,16 +1,19 @@
+import {useQuery} from '@tanstack/react-query';
+
 import {usePageFilterDates} from 'sentry/components/checkInTimeline/hooks/useMonitorDates';
 import {LoadingError} from 'sentry/components/loadingError';
 import {LoadingIndicator} from 'sentry/components/loadingIndicator';
 import {t} from 'sentry/locale';
 import type {UptimeDetector} from 'sentry/types/workflowEngine/detectors';
+import {selectJsonWithHeaders} from 'sentry/utils/api/apiOptions';
 import {parseLinkHeader} from 'sentry/utils/parseLinkHeader';
 import {decodeScalar} from 'sentry/utils/queryString';
 import {useLocation} from 'sentry/utils/useLocation';
 import {useOrganization} from 'sentry/utils/useOrganization';
 import {useParams} from 'sentry/utils/useParams';
 import {UptimeChecksGrid} from 'sentry/views/alerts/rules/uptime/uptimeChecksGrid';
 import {useDetectorQuery} from 'sentry/views/detectors/hooks';
-import {useUptimeChecks} from 'sentry/views/insights/uptime/utils/useUptimeChecks';
+import {uptimeChecksApiOptions} from 'sentry/views/insights/uptime/utils/uptimeChecksApiOptions';
 import {EventListTable} from 'sentry/views/issueDetails/streamline/eventListTable';
 import {useUptimeIssueDetectorId} from 'sentry/views/issueDetails/streamline/issueUptimeCheckTimeline';
 import {useGroup} from 'sentry/views/issueDetails/useGroup';
@@ -36,18 +39,20 @@ export default function GroupUptimeChecks() {
     enabled: canFetchUptimeChecks,
   });
 
-  const {data: uptimeChecks, getResponseHeader} = useUptimeChecks(
-    {
+  const {data} = useQuery({
+    ...uptimeChecksApiOptions({
       orgSlug: organization.slug,
       projectSlug: group?.project.slug ?? '',
       detectorId: detectorId ?? '',
       cursor: decodeScalar(location.query.cursor),
       limit: 50,
       start: since.toISOString(),
       end: until.toISOString(),
-    },
-    {enabled: canFetchUptimeChecks}
-  );
+    }),
+    enabled: canFetchUptimeChecks,
+    select: selectJsonWithHeaders,
+  });
+  const uptimeChecks = data?.json;
 
   if (isGroupError) {
     return <LoadingError onRetry={refetchGroup} />;
@@ -57,7 +62,7 @@ export default function GroupUptimeChecks() {
     return <LoadingIndicator />;
   }
 
-  const links = parseLinkHeader(getResponseHeader?.('Link') ?? '');
+  const links = parseLinkHeader(data?.headers.Link ?? '');
   const previousDisabled = links?.previous?.results === false;
   const nextDisabled = links?.next?.results === false;
   const pageCount = uptimeChecks.length;