ref(tsc): checkIns endpoint to apiOptions

static/app/views/insights/crons/components/monitorCheckIns.tsx

@@ -1,13 +1,15 @@
 import {Fragment, useEffect} from 'react';
+import {useQuery} from '@tanstack/react-query';
 
 import {LoadingError} from 'sentry/components/loadingError';
 import {Pagination} from 'sentry/components/pagination';
 import type {Project} from 'sentry/types/project';
+import {selectJsonWithHeaders} from 'sentry/utils/api/apiOptions';
 import {useLocation} from 'sentry/utils/useLocation';
 import {useOrganization} from 'sentry/utils/useOrganization';
 import {getNextCheckInEnv} from 'sentry/views/alerts/rules/crons/utils';
 import type {MonitorEnvironment} from 'sentry/views/insights/crons/types';
-import {useMonitorCheckIns} from 'sentry/views/insights/crons/utils/useMonitorCheckIns';
+import {monitorCheckInsApiOptions} from 'sentry/views/insights/crons/utils/monitorCheckInsApiOptions';
 
 import {MonitorCheckInsGrid} from './monitorCheckInsGrid';
 
@@ -28,20 +30,17 @@ export function MonitorCheckIns({monitorSlug, monitorEnvs, project}: Props) {
   // when this value changes there are new check-ins present.
   const nextCheckIn = getNextCheckInEnv(monitorEnvs)?.nextCheckIn;
 
-  const {
-    data: checkInList,
-    getResponseHeader,
-    isPending,
-    isError,
-    refetch,
-  } = useMonitorCheckIns({
-    orgSlug: organization.slug,
-    projectSlug: project.slug,
-    monitorIdOrSlug: monitorSlug,
-    limit: PER_PAGE,
-    expand: 'groups',
-    environment: monitorEnvs.map(e => e.name),
-    queryParams: {...location.query},
+  const {data, isPending, isError, refetch} = useQuery({
+    ...monitorCheckInsApiOptions({
+      orgSlug: organization.slug,
+      projectSlug: project.slug,
+      monitorIdOrSlug: monitorSlug,
+      limit: PER_PAGE,
+      expand: 'groups',
+      environment: monitorEnvs.map(e => e.name),
+      queryParams: {...location.query},
+    }),
+    select: selectJsonWithHeaders,
   });
 
   useEffect(() => void refetch(), [refetch, nextCheckIn]);
@@ -55,12 +54,12 @@ export function MonitorCheckIns({monitorSlug, monitorEnvs, project}: Props) {
   return (
     <Fragment>
       <MonitorCheckInsGrid
-        checkIns={checkInList ?? []}
+        checkIns={data?.json ?? []}
         isLoading={isPending}
         hasMultiEnv={hasMultiEnv}
         project={project}
       />
-      <Pagination pageLinks={getResponseHeader?.('Link')} />
+      <Pagination pageLinks={data?.headers.Link} />
     </Fragment>
   );
 }

static/app/views/insights/crons/utils/monitorCheckInsApiOptions.tsx

@@ -0,0 +1,38 @@
+import {apiOptions} from 'sentry/utils/api/apiOptions';
+import type {CheckIn} from 'sentry/views/insights/crons/types';
+
+interface MonitorChecksParameters {
+  monitorIdOrSlug: string;
+  orgSlug: string;
+  projectSlug: string;
+  cursor?: string;
+  environment?: string[];
+  expand?: 'groups';
+  limit?: number;
+  // Allows passing in arbitrary location query params
+  queryParams?: Record<string, string | string[] | null | undefined>;
+}
+
+export function monitorCheckInsApiOptions({
+  orgSlug,
+  projectSlug,
+  monitorIdOrSlug,
+  cursor,
+  limit,
+  environment,
+  expand,
+  queryParams,
+}: MonitorChecksParameters) {
+  return apiOptions.as<CheckIn[]>()(
+    '/projects/$organizationIdOrSlug/$projectIdOrSlug/monitors/$monitorIdOrSlug/checkins/',
+    {
+      path: {
+        organizationIdOrSlug: orgSlug,
+        projectIdOrSlug: projectSlug,
+        monitorIdOrSlug,
+      },
+      query: {per_page: limit, cursor, environment, expand, ...queryParams},
+      staleTime: 0,
+    }
+  );
+}

static/app/views/issueDetails/groupCheckIns.tsx

@@ -1,15 +1,17 @@
+import {useQuery} from '@tanstack/react-query';
 import uniq from 'lodash/uniq';
 
 import {LoadingError} from 'sentry/components/loadingError';
 import {LoadingIndicator} from 'sentry/components/loadingIndicator';
 import {t} from 'sentry/locale';
+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 {MonitorCheckInsGrid} from 'sentry/views/insights/crons/components/monitorCheckInsGrid';
-import {useMonitorCheckIns} from 'sentry/views/insights/crons/utils/useMonitorCheckIns';
+import {monitorCheckInsApiOptions} from 'sentry/views/insights/crons/utils/monitorCheckInsApiOptions';
 import {EventListTable} from 'sentry/views/issueDetails/streamline/eventListTable';
 import {useCronIssueAlertId} from 'sentry/views/issueDetails/streamline/issueCronCheckTimeline';
 import {useGroup} from 'sentry/views/issueDetails/useGroup';
@@ -31,21 +33,19 @@ export default function GroupCheckIns() {
     Boolean(organization.slug) && Boolean(group?.project.slug) && Boolean(cronAlertId);
 
   const {cursor, ...locationQuery} = location.query;
-  const {
-    data: checkIns = [],
-    isPending: isDataPending,
-    getResponseHeader,
-  } = useMonitorCheckIns(
-    {
+  const {data, isPending: isDataPending} = useQuery({
+    ...monitorCheckInsApiOptions({
       orgSlug: organization.slug,
       projectSlug: group?.project.slug ?? '',
       monitorIdOrSlug: cronAlertId ?? '',
       limit: 50,
       cursor: decodeScalar(cursor),
       queryParams: locationQuery,
-    },
-    {enabled: canFetchMonitorCheckIns}
-  );
+    }),
+    select: selectJsonWithHeaders,
+    enabled: canFetchMonitorCheckIns,
+  });
+  const checkIns = data?.json ?? [];
 
   if (isGroupError) {
     return <LoadingError onRetry={refetchGroup} />;
@@ -55,7 +55,7 @@ export default function GroupCheckIns() {
     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 = checkIns.length;